До появления HTML 5 в разметке отсутствовали поля ввода с типами для выбора даты и времени. С появлением этой спецификации, положение немного улучшилось и таковые были добавлены, но не всеми браузерами, а их поддержка оставляла желать лучшего.
И конечно добавленные браузерами типы полей input не позволяли производить стилизацию появляющихся селекторов.
Мы решили добавить этот компонент, чтобы решить все эти проблемы
Разметка
<input type="text" class="input" data-datepicker>
Атрибуты
При инициализации через атрибуты, триггером является атрибут data-datepicker.
data-datepicker
Без указания значения включает селектор даты и времени. Может принимать в качестве значений date и time, каждое из которых включает только соответствующий селектор.
Для прямой работы через javascript, необходимо создать экземпляр класса PipUI.Datepicker.
Инициализация
Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object
Первый параметр - объект или селектор формы ввода.
Второй параметр - объект опций
<input type="text" class="input" id="datepicker">
<script>
let datepicker = new PipUI.Datepicker("#datepicker");
</script>
Опции
// Выводить в консоль отладку
debug: false
// Класс, присваиваемый модальному окну при открытии
showedClass: 'datepicker-active'
// Разрешить выбор даты
date: true
// Разрешить выбор времени
time: true
// Разрешить выбор года
year: true
// Разрешить выбор месяца
month: true
// Разрешить выбор дня
day: true
// Разрешить выбор часа
hours: true
// Разрешить выбор минуты
minutes: true
// Разрешить выбор секунды
seconds: true
// Функция обратного вызова, срабатываемая при изменении даты
changeCallback: undefined
// Функция обратного вызова, срабатываемая при обновлении содержимого селектора
updateCallback: undefined
// Функция обратного вызова, срабатываемая при отображении селектора
showCallback: undefined
// Функция обратного вызова, срабатываемая при скрытии селектора
hideCallback: undefined
// Формат обрабатываемой даты и времени
format: 'd.m.Y H:i:s'
// Функция форматирования даты и времени
formating: (date, self) => ...,
// Функция парсинга даты и времени
parse: (str, self) => ...
// Настройки шаблонов
templates: {
// Основной контейнер модального окна селектора
container: '...'
// Враппер модального окна
wrapper: '...'
// Контейнер вкладок модального окна
tabs: '...'
// Вкладка селектора даты
date: {
// Враппер селектора даты
wrapper: '...'
// Селектор выбора года
year: '...'
// Селектор выбора месяца
month: '...'
// Селектор выбора недели
week: '...'
// Селектор выбора дня
day: '...'
}
// Вкладка селектора времени
time: {
// Враппер селектора времени
wrapper: '...'
// Визуальные селекторы
visual: {
// Часы
hours: '...'
// Минуты
minutes: '...'
// Секунды
seconds: '...'
}
// Формы ввода
inputs: {
// Часы
hours: '...'
// Минуты
minutes: '...'
// Секунды
seconds: '...'
}
// Разделитель
separator: '...'
}
// Подвал модального окна
footer: {
// Враппер подвала
wrapper: '...'
// Кнопка отмены
cancel: '...'
// Кнопка далее
next: '...'
// Кнопка предыдущего селектора
prev: '...'
// Кнопка завершения
done: '...'
}
}
Методы
let datepicker = new PipUI.Datepicker('#datepicker');
datepicker.getID() // Вернет уникальный идентификатор селектора
datepicker.setOptions(object) // Изменить опции селектора
datepicker.getOptions() // Получить опции селектора
datepicker.setActiveDate() // Изменить вкладку на селектор даты
datepicker.setActiveTime() // Изменить вкладку на селектор времени
datepicker.show(callback) // Открыть модальное окно селектора
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
datepicker.hide(callback) // Закрыть модальное окно селектора
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
datepicker.updateValue(callback) // Обновить значение в форме ввода
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
datepicker.setDay(day) // Установить день на указанный
datepicker.setYear(year) // Установить год на указанный
datepicker.setMonth(month) // Установить месяц на указанный
datepicker.nextYear() // Переключить на следующий год
datepicker.prevYear() // Переключить на предыдущий год
datepicker.setHours(hours) // Установить час на указанный
datepicker.setMinutes(minutes) // Установить минуту на указанную
datepicker.setSeconds(seconds) // Установить секунду на указанную
datepicker.getValue() // Получить текущее значение
datepicker.update(callback) // Обновить селектор даты
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
События
Триггер
Описание
Инициатор
show-datepicker-pipui
Срабатывает при отображении модального окна селектора