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

 

 

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

Платная консультация по вопросам 1500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

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


Комментарии   

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

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

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

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

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

Всё это конечно можно исправить наколдовав дополнительный код, но уж если есть плагин, было бы разумнее/удобнее, если бы это решалось самим плагином.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Алексей
0 # Алексей 17.06.2014 21:17
Валерий, спасибо за плагин!

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

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

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

Спасибо!
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Boris Loboda
0 # Boris Loboda 06.08.2014 00:05
DateTimePicker:

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

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

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

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

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

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

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

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

После "посещения" поля даты (если оно изначально было пустое) - поле насильно заполняется текущей датой. Это не совсем правильно, пустая дата такое же валидное значение (в определенных ситуациях) как и явная дата, им тоже оперируют и используют этот факт. Например дата события неизвестна, событие еще не произошло. Типа - выписали заказчику накладную на товар заблаговременно, но заказчик товар еще не забирал - поле "Дата выдачи товара" должно оставаться пустым. Придет забирать - туда поставят конкретную дату в уже готовую накладную.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 06.08.2014 14:17
это было в старых версиях (надо обновить на сайте). Но и в них путем комбинации настроек оно отключалось. сейчас такое поведение по дефолту
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Boris Loboda
0 # Boris Loboda 06.08.2014 15:09
Не совсем понял что делать, чтобы решить проблему (в смысле нормально оперировать пустой датой). Какое-то свойство переключить? Ждать новую версию? Или у меня старая версия (где именно взять новее)?
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 06.08.2014 16:17
новую сказать на гитхабе, ссылка наверху.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Boris Loboda
0 # Boris Loboda 07.08.2014 04: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

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

