Перейти к содержимому
v2.5.0
English
Русский
Документация

DateField

DateField — составной компонент для ввода одной даты, который объединяет ввод с клавиатуры, необязательный выбор в календаре и ограничения на уровне поля в одном элементе управления.
StorybookИсходники

Подписи

DateField должен получать видимую подпись через окружающую строку поля или нижележащий input. Иконка-кнопка триггера не должна быть единственным источником имени.

Поведение клавиатуры

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
КлавишаДействие
EnterSpaceНа кнопке-триггере: открывает или закрывает всплывающий календарь. Фокус остаётся на кнопке.
TabС открытого триггера: переносит фокус во всплывающий календарь, на первую кнопку шапки.
EnterНа дне во всплывающем календаре: записывает день в поле. Календарь остаётся открытым; остальные клавиши календаря работают как в Calendar.
EscapeЗакрывает всплывающий календарь, не меняя дату, и возвращает фокус на кнопку-триггер.
Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.
  • Вводить можно, не открывая календарь. Внутри календаря навигация только перемещает фокус; значение меняется, только когда выбран день.
  • Ввод проверяется в календарной системе поля: одна цифра, с которой не может начинаться двузначный сегмент, дополняется нулём, полные сегменты ограничиваются (день — длиной месяца), а полное значение ограничивается min / max.

Поведение фокуса

  • Обычно фокус начинается в DateFieldInput.
  • После открытия календаря должно оставаться понятным, как вернуться к input.
  • Композицию оверлея внутри диалогов или шторок проверяйте на восстановление фокуса.

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

  • Ожидаемый формат даты должен сообщаться в подписи, подсказке или тексте ошибки.
  • Календарь должен быть вспомогательным, а не единственным способом понять значение.
  • Иконке-кнопке триггера всё равно нужна доступная подпись, например «Open calendar».

Семантика в формах

  • DateField ведёт себя как поле, потому что построен поверх семантики input из TextField.
  • Сообщения валидации должны быть привязаны к состоянию input, а не только к визуальным элементам календаря.

Риски доступности

  • Ожидаемый формат даты указан только в placeholder.
  • Иконка-кнопка триггера — единственное доступное описание элемента управления.
  • Календарь открывается внутри другого оверлея без совместной проверки фокуса и закрытия.