Air datepicker не работает

Air Datepicker, легкий и красивый выбор даты

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

Результат работы можно посмотреть здесь: Air Datepicker.

Введение

Работая над последним проектом, возникла необходимость добавить в приложение календарь с возможностью выбрать конкретный месяц. Все популярные плагины такую возможность предоставляют, мой выбор остановился на Zebra Datepicker — маленький, функциональный, все здорово. Но некоторых вещей все же не хватало:

1. передача объектов Date() в параметры вместо строк
2. менее громоздкая разметка
3. гибкое позиционирование элемента
4. анимация при появлении

Сколько не приходилось работать с датой, почти всегда в исходных данных она хранилась в unix формате, и для меня остается загадкой, почему во многих плагинах при задании, к примеру, минимально возможной даты, нужно передавать строку: нужно получить дату, затем переделать ее в строку и уже потом передать плагину, вместо того, чтобы просто отдать new Date(time).

Что касается громоздкой разметки, то к ней добавляется еще и табличная верстка, к ячейкам которой без лишних проблем не добавить position: relative;.

Ну и напоследок все же хочется, чтобы была возможность добавить небольшую анимацию, а из-за того, что многие популярные календари используют метод .show(), который задействует свойство display, плавные переходы (transition) добавлять трудоемко.

Разработка

Календарь я разделил на три части:

При наступлении каких-либо событий в теле или навигации, они сообщают об этом основной части, и календарь обновляет свое состояние в соответствии с этими событиями.

В этой задаче мне помогли getter’ы и setter’ы. Например, при изменении месяца просто присваивается новая отображаемая дата с измененным номером месяца, и внутри геттера вызывается метод перерисовки тела и навигации календаря. Несмотря на то, что можно было бы обойтись и без них, мне данный подход представляется более красивым. К примеру, вот так выглядит метод перехода к следующему месяцу, году или декаде, в зависимости от текущего вида:

В свою очередь внутри геттера происходит вызов отрисовки элементов календаря (упрощенно):

Точно так же происходит переход на другой вид, очень просто:

Формирование разметки

Основа для календаря выглядит следующим образом:

Без таблиц и намека на них. Ячейка является простым

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

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

Вычисление общего количества дней в месяце

Чтобы сформировать корректный HTML, нужно знать сколько дней в месяце. Для этого используется небольшой трюк с передачей следующего месяца и нулевой даты (в Date() дата месяца начинается с единицы).

Формирование названий дней

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

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

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

Плюс он позволяет располагать элементы на равноудаленном расстоянии друг от друга всего одной строчкой:

Не нужно беспокоиться о разных значениях ширины, все будет рассчитываться автоматически.

Можно также упомянуть про кнопки «Сегодня» и «Очистить»:

Если их две, они занимают по 50% ото всей ширины, если одна, то она занимает всю ширину. Этого также можно достичь одной строкой:

Это означает, что элемент в случае необходимости может как увеличиваться в размерах, так и уменьшаться, но при этом размеры всех соседей будут одинаковые. Когда кнопка одна, она расширяется на всю ширину, когда две, они пропорционально уменьшаются и занимают по 50%, и т.д. Можно добавлять сколько угодно элементов, у всех них будут одинаковые размеры, и в сумме они будут занимать всю ширину родителя.

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

Позиционирование

Позиция элемента задается двумя значениям:

1. сторона, с которой будет появляться календарь
2. положение на этой стороне

Если нужно расположить календарь сверху справа, то значение будет выглядеть как:

Для того, чтобы добавить анимацию «подъезжания» к текстовому полю, я добавил вспомогательные классы, которые говорят с какой стороны нужно начинать анимацию. В данном случае этот класс выглядел бы как .-from-top-. За анимацию отвечают css transition и css transform. Это позволяет достичь плавности, а также добавлять кастомные переходы.

Что касается Date()

Как я упоминал вначале, мне не совсем понятны ситуации, когда вместо объекта даты нужно передавать строку. Возможно это удобно при автоматической инициализации, когда параметры нужно передавать через data атрибуты, но для меня все же удобнее просто передать new Date(). Тем более, что запись вида new Date(2015, 11, 17) не особо сложнее ‘2015-12-17’. Поэтому у меня во всех параметрах, где задается дата, необходимо передавать new Date().

