1Как-то я описывал работу с jQueryUI datetimepicker. Приемлимым этот плагин назвать было сложно, потому как он тянул с собой весь jQueryUI, и еще 10-ок файлов. По функциональности он тоже весьма скуп. Ничего более стоящего, и тогда и сейчас найти не удалось. Поэтому написал свой плагин с преферансом и поэтессами.

Результатом трудов стал великолепный на мой взгляд плагин на jQuery DateTimePicker

Почему он лучше, чем стандартный jQuery UI виджет?

Во первых, потому, что не требует кроме себя и собственно jQuery ничего более. Во вторых в сжатом виде, весит менее 5кб вместе со стилями. Нет других дополнительных файлов с изображениями, только файл стилей и файл js.

Однако, главным преимуществом, я считаю, наличие отключаемого,  TimePicker'а. Да DatePicker тоже отключаем и это очень удобно.

То, что дает нам интернет, в этом сегменте виджетов, ужасно. Пикеры из 90-х. Такое ощущение, что их создателям было просто наплевать на внешний вид своего детища. Один из самых удачных, это безусловно jscal, но он настолько сложен и монструозен, что просто прикрутить его к тестовой странице мне не удалось. Да объем кода, ему сопутствующий оставляет желать лучшего.

У других хуже. Сплошные недочеты. То нет предустановок и каких-то опций, то и вовсе нет никаких настроек. Все вшито. Как говорится, используйте как есть, либо не используйте.

Demo  Скачать

Я постарался учесть свой опыт, в работе с датой и временем. Также учел, что форматы времени могут отличаться для разных стран. 

То, что у меня получилось смотрите ниже.

Подключаем

<linkrel="stylesheet"type="text/css"href="js/jquery.datetimepicker.css"/>

<scriptsrc="js/jquery.js"></script>

<scriptsrc="js/jquery.datetimepicker.js"></script>

Используем

Начнем с  демо, без опций

<inputtype="text"id="datetimepicker"/>

<script>

$('#datetimepicker').datetimepicker();

</script>





Результат



Но, что если в Вашей стране свой формат времени и язык. Плагин поддерживает интернацианализацию, и содержит 3 языка: английский, русский и немецкий вариант. Формат же, задается точно так же, как и в php.

Сделаем плагин на немецком языке. Оставим только datepicker, и поменяем формат даты. (пример с языком просто демонстрирует возможности интернационализации, так как плагин уже содержит немецкий язык, и достаточно было бы использовать лишь lang:'de')

$('#datetimepicker1').datetimepicker({

 lang:'de',

 i18n:{de:{

   months:[

       'Januar','Februar','März','April','Mai','Juni','Juli','August',

       'September','Oktober','November','Dezember',],

    dayOfWeek:["So.", "Mo", "Di", "Mi", "Do", "Fr", "Sa.",],

 }},

timepicker:false,

format:'d.m.Y',

});





Результат



Не всем нужен DatePicker. Что если мы выбираем только время. нет ничего проще, отключаем DatePicker

$('#datetimepicker2').datetimepicker({

  datepicker:false,

  format:'H:i',

});





Результат



Ну и еще один пример, когда DateTimePicker заменяет исходный input

$('#datetimepicker3').datetimepicker({
  format:'d.m.Y H:i',
  inline:true,
  lang:'ru',
});



Результат




Предположим, что мы нашли нужный нам рейс в определенный день. рейс идет несколько раз в день, но не через ровные интервалы времени. В этом нам поможет опция  allowTimes

$('#datetimepicker4').datetimepicker({
 datepicker:false,
 inline:true,
 allowTimes:['9:00','12:00','15:00','19:00','21:00'],
});



Результат



Перечислять все возможности плагина очень долго, поэтому приведу следующую таблицу.

 

Полный список опций

Название defaultНазначениеПример использования
value null Задает текущее значение datetimepicker. Если оно задано, то input.value игнорируется
{value:12.03.2013,
 format:'d.m.Y',}
