DatePicker

Компонент DatePicker — это выбор даты на основе библиотеки Flatpickr. Поддерживает два режима отображения: стандартный (поле ввода с выпадающим календарём) и встроенный календарь (isCalendar).

Обзор

Основное назначение: выбор одной даты, диапазона дат или нескольких дат.
Ключевые возможности:
- Два режима: поле ввода с иконкой или встроенный календарь.
- Поддержка всех опций Flatpickr через проп options.
- Иконка календаря в поле ввода (можно скрыть или заменить через слот).
- Реактивность на изменение modelValue и options.
- Поддержка v-model с типами String, Date, Array.
- Методы focus() и blur().

API компонента

Props

Проп	Тип	По умолчанию	Описание
`modelValue`	`String \| Date \| Array`		Значение даты (v-model). Тип зависит от режима Flatpickr.
`options`	`Object`	`{}`	Опции Flatpickr. Передаются напрямую в конструктор.
`isCalendar`	`Boolean`	`false`	Если `true`, календарь отображается встроенным (inline), без поля ввода.
`hasCalenderIcon`	`Boolean`	`true`	Показывать иконку календаря в поле ввода. Не работает в режиме `isCalendar`.
`className`	`String`		Дополнительные CSS-классы для корневого элемента.

События

Событие	Параметр	Описание
`update:modelValue`	`String \| Array`	Вызывается при изменении даты. В режиме `isCalendar` передаёт массив `dates`, иначе строку.

Методы

Метод	Описание
`focus()`	Устанавливает фокус на поле ввода.
`blur()`	Убирает фокус с поля ввода.

Слоты

Имя слота	Описание
`icon`	Кастомная иконка календаря. По умолчанию — SVG с иконкой календаря.

Настройка Flatpickr

Все опции Flatpickr передаются через проп options. Обработчик onChange можно передать как функцию или массив функций — он будет объединён с внутренним обработчиком.

Примеры опций

{
    mode: 'range',           // Выбор диапазона
    dateFormat: 'd.m.Y',     // Формат даты
    minDate: 'today',        // Минимальная дата
    maxDate: '2025-12-31',   // Максимальная дата
    enableTime: true,        // Выбор времени
    locale: 'ru',            // Локализация
}