В общем - диапазон дат бы расширить на несколько столетий назад. :)
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Boris Loboda
0 # Boris Loboda 07.08.2014 04:16
Из-за маски ставит - без маски уход нормальный.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
илья1990
0 # илья1990 06.08.2018 10:35
а как сделать зависимые датапикеры? чтобы при выборе даты в первом, во втором это становилось максДата и также при выборе во втором в первом ставилась минДата.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Jaloliddin
0 # Jaloliddin 18.03.2015 18:06
Большое спасибо) выручили ) кстати это тоже напишите "closeOnTimeSelect:true," чтобы закрывался поле после того как только выбрано время. Спасибо Автору ещё раз))
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
overhedge
0 # overhedge 23.03.2015 17:25
Спасибо за плагин! Подскажите, пожалуйста, возможно ли прописать условие minTime "внутри" minDate, т.е. по дефолту для выбора закрыты дата и время меньше текущих (minDate:0,minTime:0), но при этом при выборе даты в будущем снова становятся доступны все слоты. Нужно для планирования визитов
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
overhedge
0 # overhedge 23.03.2015 19:06
Сам нашёл решение этой проблемы: http://xdsoft.net/jqplugins/datetimepicker/#comment-1856389675
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Александр
0 # Александр 10.04.2015 05:27
Плагин очень понравился, во всяком случае, лучшего я не нашел. Но у меня возник вопрос (поскольку я очень неопытный программист) к его использованию.
Мне хотелось бы вместо значения id в селекторе использовать переменную, имеющую тоже значение.
Например,
$('#datetimepicker').datetimepicker({
вместо #datetimepicker хочу подставить var x = #datetimepickeк
Если не трудно, подскажите, как это сделать.
Заранее благодарю.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 10.04.2015 06:22
var x = '#datetimepicker'
$(x).datetimepicker();
:-)
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Михаил
0 # Михаил 26.05.2015 09:05
Спасибо! Это лучший бесплатный datepicker, который я видел.
Только когда я выставляю русский язык, неделя все равно начинается в воскресенье.
Как это можно исправить?
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 26.05.2015 11:31
http://xdsoft.net/jqplugins/datetimepicker/#dayOfWeekStart
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Константин
0 # Константин 14.07.2015 15:31
Большое спасибо за плагин, очень понравился. Но у меня возник вопрос.
Мне необходимо организовать выбор промежутка между датами с выбором времени времени, такая возможность реализована в плагине, но как только я меняю формат даты эта возможность перестает работать, подскажите, пожалуйста как это можно реализовать?
На ум приходит, что это возможно через использование moment.js, я в правильном направлении мыслю?
Заранее благодарю!
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
php-coder
+2 # php-coder 22.09.2015 09:44
Отличный плагин. Подскажите, пожалуйста, как сделать так, чтобы он срабатывал и для динамически создаваемых полей? Во всплывашке появляется форма и в ней уже календарь не работает.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Kirich
0 # Kirich 19.11.2015 10:37
Можно ли добавить два таймпикера в один инпут? Или, ещё лучше, если время будет в виде интервала, вроде такого: "12:00 - 16:00"
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 20.11.2015 04:52
За 2$ автор сделал PeriodPicker http://xdsoft.net/jqplugins/periodpicker/ это то что вам нужно
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Kirich
0 # Kirich 24.11.2015 10:38
Этот плагин я смотрел. Похоже это не то, что нужно.
И он достаточно громоздкий.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
User
0 # User 02.12.2015 04:01
вот я идиот. все подключил по инструкции. при клике на поле календарь не всплывает. консоль браузера ошибок не выдает.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
User
0 # User 02.12.2015 04:19
все. заработало. не тот js подключал. в архиве куча барахла. спс за каледарь
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Лаэль
0 # Лаэль 17.12.2015 18:52
Здравствуйте, наверное, я что-то неправильно делаю, но у меня вместо календаря с datetimepicker отображается только оболочка, то есть стрелки в пустом окошке. Возможно вы знаете в чем проблема.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Lutsman
0 # Lutsman 25.03.2016 14: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
*/
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 27.03.2016 14:04
Написано же Date formatter utility. Плагин с недавних пор использует ее.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Mellon
0 # Mellon 31.05.2016 07:10
Ни у кого не было проблем с локализацией? lang: 'ru' у меня почему-то не работает. Как правильно прописать язык? У кого заработало?
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Lutsman
0 # Lutsman 31.05.2016 07: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)
});
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 31.05.2016 08:17
Это у вас ведь не datetimepicker
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Lutsman
0 # Lutsman 31.05.2016 08:50
Прошу, прощения. Вы правы, сначала ваш плагин поставил, но заказчик захотел другой и я сменил и забыл.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
nice
0 # nice 03.08.2016 17:40
Почему календарь начинается с воскресенья? неделя должна с понедельника начинаться
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
mkorolkov
0 # mkorolkov 25.05.2017 15:05
Здравствуйте плагин в самом деле интереснее всех что удалось найти.
Но подключенный к Bootstrap 3.3.1 всплывающее модальное не привязывается к элементу, а всплывает внизу страницы. Пока не удается победить натолкните на идею пожалуйста.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Leroy
0 # Leroy 25.05.2017 18:31
Ну вы хоть код приложите
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
mkorolkov
0 # mkorolkov 25.05.2017 18:42
Start:
















$(document).ready(function () {
$('#datepicker').datetimepicker({
format:'Y-m-dTH:i:sZ',
minDate:'-1970/01/01',
startDate:new Date(),
todayButton: true,
});
$('#calendar').click(function(){
$('#datepicker').datetimepicker('show');
});
});
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
mkorolkov
0 # mkorolkov 25.05.2017 18:45
Start:
















$(document).ready(function () {
$('#datepicker').datetimepicker({
format:'Y-m-dTH:i:sZ',
minDate:'-1970/01/01',//yesterday is minimum date(for today use 0 or -1970/01/01)
startDate:new Date(),
todayButton: true,
});
$('#calendar').click(function(){
$('#datepicker').datetimepicker('show');
});
});
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
mkorolkov
0 # mkorolkov 25.05.2017 18:47
Код: <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="control-group" style="margin-top: 100;">
<span for="start" class="col-sm-2 control-label" style="margin-top: 10; color:black">Start: </span>
<div class="col-sm-10">
<div class="input-group" >
<input type="text" id="datepicker" class="form-control" />
<div class="input-group-addon">
<span id="calendar" class="glyphicon glyphicon-calendar" role="button"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<script language="JavaScript" src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jquery.datetimepicker.full.min.js" type="text/javascript"></script>
<script language="JavaScript" src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datetimepicker({
format:'Y-m-dTH:i:sZ',
minDate:'-1970/01/01',//yesterday is minimum date(for today use 0 or -1970/01/01)
startDate:new Date(),
todayButton: true,
});
$('#calendar').click(function(){
$('#datepicker').datetimepicker('show');
});
});
</script>
</body>
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Ultra
0 # Ultra 13.06.2017 14:31
Подскажите пожалуйста. Дано 2 инпута. Как сделать,чтобы во второй инпут нельзя было вставить значение меньше первого?(т.е. настоить диапазон)
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
TopClans
+1 # TopClans 17.06.2017 13:26
На этой странице не работает ни один плагин.
У меня проблема: при включенном inline не отображается содержимое календаря, только элементы интерфейса: рамка, стрелки, кнопка "домой". Если нажать на стрелку календаря (переключить месяц), то всё загружается.
Что интересно: на этой странице: http://xdsoft.net/jqplugins/datetimepicker/ всё работает нормально, а у меня - нет. И даже во встроенном в архив примере тоже не работает.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
TopClans
0 # TopClans 17.06.2017 14:01
Решил обновлением календаря с задержкой в 1мс:
jQuery('#datetimepicker3').datetimepicker('reset');