Несколько слов об использовании

Мне нравится практика автоматической инициализации плагинов, поэтому для инициализации календаря к текстовому полю достаточно добавить класс ‘datepicker-here’ и все заработает.

Опции можно передать через data атрибуты.

Кастомизируемое содержимое ячейки

В Air Datepicker есть возможность полностью изменять содержимое ячеек. Это позволяет добавлять, например, названия событий или какой-то вспомогательный контент в ячейки. Для этого нужно использовать опцию onRenderCell():

Заключение

В итоге я могу сказать, что получил неплохой опыт, улучшил свои навыки работы с датой и написания документации. Календарь получился небольшим: всего 20kb (минифицированный js файл), но достаточно функциональным, по крайней мере для меня он свои задачи выполняет. Буду рад, если он или эта статья кому-нибудь поможет.

Источник

AIR DATEPICKER легкий кроссбраузерный jQuery календарь

Описание

36kb минифицированный js файл и

9kb gziped), кастомизируемый, кроссбраузерный календарь, написан с использованием es5 и css flexbox . Работает во всех современных браузерах: IE 10+, Chrome, Firefox, Safari 8+, Opera 17+.

Установка

Либо можно скачать файлы напрямую с GitHub

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

Подключите стили и скрипты из папки /dist :

Календарь автоматически проинициализируется на элементах с классом .datepicker-here , при этом опции можно передать через data атрибуты.

Ручная инициализация

Примеры

Инициализация с опциями по умолчанию

Выбор нескольких дат

Передайте параметр для выбора нескольких дат. Если требуется ограничить количество выбранных дат, то передайте необходимое число .

Постоянно видимый календарь

Проинициализируйте плагин на элементе, который не является текстовым полем, например на

Выбор месяца

Минимальная и максимальные даты

Чтобы ограничить выбор даты, используйте minDate и maxDate , которым нужно передать объект даты.

Диапозон дат

Используйте парамтер для выбора диапазона. В качестве разделителя дат будет использован multipleDatesSeparator

Для того, чтобы иметь возомжность выбрать одну и ту же дату, необходимо установить .

Неактивные дни недели

Для того, чтобы сделать невозмножным выбрать конкретные дни недели, можно воспользоваться методом onRenderCell .

Кастомное содержимое ячеек

Air Datepicker позволяет менять содержимое ячеек как угодно. Для этого можно также воспользоваться методом onRenderCell . Давайте добавим вспомогательные элементы к нескольким датам и покажем случайный текст при выборе этих дат:

Появление и скрытие календаря

Для добавления каких-либо действий с начала анимации или по ее окончанию, используйте опции onShow и onHide

Выбор времени

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

По умолчанию будет установлено текущее время на компьюетере пользователя, это значение можно изменять параметром startDate .

Подробнее о параметрах выбора времени можно почитать в Опциях.

Формат времени

Формат времени задается в объекте локализации, либо в парамтре timeFormat . По умолчанию используется 24-х часовой формат. Для выбора 12-ти часового формата в timeFormat нужно добавить символ aa или AA . После чего в виджете появятся обозочения ‘AM’ или ‘PM’, в зависимости от выбранного периода времени.

Действия со временем

Для задания максимально/минимально возможных значений часов или минут используйте параметры maxHours , minHours , maxMinutes , minMinutes . Также время можно указывать в парамтерах minDate и maxDate

Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.

Локализация

Вы можете добавить свою локализацию в объект $.fn.datepicker.language[«my-lang»] и при вызове календаря передать название языка в параметр language

Также объект локализации можно передавать непосредственно в language

Если в вашей локализации не будет хватать каких-то полей, то они будут взяты из языка по умолчанию (русский язык).

Пример объекта локализации

Опции

classes

Значение по умолчанию «»

Дополнительные классы для календаря.

inline

Значение по умолчанию false

Если true, то календарь будет виден постоянно.

language

Значение по умолчанию «ru»

Язык календаря. Если передается строка, то поиск языка будет осуществляться в объекте Datepicker.language Если передан объект, то данные будут браться из него.

Если в объекте локализации не будет хватать каких то полей, то они будут взяты из языка по умолчанию.

startDate

Значение по умолчанию new Date()

