Как-то я описывал работу с 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'],
});

Результат



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

{value:12.03.2013,
 format:'d.m.Y',}

{lang:'ru'}

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

{format:'Y'} // год

{formatDate:'d.m.Y'}

{formatTime:'H'} // только час

{step:5}

{ closeOnDateSelect:true}

{ closeOnWithoutClick :false}

{timepicker:false}

{datepicker:false}

{minDate:0,} // текущая дата

{minDate:'2013/12/03'}

{minDate:'05.12.2013',formatDate:'d.m.Y'}

{maxDate:0,} // текущая дата

{maxDate:'2013/12/03'}

{maxDate:'05.12.2013',formatDate:'d.m.Y'}

{minTime:0,} // текущая дата

{minTime:'12:00'}

{minTime:'13:45:34',formatTime:'H:i:s'}

{maxTime:0,} // текущая дата

{maxTime:'12:00'}

{maxTime:'13:45:34',formatTime:'H:i:s'}

{allowTimes:[

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

]}

onSelectDate:function($dtp,current,input){

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

},