Выбор jQuery Datepicker плагина

В очередном проекте столкнулся с выбором оптимального jQuery datepicker плагина.

Смотрел в первую очередь на jQuery UI Datepicker, но не устроил размер библиотеки, даже если использовать не все компоненты. Несомненно, jQuery UI удобен, когда в проекте используются несколько его возможностей, но в данном случае мне был необходим только datepicker.

Datepicker — вспомогательное окно для выбора даты/времени в поле ввода, либо в иные элементы страницы при соответствующей настройке. Удобен тем, что пользователям не надо задумываться о формате ввода даты и все визуально понятно и просто.

Основные критерии были такими:

  • Небольшой размер плагина
  • Возможность простой локализации на разные языки
  • Настройка вывода первого дня недели (многие зарубежные плагины начинают день недели с воскресенья и лишь немногие способны этот параметр настраивать)
  • Легкая настройка стилей через css
  • Удобный интерфейс выбора даты (бывало встречались datepicker’ы, в которых менялся год пошагово и если надо было переместиться с 2012 до 1912, то надо было бы кликнуть 100 раз по стрелке перелистывания)

Подобных плагинов много, но все они имеют какие-либо недостатки. В итоге выбор пал на will_pickdate

Данный плагин удовлетворил всем требованиям, описанным выше.Удобен в настройке, есть много параметров, переводится на другие языки в один миг с помощью простой передачи параметра с массивом. Размер библиотеки ~20кбайт. Есть и менее «весомые» аналоги, но у них не достаточно гибкие настройки. Плюс в плагине можно еще делать выбор времени.

Внешний вид (стандартные стили изменены на более спокойные цвета):

Как видно с картинок — у нас есть удобный выбор по месяцам и годам, где можно кликнуть по нужному в одно действие. Выбор времени настраивается на 12/24 часовой вариант времени.

Теперь более подробно о возможностях.

Для установки плагина достаточно внедрить на страницу библиотеку jQuery, jquery.mousewheel (прилагается в архиве к пикеру), сам скрипт и стили, а затем инициализировать вызов пикера на нужном элементе

Пример кода взят с официальной страницы. name_of_element — это селектор для поля ввода, на который мы хотим внедрить наш пикер.

Подробнее о параметрах:

Теперь немного а параметре minDate, maxDate. На вход принимается объект с двумя переменными date и format. Для большей ясности сначала пример кода:

Параметр Стандартный параметр Описание
pickerClass ‘wpd’ Основной класс контейнера. Можно менять для применения разных стилей.
days [‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’] Массив с названиями дней недели. Для русского варианта сделал просто — ПН, ВТ, СР…
months [‘January’, ‘February’, ‘March’, ‘April’, ‘May’,’June’, ‘July’, ‘August’, ‘September’, ‘October’,’November’,
‘December’]
Название месяцев
dayShort 2 Количество символов, выводимых от названий дней недели. В русском варианте сложнее,
поэтому и использовал сокращенные названия в параметре days
monthShort Аналогично предыдущему параметру, но только для названий месяцев
startDay 0 Первый день недели. Стандартно 0, но для нас ставим 1, чтобы понедельник был первым днем
timePicker false Выводить выбор времени
timePickerOnly false Выводить только выбор времени, без даты
yearPicker true Выводить список годов. Если выключить, то переключение между годами идет только стрелками влево/вправо
militaryTime false Формат времени. Если true, то 24 часовой
yearsPerPage 20 Количество выводимых вариантов годов на странице
format ‘d-m-Y’ Формат времени, показываемый пользователю
allowEmpty false Возможность оставить поле пустым. Если false и поле не заполнено, то прописывается сегодняшняя дата
inputOutputFormat ‘U’ Формат времени, который хзранится в БД или в другом хранилище. По уморчанию unix timestamp. Очень
удобно — в базе мы храним удобную для обработки дату, а пользователям выводим удобную для чтения
animationDuration 400 Продолжительность анимации
useFadeInOut !$.browser.msie Запрет на анимацию fadeInOut для некоторых браузеров, по умолчанию для IE,
т.к. старые версии некорректно отображают данный тип анимации
startView ‘month’ // { time, month, year, decades } Стандартный вывод плагина, т.е. что мы будем видеть при его активации
positionOffset { x: 0, y: 0 } Сдвиг окна выбора даты по координатам x и y
minDate null Минимально допустимая дата. Ниже расписано применение
maxDate null Максимально допустимая дата
debug false Режим отладки
toggleElements null Элемент, который будет активировать плагин при нажатии на него

Параметром date мы передаем значение дат, а format — формат переданной даты.

В данном случае мне понадобилось запретить все даты, предшествующие сегодняшнему дню. Я создал экземпляр Date и сделал сдвиг на 1 день назад. Затем передал все это плагину. Может есть более красивое решение?

Плагин конечно же поддерживает события — onShow, onClose, onSelect. Их назначение, думаю, понятно из названия и передаются они через параметры, при инициализации.


  • Можно ли как-то плагину передать массив дней, которые можно выбирать?
    Т.е. у меня есть, например, 10 дней (не обязательно подряд), я хочу чтобы из календаря можно было выбрать только любой из этих 10 дней.
    Это можно сделать?

    • Delfi

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