Но вот русский язык всё равно не работает, хотя в JS файле он есть, в конфиге я его тоже выбрал.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
TopClans
0 # TopClans 21.06.2017 11:57
настраивается так:
$.datetimepicker.setLocale('ru');
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
pdgsmf79
0 # pdgsmf79 04.08.2017 10:17
Объясните, как такое может быть - в отдельной папке на сервере плагин работает. Переношу в корень - не работает?
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Алексей1
0 # Алексей1 13.10.2017 11:06
Не пойму, как с него получать значения?
alert($('#datetimepicker').value); выдает какую то хрень.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Алексей1
0 # Алексей1 13.10.2017 12:12
с получением данных от датапикера разобрался

пример кода:


$('#datetimepicker').datetimepicker({
lang:'ru',
allowTimes:['00:00','04:00','12:00','15:00','18:00','23:59'],
minDate:'2016/01/01',
dayOfWeekStart:1,
});
$.datetimepicker.setLocale('ru');

timeis
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Алексей1
0 # Алексей1 13.10.2017 12:14
$('#datetimepicker').datetimepicker({
lang:'ru',
allowTimes:['00:00','04:00','12:00','15:00','18:00','23:59'],
minDate:'2016/01/01',
dayOfWeekStart:1,
});
$.datetimepicker.setLocale('ru');

timeis
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Алексей1
0 # Алексей1 13.10.2017 12:16
мда...
не могу вставить код, он интерпретируется серваком
а если так:
< input type="text" id="datetimepicker"/ >
< sscript >
$('#datetimepicker').datetimepicker({
lang:'ru',
allowTimes:['00:00','04:00','12:00','15:00','18:00','23:59'],
minDate:'2016/01/01',
dayOfWeekStart:1,
});
$.datetimepicker.setLocale('ru');
< /sscript >

< bbutton onclick="javascript: alert( date = $('#datetimepicker').val() );">timeis
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Алексей1
0 # Алексей1 13.10.2017 12:18
Воо!
Код:<input type="text" id="datetimepicker"/> <script> $('#datetimepicker').datetimepicker({ lang:'ru', allowTimes:['00:00','04:00','12:00','15:00','18:00','23:59'], minDate:'2016/01/01', dayOfWeekStart:1, }); $.datetimepicker.setLocale('ru'); </script> <button onclick="javascript: alert( date = $('#datetimepicker').val() );">timeis</button>
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
www
0 # www 29.03.2018 06:13
почему выбор времени сделан неудобно?
как выбрать отдельно минуты и часы
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Евгений А
0 # Евгений А 15.04.2018 06:07
При inline:true невозможно задать выбранную дату. Точнее, дата-то задается, да вот в календарике выбран все-равно текущий день.
Сегодня 15.04.2018. Ставлю $('#datetimepicker').val('16.04.2018'); получаю document.getElementById('datetimepicker').value - все верно. 16.04.2018, а в календаре выбрано 15.04.2018.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору
Евгений А
0 # Евгений А 15.04.2018 10:42
Небольшое уточнение% если ставить свойство value=какая-нибудь дата, то при загрузке страницы она устанавливается нормально в календаре.
При установке даты динамически она не меняется.
Ответить | Ответить с цитатой | Цитировать | Сообщить модератору