Дата, которая будет отображаться при инициализации календаря.

firstDay

Значение по умолчанию «»

Индекс дня, с которого начинается неделя. Возможные значение от 0 до 6, где 0 — воскресенье и 6 — суббота. По умолчанию берется из локализации, если значение передать сюда, то оно будет иметь больший приоритет.

weekends

Значение по умолчанию [6, 0]

Массив индексов дней, которые будут считаться выходными днями. Им будет добавлен класс .-weekend- . По умолчанию это суббота и воскресенье.

dateFormat

Значение по умолчанию «»

Желаемый формат даты, кобминация из d, m, yyyy, D, M, и т.д. По умолчанию берется из локализации, если передать значение сюда, то оно будет иметь больший приоритет.

• @ — время в миллесекундах
• d — дата
• dd — дата с лидирующем нулем
• D — сокращенное наименование дня
• DD — полное наименование дня
• m — номер мясяца
• mm — номер месяца с лидирующем нулем
• M — сокращенное наименовение месяца
• MM — полное наименовение месяца
• yy — сокращенный номер года
• yyyy — полный номер года
• yyyy1 — первый год декады, в которую входит текущий год
• yyyy2 — последний год декады, в которую входит текущий год

altField

Значение по умолчанию «»

Альтернативное поле воода в значение которого будут попадать выбранные даты с форматом altFieldDateFormat .

altFieldDateFormat

Значение по умолчанию «@»

Формат даты для альтернативного поля.

toggleSelected

Значение по умолчанию true

Если true, то клик на выделенной дате снимет выделение.

keyboardNav

Значение по умолчанию true

Если true, то по календарю можно будет осуществлять навигацию с помощью клавиатуры.

• Ctrl + → | ↑ — переход на месяц вперед
• Ctrl + ← | ↓ — переход на месяц назад
• Shift + → | ↑ — переход на год вперед
• Shift + ← | ↓ — переход на год назад
• Alt + → | ↑ — переход на 10 лет вперед
• Alt + ← | ↓ — переход на 10 лет назад
• Ctrl + Shift + ↑ — переход на следующий вид
• Esc — закрывает календарь

position

Значение по умолчанию «bottom left»

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

offset

Значение по умолчанию 12

Отступ от основной оси позиционирования.

Значение по умолчанию «days»

Начальный вид календаря. Возможноые значения:

• days — отображение дней месяца
• months — отображение месяцев одного года
• years — отображение годов одной декады

minView

Значение по умолчанию «days»

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

showOtherMonths

Значение по умолчанию true

Если true, то будут отображаться дни других месяцев.

selectOtherMonths

Значение по умолчанию true

Если true, то можно будет выбрать дни из других месяцев.

moveToOtherMonthsOnSelect

Значение по умолчанию true

Если true, то при выборе дней из других месяца, будет осуществялться переход к этому месяцу.

showOtherYears

Значение по умолчанию true

Если true, то при отображении декады, будут показаны годы из других декад.

selectOtherYears

Значение по умолчанию true

Если true, то можно будет выбрать года из других декад

moveToOtherYearsOnSelect

Значение по умолчанию true

Если true, то при выборе года из другой декады, будет осуществлен переход к этой декаде.

minDate

Значение по умолчанию «»

Минимальная дата для возможности выбора. Все даты, идущее до нее нельзя будет активировать.

maxDate

Значение по умолчанию «»

Максимальная дата для возможности выбора. Все даты, идущее после нее нельзя будет выбрать.

disableNavWhenOutOfRange

Значение по умолчанию true

Если true, то при наступлении даты, которая была бы меньше минимально возможной или больше максимально возможной, деактвировались бы кнопки навигации ‘вперед’, ‘назад’

multipleDates

Значение по умолчанию false

Если true, то можно будет выбрать неограниченное количество дат. Если передать число, то количество выбираемых дат будет ограниченно этим числом.

multipleDatesSeparator

Значение по умолчанию «,»

Разделитель дат, который будет использован при объеденения нескольких дат в одну строку.

range

Значение по умолчанию false

Если true, то будет включен режим выбора диапазона дат. В качестве разделителя будет использован multipleDatesSeparator

todayButton

Значение по умолчанию false

