Самый удобный DateTimePicker

Home Форумы Программирование Самый удобный DateTimePicker

В этой теме 0 ответов, 1 участник, последнее обновление  bo3gyx 7 мес. назад.

Просмотр 1 сообщения - с 1 по 1 (всего 1)
  • Автор
    Сообщения
  • #239

    bo3gyx
    Хранитель

      Почему он лучше, чем стандартный 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

      Оригинал: https://xdan.ru/samij-udobnij-datetimepicker.html
    Просмотр 1 сообщения - с 1 по 1 (всего 1)

    Для ответа в этой теме необходимо авторизоваться.