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

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

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

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

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

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

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

  

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

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

Подключаем

<link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.datetimepicker.js"></script>

Используем

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

<input type="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

 

 

Рассказать друзьям

Добавить комментарий


Защитный код
Обновить

Комментарии   

0
Amoseven
# Amoseven 09.12.2013 10:29
Замечательный плагин. Спасибо.

Есть маленький вопрос. При инициализации значение даты в поле правильное, какое задали, но при выборе в календаре всё равно устанавливает текущую дату. Хотелось бы, чтобы календарь позиционировался на значении которое я передал input.value
0
Leroy
# Leroy 09.12.2013 14:17
быть может не совпадает формат времени? потому что в двух примерах выше так и есть, время задано другое и плагин переходит на него. к примеру в одном 12.11.2013 и плагин переходит на эту дату, и другой со временем 23:16, плагин переходит к 23:00, так как там step 60 минут
0
Эдуард
# Эдуард 11.06.2014 18:50
Плагин очень интересный. Спасибо.

Есть ньюансы в поведении (при inline:false)

1) При клике вне всплывшего календаря, он закрывается, но его значение (текущее дата/время) всё равно влетает в поле ввода, хотя более правильным поведением является оставить поле ввода по-прежнему пустым.

2) При закрытии формы, из поля ввода которой всплывал календарь, календар остаётся висеть, а не закрывается вместе с "родительской" формой.

Всё это конечно можно исправить наколдовав дополнительный код, но уж если есть плагин, было бы разумнее/удобнее, если бы это решалось самим плагином.
0
Алексей
# Алексей 18.06.2014 01:17
Валерий, спасибо за плагин!

Единственная просьба - сделайте для таймпикера возможность выбора минут (дополнительную ленту с минутами). В том проекте, где плагин сейчас использую я - это не нужно, но в дальнейшей перспективе было бы необходимо редактировать и минуты тоже. Более того, некоторым, возможно, потребуются и секунды. на мой взгляд, после той работы, что Вы уже проделали - это мелочь, но тем не менее.

Еще раз спасибо :-)
0
Boris Loboda
# Boris Loboda 06.08.2014 03:49
А какой минимальный год берет DateTimePicker? Есть необходимость фиксировать исторические события, скажем с 1500 года.
0
Leroy
# Leroy 06.08.2014 14:01
В спецификации http://ecma-international.org/ecma-262/5.1/#sec-15.9.1.1 сказано, что минимальная дата для js это 01 January, 1970. Плагин использует стандартные средства для работы с датами, поэтому такой возможности нет, но я подумаю что можно сделать
0
Boris Loboda
# Boris Loboda 06.08.2014 17:36
Вроде видел где-то что Класс DateTime в php поддерживает обработку дат то-ли с 1000-го года... Не могу найти. Хотя это ж надо наверное js...

В принципе объективная необходимость - фиксация в базе событий далекой давности.

Спасибо!
0
Boris Loboda
# Boris Loboda 06.08.2014 04:05
DateTimePicker:

При mask: true если выделить дату в поле ввода и нажать <Del> (очистка даты) только первая цифра в дате очищается. Должно быть типа такое "__.__.____", а получается такое "_5.08.2014", дата остается.
0
Leroy
# Leroy 06.08.2014 14:03
да, выделение пока не учитывается. В новой версии постараюсь этот момент пофиксить
0
Boris Loboda
# Boris Loboda 06.08.2014 17:56
И раз уж есть кнопочка "Номе", может стоит добавить "Clear"? В принципе очистка даты почти такая же востребованная операция как и установка даты. А то я уже думал добавлять рядом с полем ввода...

А если смотреть дальше - мое imho конечно...

В интерфейсном плане по-моему за полем ввода стоит добавить пару иконок - popup календаря и очистку для. Поле ввода в принципе выглядит как обычный <input> и для пользователя не очевидно, что это некий "интеллектуальный" элемент с выпрыгивающим календарем. Календарь конечно же выпрыгивает когда попадаешь в поле ввода, но для людей которые впервые с этим сталкиваются - это становится сюрпризом. А с кнопочками будет сразу видно и понятно, что это элемент с некоей обвязкой, он может нечто большее, чем просто принять текст.

