Выбор jQuery Datepicker плагина
В очередном проекте столкнулся с выбором оптимального jQuery datepicker плагина.
Смотрел в первую очередь на jQuery UI Datepicker, но не устроил размер библиотеки, даже если использовать не все компоненты. Несомненно, jQuery UI удобен, когда в проекте используются несколько его возможностей, но в данном случае мне был необходим только datepicker.
Основные критерии были такими:
- Небольшой размер плагина
- Возможность простой локализации на разные языки
- Настройка вывода первого дня недели (многие зарубежные плагины начинают день недели с воскресенья и лишь немногие способны этот параметр настраивать)
- Легкая настройка стилей через css
- Удобный интерфейс выбора даты (бывало встречались datepicker’ы, в которых менялся год пошагово и если надо было переместиться с 2012 до 1912, то надо было бы кликнуть 100 раз по стрелке перелистывания)
Подобных плагинов много, но все они имеют какие-либо недостатки. В итоге выбор пал на will_pickdate
Данный плагин удовлетворил всем требованиям, описанным выше.Удобен в настройке, есть много параметров, переводится на другие языки в один миг с помощью простой передачи параметра с массивом. Размер библиотеки ~20кбайт. Есть и менее «весомые» аналоги, но у них не достаточно гибкие настройки. Плюс в плагине можно еще делать выбор времени.
Внешний вид (стандартные стили изменены на более спокойные цвета):
Как видно с картинок — у нас есть удобный выбор по месяцам и годам, где можно кликнуть по нужному в одно действие. Выбор времени настраивается на 12/24 часовой вариант времени.
Теперь более подробно о возможностях.
Для установки плагина достаточно внедрить на страницу библиотеку jQuery, jquery.mousewheel (прилагается в архиве к пикеру), сам скрипт и стили, а затем инициализировать вызов пикера на нужном элементе
1 2 3 | $(name_of_element).will_pickdate({ timePicker: true }); |
Пример кода взят с официальной страницы. 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 | Элемент, который будет активировать плагин при нажатии на него |
1 2 3 4 5 6 7 8 9 | var tdy = new Date(); tdy.setDate(tdy.getDate() - 1); $('input#test').datepicker({ minDate:{ date:tdy.getDate() + '-' + tdy.getMonth() + '-' + tdy.getFullYear(), format:'d-m-Y' } }); |
Параметром date мы передаем значение дат, а format — формат переданной даты.
В данном случае мне понадобилось запретить все даты, предшествующие сегодняшнему дню. Я создал экземпляр Date и сделал сдвиг на 1 день назад. Затем передал все это плагину. Может есть более красивое решение?
Плагин конечно же поддерживает события — onShow, onClose, onSelect. Их назначение, думаю, понятно из названия и передаются они через параметры, при инициализации.
Комментарии к Выбор jQuery Datepicker плагина (2)
Вячеслав
Можно ли как-то плагину передать массив дней, которые можно выбирать?
Т.е. у меня есть, например, 10 дней (не обязательно подряд), я хочу чтобы из календаря можно было выбрать только любой из этих 10 дней.
Это можно сделать?
Delfi Post author
Вячеслав, на сколько понимаю, в данном плагине невозможно такое сделать стандартным функционалом. В принципе не встречал пикеров, где можно ограничить выбор определенными днями.
Как вариант, чтобы не лезть в исходный код, можно повесить функцию на событие открытия пикера и через нее просто выделить дни, которые можно выделять.