lang en Язык на котором отображаются дни недели и месяцы. В плагин встроены 3 языка: английский - en, немецкий - de и русский - ru
{lang:'ru'}
format Y/m/d H:i Основной формат времени. Используя этот параметр, плагин переводит дату указанную в value в свой формат, с которым в дальнейшем оперирует. Формат, идентичен тому, который использует php в функции date. Полный список можно посмотреть в документации   

{format:'H'} // отображаем только часы

{format:'Y'} // год
formatDate Y/m/d Это служебный формат даты. Используется для того, чтобы плагин верно интерпретировал значения опций  minDate и maxDate, о которых будет написано ниже  
{formatDate:'d.m.Y'}
formatTime H:i  Аналогично formatDate . Используется для того, чтобы плагин верно интерпретировал значения опций  minTime и maxTime, о которых будет написано ниже   
{formatTime:'H'} // только час
step 60 В TimePicker'е список вариантов выбора времени выводится с определенным интервалом в минутах. По умолчанию - это 1 час (60 минут).
{step:5}
closeOnDateSelect 0 Если отображаются и DatePicker и TimePicker то, при выборе даты плагин не закрывается. Делает он это, только после выбора времени.

Если задано true, то плагин будет закрыт при выборе даты. Если false, то даже если timepicker не отображается, плагин закрыт не будет.

{ closeOnDateSelect:true}
closeOnWithoutClick true Закрывать плагин если пользователь не выбрав дату, кликнул где-то вне плагина.
{ closeOnWithoutClick :false}
timepicker true Отображать TimePicker. Может принимать false, только если  datepicker== true
{timepicker:false}
datepicker true  Отображать DatePicker. Может принимать false, только если  timepicker== true 
{datepicker:false}
minDate false Опция, предназначенная для ограничения нижней границы выбора даты. К примеру, вы заказываете такси, и Вам необходимо выбрать дату. Очевидно, что дату можно выбирать только начиная с текущего дня. Если задать, как 0, то будет использована текущая дата.
{minDate:0,} // текущая дата

{minDate:'2013/12/03'}

{minDate:'05.12.2013',formatDate:'d.m.Y'}
maxDate false Аналогично  minDate, верхняя граница даты. 0 - текущая дата
{maxDate:0,} // текущая дата

{maxDate:'2013/12/03'}

{maxDate:'05.12.2013',formatDate:'d.m.Y'}
minTime false Аналогично minDate, но для TimePicker'a
{minTime:0,} // текущая дата

{minTime:'12:00'}

{minTime:'13:45:34',formatTime:'H:i:s'}
maxTime false  Аналогично maxDate, но для TimePicker'а
{maxTime:0,} // текущая дата

{maxTime:'12:00'}

{maxTime:'13:45:34',formatTime:'H:i:s'}
allowTimes [] Опция, которая задает доступное для выбора время. К примеру, выбор автобусного рейса может быть только в определенное время. При этом значения   minTime и  maxTime игнорируются.
{allowTimes:[

'09:00','11:00','12:00','21:00'

]}
opened false При true плагин будет открыт сразу после загрузки страницы  
inline false При true плагин заменяет собой <input>  
onSelectDate function(){} Вызывается при выборе даты в DatePicker'е. Имеет 3 параметра. Сам плагин, текущее время, с которым плагин работает и ссылка на элемент input
onSelectDate:function($dtp,current,input){

  alert(current.dateFormat('d/m/Y'))

},
onSelectTime function(){} Аналогично onSelectDate  для TimePicker  
onChangeMonth false Вызывается при смене месяца в DatePicker  
onChangeTime false При прокрутке времени  
onShow false При показе плагина  
onClose false Перед закрытием плагина  
withoutCopyright false Опция, для отключения пока ссылки на сайт плагина  
inverseButton false Инвертирует прокрутку  
hours12 false 12-ти часовой формат времени  
dayOfWeekStart 0 Начало недели в DatePicker. По умолчанию с Воскресения - 0.

Понедельник - 1

Вторник - 2

Среда - 3

...

Суббота - 6