Здравствуйте, уважаемые читатели XoZbloga! Сегодня на повестке дня плагин Pickadate, организующий на сайте календарь для выбора даты. Плюс это плагина в его размере всего 9кб и возможности настраивать календарик. Данный плагин вполне может составить конкуренцию дата пикеру из jQuery UI. Итак, давайте познакомимся с ним поближе.
Использование
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 | Стрелочка влево |
|
||
| monthNext | Стрелочка вправо |
|
||
| 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 профессиональную. В этом магазине вы также можете найти множество других программных продуктов, персональных компьютеров для различных задач и серверов по доступным ценам.
Источник статьи/урока: https://xozblog.ru