Выбор даты (jQuery DatePicker плагин — Pickadate)

Здравствуйте, уважаемые читатели XoZbloga! Сегодня на повестке дня плагин Pickadate, организующий на сайте календарь для выбора даты. Плюс это плагина в его размере всего 9кб и возможности настраивать календарик. Данный плагин вполне может составить конкуренцию дата пикеру из jQuery UI. Итак, давайте познакомимся с ним поближе.



jQuery DatePicker плагин - Pickadate

Использование

HTML разметка

Очевидно, что для работы плагина потребуется библиотека jQuery, но помимо этого необходим файл со стилями pickadate.css и все. Обработку подцепляем к элементу input с типом date или text:

1
<input id="datepicker" class="datepicker" type="date">

Метод .pickadate

Поле для даты есть, теперь применяем к элементу с классом datepicker метод .pickadate.

1
$('.datepicker').pickadate();

Это простейший способ, без использования параметров. Следующий код использован на Демо странице:

1
2
3
4
5
6
7
8
9
    $('.datepicker').pickadate({
      monthsFull: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь' ],
      monthsShort: [ 'Янв', 'Февр', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек' ],
      weekdaysFull: [ 'Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота' ],
      weekdaysShort: [ 'Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб' ],
     
      format: 'dd mmmm, yyyy',
      firstDay: 1
   });

Здесь я изменил названия месяцев и дней недели, так сказать русифицировал. To не мало важным является то, что первый день недели понедельник, а не воскресенье.

Параметры

Все параметры (Начиная с пятого параметра значение по умолчанию):

Параметр Описание Значение
monthsFull Полное название месяцев [‘Январь’, ‘Февраль’, ‘Март’, ‘Апрель’, ‘Май’, ‘Июнь’, ‘Июль’, ‘Август’, ‘Сентябрь’, ‘Октябрь’, ‘Ноябрь’, ‘Декабрь’ ]
monthsShort Короткие названия месяцев [‘Янв’, ‘Февр’, ‘Март’, ‘Апр’, ‘Май’, ‘Июнь’, ‘Июль’, ‘Авг’, ‘Сент’, ‘Окт’, ‘Нояб’, ‘Дек’]
weekdaysFull Полное название дней недели [‘Воскресенье’, ‘Понедельник’, ‘Вторник’, ‘Среда’, ‘Четверг’, ‘Пятница’, ‘Суббота’]
weekdaysShort Сокращенное название дней недели [‘Вс’, ‘Пн’, ‘Вт’, ‘Ср’, ‘Чт’, ‘Пт’, ‘Сб’]
monthPrev Стрелочка влево
1
'&#9664;'
monthNext Стрелочка вправо
1
'&#9654;'
showMonthsFull Показывать полные названия месяцев true
showWeekdaysShort Показывать короткие названия дней недели true
format Форматы видимой даты ‘d mmmm, yyyy’
formatSubmit Формат передаваемой даты false (или например ‘yyyy-mm-dd’)
hiddenSuffix Префикс атрибута name в скрытом поле, значение которого это передаваемая дата ‘_submit’
firstDay Первый день недели 0 — Воскресенье, 1 — Понедельник
monthSelector Выпадающий список для месяцев false
yearSelector Выпадающий список для годов false (или четное число — количество годов не считая текущего)
dateMin Минимальная допустимая для выбора дата false (true — крайняя дата сегодня) (указывается число, -8 например, отсчитывает назад 8 дней) (конкретная дата [2012, 10, 15])
dateMax Максимальная допустимая дата для выбора false (true — крайняя дата сегодня) (указывается число, 8 например, отсчитывает вперед 8 дней) (конкретная дата [2012, 12, 15])
datesDisabled Массив с датами, которые нужно отключить false (true) (массив [[2012, 12, 2],[ 2012, 12, 5]]) (или комбинация [true 1,3,0] — значит доступны для выбора только понедельник, среда и воскресенье. Если убрать true наоборот, доступно все кроме понедельника, среды и воскресенья)
disablePicker Стандартный датапикер для браузера false (или true, но тип поля должен быть только date)
onOpen Событие при открытии календаря null (или function() {})
onClose Событие при закрытии календаря null (или function() {})
onStart Событие при загрузке страницы null (или function() {})
onSelect Событие при выборе даты страницы null (или function() {})
onChangeMonth Событие при смене месяца null (или function() {})

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

И последнее, также доступны методы:

Метод Описание
open Открыть календарь
close Закрыть календарь
show Показать в открытом календаре указанный месяц и год
getDate Получить выбранную дату
setDate Установить дату

Использование методов

Пользоваться методами можно следующим образом. Допустим мы хотим установить дату 14 февраля 2020 года, а показать на календаре октябрь 2015.

1
2
3
4
5
// Получаем календарь
var input = $('.datepicker').pickadate();
var calendar = input.data( 'pickadate' );
// Устанавливаем дату, страничку в календаре и сразу метод открыть
calendar.setDate(2020, 2, 14).show(10, 2015).open();

P.S.: Несмотря на то что уже вышла Windows 10 многие пользователи не спешат переходить на эту версию операционной системы от Microsoft. Пройдет немало времени прежде, чем она будет доведена до ума, поэтому если необходимо приобрести ОС — советую стабильную и проверенную годами windows 7 профессиональную. В этом магазине вы также можете найти множество других программных продуктов, персональных компьютеров для различных задач и серверов по доступным ценам.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!


Lingualeo