В принципе инет-аудитория - это обычно случайные, разовые посетители... для них бы поменьше сюрпризов.
0
Leroy
# Leroy 06.08.2014 18:20
кнопка clear появится в следующей версии. А по поводу кнопок тригеров, то в плагине есть методы которыми можно пользоваться используя свои кнопки. В демо странице есть пример. Делать плагином такие кнопки это лишняя верстка, которая будет работать везде по разному, и не факт, что впишется в любой интерфейс. К примеру у бутсрапа есть сниппеты для создания таких кнопок на инпуте, и проще всего привязать триггер к ним. Хотя как опцию такую штуку может и добавлю
0
Boris Loboda
# Boris Loboda 06.08.2014 19:23
С версткой это да - могут быть казусы. Но для таких случаев в доке можно оговаривать условия. Типа дать например в css div со своим стилем и сказать - что типа "если вы поле используете с кнопками оно обязано быть в div того стиля которого я предлагаю".

Согласен, что в принципе такой симбиоз и самому нетрудно сделать.

Кстати насчет казусов с версткой -

http://www.dynarch.com/jscal/

На страничке jcal календарь от поля ввода (при нажатии кнопки) выпрыгивает аж на самый верх страницы. Или я чего не понял и такова была авторская задумка... :)
0
Boris Loboda
# Boris Loboda 06.08.2014 18:12
И еще одна тонкость с пустой (неустановленной) датой... Хотя я может чего не дочитал, не досмотрел.

После "посещения" поля даты (если оно изначально было пустое) - поле насильно заполняется текущей датой. Это не совсем правильно, пустая дата такое же валидное значение (в определенных ситуациях) как и явная дата, им тоже оперируют и используют этот факт. Например дата события неизвестна, событие еще не произошло. Типа - выписали заказчику накладную на товар заблаговременно, но заказчик товар еще не забирал - поле "Дата выдачи товара" должно оставаться пустым. Придет забирать - туда поставят конкретную дату в уже готовую накладную.
0
Leroy
# Leroy 06.08.2014 18:17
это было в старых версиях (надо обновить на сайте). Но и в них путем комбинации настроек оно отключалось. сейчас такое поведение по дефолту
0
Boris Loboda
# Boris Loboda 06.08.2014 19:09
Не совсем понял что делать, чтобы решить проблему (в смысле нормально оперировать пустой датой). Какое-то свойство переключить? Ждать новую версию? Или у меня старая версия (где именно взять новее)?
0
Leroy
# Leroy 06.08.2014 20:17
новую сказать на гитхабе, ссылка наверху.
0
Boris Loboda
# Boris Loboda 07.08.2014 08:13
v2.3.4 ставит дату при выходе из поля (клик вне календаря). Делать ничего не надо специально?

В коде посмотрел - есть allowBlank:true - я так понял это оно.

У меня с маской (ru-format), без маски не проверял пока. Положить может пример? - у меня сайт есть.

jQuery('#date_time').datetimepicker(

{

lang: 'en',

timepicker: false,

format: 'd.m.Y',

formatDate: 'd.m.Y',

minDate: '01.01.1000',

mask: true,

closeOnDateSelect:true

});
0
Leroy
# Leroy 07.08.2014 11:09
кроме mask и allowBlank, есть еще validateonBlur.
0
Leroy
# Leroy 07.08.2014 11:10
http://xdsoft.net/jqplugins/datetimepicker/#validateOnBlur
0
Boris Loboda
# Boris Loboda 07.08.2014 20:12
Да, с этим "каменный цветок" выходит...
0
Leroy
# Leroy 09.08.2014 01:05
подробнее?)
0
Boris Loboda
# Boris Loboda 10.08.2014 17:16
В смысле validateonBlur=false - дату насильно не ставит, когда уходишь из поля.

