Селекторы даты и времени

Общая информация

До появления HTML 5 в разметке отсутствовали поля ввода с типами для выбора даты и времени. С появлением этой спецификации, положение немного улучшилось и таковые были добавлены, но не всеми браузерами, а их поддержка оставляла желать лучшего. И конечно добавленные браузерами типы полей input не позволяли производить стилизацию появляющихся селекторов.

Мы решили добавить этот компонент, чтобы решить все эти проблемы

Разметка

<input type="text" class="input" data-datepicker>

Пример работы кода выше

Атрибуты

При инициализации через атрибуты, триггером является атрибут data-datepicker.

data-datepicker

Без указания значения включает селектор даты и времени. Может принимать в качестве значений date и time, каждое из которых включает только соответствующий селектор.

data-datepicker-format

Формат входящей/исходящей даты. Формируется компонентом Date.

Javascript

Для прямой работы через 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	Срабатывает при отображении модального окна селектора	[data-datepicker]
hide-datepicker-pipui	Срабатывает при скрытии модального окна селектора	[data-datepicker]
change-datepicker-pipui	Срабатывает при изменении даты или времени	[data-datepicker]
update-datepicker-pipui	Срабатывает при обновлении селектора	[data-datepicker]