Если true, то будет отображена кнопка «Сегодня». Если передать объект даты, то при клике по кнопке будет осуществлен переход и последующий выбор этой даты.

clearButton

Значение по умолчанию false

Если true, то будет отображена кнопка «Очистить».

showEvent

Значение по умолчанию «focus»

Тип события, по наступлению которого будет показан календарь.

autoClose

Значение по умолчанию false

Если true, то при активации даты, календарь закроется.

prevHtml

Значение по умолчанию

Контент кнопки ‘предыдущий месяц|год|декада’.

nextHtml

Значение по умолчанию

Контент кнопки ‘следующий месяц|год|декада’.

navTitles

Значение по умолчанию

Значение заголовка календаря в зависимости от текущего вида, можно использовать те же обозначения что и в dateFormat . Недостающие поля будут взяты из значения по умолчанию. Также можно использовать html теги.

monthsField

Значение по умолчанию «monthsShort»

Какое поле из объекта локализации использовать в качестве названий месяцев, когда view = «months» .

timepicker

Значение по умолчанию false

Если true , то будет добавлена возомжность выбора времени.

dateTimeSeparator

Значение по умолчанию » «

Разделитель между датой и временем.

timeFormat

Значение по умолчанию null

Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет. Для включения 12-ти часового режима добавьте ‘aa’ или ‘AA’ в параметр timeFormat , например Возможные варианты:

• h — часы
• hh — часы, с лидирующим нулем
• i — минуты
• ii — минуты, с лидирующим нулем
• aa — период дня — ‘am’ или ‘pm’
• AA — период дня заглавными буквами

minHours

Значение по умолчанию 0

Минимальное значение часов от 0 до 23. Нельзя выбрать час меньше, чем переданное значение.

maxHours

Значение по умолчанию 23

Максимальное значение часов от 0 до 23. Нельзя выбрать час больше, чем переданное значение.

minMinutes

Значение по умолчанию 0

Минимальное значение часов от 0 до 59. Нельзя вустановить значение минут меньше, чем переданное значение.

maxMinutes

Значение по умолчанию 59

Максимальное значение минут от 0 до 59. Нельзя вустановить значение минут больше, чем переданное значение.

hoursStep

Значение по умолчанию 1

Шаг выбора часов.

minutesStep

Значение по умолчанию 1

Шаг выбора минут.

События

onSelect(formattedDate, date, inst)

Значение по умолчанию null

Функция обратного вызова при выборе даты.

• formattedDatestring — отформатированная дата.
• dateDate|array — объект Date выбранной даты, если , то будет передан массив таких объектов.
• instobject — экземпляр плагина.

onShow(inst, animationCompleted)

Значение по умолчанию null

Функция обратного вызова при появлении календаря.

• instObject — экземпляр календаря.
• animationCompletedboolean — индикатор состояния анимации. если false , то анимация только началась, если true — уже закончилась.

onHide(inst, animationCompleted)

Значение по умолчанию null

Функция обратного вызова при скрытии календаря.

• instObject — экземпляр календаря.
• animationCompletedboolean — индикатор состояния анимации. если false , то анимация только началась, если true — уже закончилась.

onChangeMonth(month, year)

Значение по умолчанию null

Функция обратного вызова при изменении месяца.

• monthnumber — номер месяца (от 0 до 12), к которому осуществлен переход.
• yearnumber — номер года, к которому осуществлен переход.

onChangeYear(year)

Значение по умолчанию null

Функция обратного вызова при изменении года.

• yearnumber — номер года, к которому осуществлен переход

onChangeDecade(decade)

Значение по умолчанию null

Функция обратного вызова при изменении декады.

• decadearray — массив, состоящий из номера года с которого начинается декада, и года на котором она заканчивается.

onChangeView(view)

Значение по умолчанию null

Функция обратного вызова при изменении вида календаря

• viewstring — вид, к которому осуществлен переход (days, months, years).

onRenderCell(date, cellType)

Значение по умолчанию null

Функция обратного вызова при отрисовке ячейки календаря.

• dateDate — объект даты текущей ячейки
• cellTypestring — тип текущей ячейки (day, month, year).

Функция должна возвращать объект, которой может состоять из трех полей:

Пример

Досутп к экземпляру плагина осуществляется через data атрибут.

Источник