DatePicker
Нативний date/time-пікер у стилі полів бібліотеки — календар мовою пристрою.
Навмисно нативний: власний календар — це сотні рядків позиціонування, клавіатури й i18n, а пікер браузера вже вміє все це мовою пристрою. Компонент додає те, чого не дає сирий input: стилі полів бібліотеки, label/error/hint-контракт і токенізовану темну тему.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
size | FieldSize | "md" | Висота поля. На мобільному кожен розмір вищий за десктопний. |
label | string | undefined | Видимий лейбл. Пов'язується з полем автоматично. |
type | timedatedatetime-local | "date" | Рід поля. |
name | string | undefined | — |
placeholder | string | undefined | — |
error | string | undefined | Текст помилки. Сама його наявність вмикає стан помилки. |
hint | string | undefined | Підказка під полем. Ховається, коли показано помилку. |
min | string | undefined | Мінімальна дата/час у тому ж форматі. |
max | string | undefined | Максимальна дата/час. |
modelValue | string | — | Значення у форматі нативного поля: `YYYY-MM-DD` (для datetime — RFC). |
id | string | — | Стабільний DOM id. `name` використовується лише для форми. |
required | boolean | false | — |
disabled | boolean | false | — |
readonly | boolean | false | — |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: string] | Значення у форматі нативного поля або `null`, якщо очищено. |
focus | [event: FocusEvent] | Поле отримало фокус. |
blur | [event: FocusEvent] | Поле втратило фокус. |
Коли використовувати
Дати публікацій, періоди фільтрів, терміни. datetime-local — для
точних до хвилини (планувальники), time — для часу без дати.
Коли НЕ використовувати
Для діапазонів «від — до» потрібні два поля з перехресною валідацією min/max, а не один компонент.
Не підмінюйте нативний пікер власним календарем «заради однакового вигляду» — він ляже мовою пристрою, а не застосунку.
Доступність
Нативний пікер вже має повну клавіатурну навігацію і локаль. Поле має
label через for/id, aria-invalid і aria-describedby на
помилку/підказку — за контрактом полів бібліотеки.
Атрибути, що не є props (step, aria-label, data-*), ідуть на сам
<input>, а class і style — на обгортку.