В общем - диапазон дат бы расширить на несколько столетий назад. :)
0
Boris Loboda
# Boris Loboda 07.08.2014 08:16
Из-за маски ставит - без маски уход нормальный.
0
Jaloliddin
# Jaloliddin 18.03.2015 21:06
Большое спасибо) выручили ) кстати это тоже напишите "closeOnTimeSelect:true," чтобы закрывался поле после того как только выбрано время. Спасибо Автору ещё раз))
0
overhedge
# overhedge 23.03.2015 20:25
Спасибо за плагин! Подскажите, пожалуйста, возможно ли прописать условие minTime "внутри" minDate, т.е. по дефолту для выбора закрыты дата и время меньше текущих (minDate:0,minTime:0), но при этом при выборе даты в будущем снова становятся доступны все слоты. Нужно для планирования визитов
0
overhedge
# overhedge 23.03.2015 22:06
Сам нашёл решение этой проблемы: http://xdsoft.net/jqplugins/datetimepicker/#comment-1856389675
0
Александр
# Александр 10.04.2015 08:27
Плагин очень понравился, во всяком случае, лучшего я не нашел. Но у меня возник вопрос (поскольку я очень неопытный программист) к его использованию.
Мне хотелось бы вместо значения id в селекторе использовать переменную, имеющую тоже значение.
Например,
$('#datetimepicker').datetimepicker({
вместо #datetimepicker хочу подставить var x = #datetimepickeк
Если не трудно, подскажите, как это сделать.
Заранее благодарю.
0
Leroy
# Leroy 10.04.2015 09:22
var x = '#datetimepicker'
$(x).datetimepicker();
:-)
0
Михаил
# Михаил 26.05.2015 12:05
Спасибо! Это лучший бесплатный datepicker, который я видел.
Только когда я выставляю русский язык, неделя все равно начинается в воскресенье.
Как это можно исправить?
0
Leroy
# Leroy 26.05.2015 14:31
http://xdsoft.net/jqplugins/datetimepicker/#dayOfWeekStart
0
Константин
# Константин 14.07.2015 18:31
Большое спасибо за плагин, очень понравился. Но у меня возник вопрос.
Мне необходимо организовать выбор промежутка между датами с выбором времени времени, такая возможность реализована в плагине, но как только я меняю формат даты эта возможность перестает работать, подскажите, пожалуйста как это можно реализовать?
На ум приходит, что это возможно через использование moment.js, я в правильном направлении мыслю?
Заранее благодарю!
+1
php-coder
# php-coder 22.09.2015 12:44
Отличный плагин. Подскажите, пожалуйста, как сделать так, чтобы он срабатывал и для динамически создаваемых полей? Во всплывашке появляется форма и в ней уже календарь не работает.
0
Kirich
# Kirich 19.11.2015 13:37
Можно ли добавить два таймпикера в один инпут? Или, ещё лучше, если время будет в виде интервала, вроде такого: "12:00 - 16:00"
0
Leroy
# Leroy 20.11.2015 07:52
За 2$ автор сделал PeriodPicker http://xdsoft.net/jqplugins/periodpicker/ это то что вам нужно
0
Kirich
# Kirich 24.11.2015 13:38
Этот плагин я смотрел. Похоже это не то, что нужно.
И он достаточно громоздкий.
0
User
# User 02.12.2015 07:01
вот я идиот. все подключил по инструкции. при клике на поле календарь не всплывает. консоль браузера ошибок не выдает.
0
User
# User 02.12.2015 07:19
все. заработало. не тот js подключал. в архиве куча барахла. спс за каледарь
0
Лаэль
# Лаэль 17.12.2015 21:52
Здравствуйте, наверное, я что-то неправильно делаю, но у меня вместо календаря с datetimepicker отображается только оболочка, то есть стрелки в пустом окошке. Возможно вы знаете в чем проблема.
0
Lutsman
# Lutsman 25.03.2016 17:47
Уважаемый, хочу уточнить этот плагин делали вы или индусы из Бангалора?
в build/jquery.datetimepicker.full.js
/*!
* @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 - 2015
* @version 1.3.3
*
* Date formatter utility library that allows formatting date/time variables or Date objects using PHP DateTime format.
* @see http://php.net/manual/en/function.date.php
*
* For more JQuery plugins visit http://plugins.krajee.com
* For more Yii related demos visit http://demos.krajee.com
*/
0
Leroy
# Leroy 27.03.2016 17:04
Написано же Date formatter utility. Плагин с недавних пор использует ее.
0
Lutsman
# Lutsman 31.05.2016 10:38
Понятно.
0
Mellon
# Mellon 31.05.2016 10:10
Ни у кого не было проблем с локализацией? lang: 'ru' у меня почему-то не работает. Как правильно прописать язык? У кого заработало?
0
Lutsman
# Lutsman 31.05.2016 10:25
Цитирую Mellon:
Ни у кого не было проблем с локализацией? lang: 'ru' у меня почему-то не работает. Как правильно прописать язык? У кого заработало?


как-то так
$('#datepicker-calendar').DatePicker({
inline: true,
date: [from, to],
calendars: 3,
mode: 'range',
locale: {
daysMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
months: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"],
monthsShort: ["Ян", "Фев", "Март", "Апр", "Май", "Июнь", "Июль", "Авг", "Сен", "Окт", "Ноя", "Дек"]
},
current: new Date(to.getFullYear(), to.getMonth() + 1, 1)
});
0
Leroy
# Leroy 31.05.2016 11:17
Это у вас ведь не datetimepicker
0
Lutsman
# Lutsman 31.05.2016 11:50
Прошу, прощения. Вы правы, сначала ваш плагин поставил, но заказчик захотел другой и я сменил и забыл.
-1
nice
# nice 03.08.2016 20:40
Почему календарь начинается с воскресенья? неделя должна с понедельника начинаться