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

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

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

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

### Разметка

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

{% embed url="<https://codepen.io/pipui/pen/JjmRYdx>" %}
Пример работы кода выше
{% endembed %}

## Атрибуты

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

### data-datepicker

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

### data-datepicker-format

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

## Javascript

Для прямой работы через javascript, необходимо создать экземпляр класса PipUI.Datepicker.

### Инициализация <a href="#init" id="init"></a>

Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object

Первый параметр - объект или селектор формы ввода.

Второй параметр - объект опций

```html
<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: '...'
	}

}
```

### Методы <a href="#methods" id="methods"></a>

```javascript
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] |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/date-time-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.