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

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

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

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

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

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

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

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

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

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

Как видно с картинок — у нас есть удобный выбор по месяцам и годам, где можно кликнуть по нужному в одно действие. Выбор времени настраивается на 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’]
Название месяцев
dayShort2Количество символов, выводимых от названий дней недели. В русском варианте сложнее,
поэтому и использовал сокращенные названия в параметре days
monthShortАналогично предыдущему параметру, но только для названий месяцев
startDay0Первый день недели. Стандартно 0, но для нас ставим 1, чтобы понедельник был первым днем
timePickerfalseВыводить выбор времени
timePickerOnlyfalseВыводить только выбор времени, без даты
yearPickertrueВыводить список годов. Если выключить, то переключение между годами идет только стрелками влево/вправо
militaryTimefalseФормат времени. Если true, то 24 часовой
yearsPerPage20Количество выводимых вариантов годов на странице
format‘d-m-Y’Формат времени, показываемый пользователю
allowEmptyfalseВозможность оставить поле пустым. Если false и поле не заполнено, то прописывается сегодняшняя дата
inputOutputFormat‘U’Формат времени, который хзранится в БД или в другом хранилище. По уморчанию unix timestamp. Очень
удобно — в базе мы храним удобную для обработки дату, а пользователям выводим удобную для чтения
animationDuration400Продолжительность анимации
useFadeInOut!$.browser.msieЗапрет на анимацию fadeInOut для некоторых браузеров, по умолчанию для IE,
т.к. старые версии некорректно отображают данный тип анимации
startView‘month’ // { time, month, year, decades }Стандартный вывод плагина, т.е. что мы будем видеть при его активации
positionOffset{ x: 0, y: 0 }Сдвиг окна выбора даты по координатам x и y
minDatenullМинимально допустимая дата. Ниже расписано применение
maxDatenullМаксимально допустимая дата
debugfalseРежим отладки
toggleElementsnullЭлемент, который будет активировать плагин при нажатии на него

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

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

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