Components

DateTimePicker

Поле ввода даты, времени или даты со временем. Три типа: Date (DD.MM.YYYY), Time (HH:MM:SS), Date-Time. Два варианта лейбла: LabelOut (внешний) и LabelIn (плавающий). Ввод значения — прямо с клавиатуры; иконка справа открывает пикер.

Date — LabelOut

type=Date · h=40px · r=10px
Default
Hover
Active / Focus
Filled
Error
Некорректный формат (code: ERR-001)
Disabled

Time — LabelOut

type=Time · clock icon
Default
Active / Focus
Filled
Error
Некорректный формат (code: ERR-002)
Disabled

Date-Time — LabelOut

type=Date-Time · calendar icon
Default
Active / Focus
Filled
Error
Некорректные значения (code: ERR-003)
Disabled

LabelIn — Floating Label

labelVariant=In · h=48px · r=12px
Date
Default
DatePicker
Active (label floated)
DatePicker
Filled
DatePicker
Error
DatePicker
Некорректная дата (code: ERR-001)
Disabled
DatePicker
Time
Default
TimePicker
Active
TimePicker
Filled
TimePicker
Disabled
TimePicker
Date-Time
Default
Date-Time Picker
Active
Date-Time Picker
Filled
Date-Time Picker
Disabled
Date-Time Picker

Field Group

Label Left / Top + Caption
Label Left
Select date
Выберите дату транзакции
Label Top
Select date
Выберите дату транзакции

Правила использования

Когда · Чего избегать
Правила

Когда использовать

  • Точный выбор конкретной даты — день рождения, дата документа, дедлайн задачи
  • Дата со временем (Date-Time) — встречи, расписание, напоминания
  • Только время (Time) — точный выбор часа/минуты в составе формы
  • Фильтры и отчёты — выбор периода в админках и дашбордах
  • Когда полезен и ручной ввод с клавиатуры, и визуальный календарь
  • Label out — для многопольных форм, где важна ясность структуры
Чего избегать

Когда НЕ использовать

  • Приблизительные даты («где-то в июне») — используйте Select или текстовое поле
  • Только время без даты — используйте отдельный тип Time, не Date
  • Известное простое число (день месяца, год вручную) — используйте обычный Input
  • Точность до секунд там, где она избыточна для пользователя — усложняет ввод
  • Узкие колонки или мобильные без адаптации — календарь может выйти за пределы экрана
  • Label in в размере SM — не хватает высоты для лейбла и текста (используйте MD+)

Доступность

WCAG 2.2 AA · APCA · ARIA · Keyboard
ARIA

Разметка

  • Поле — role="combobox" (или role="textbox" при ручном вводе)
  • aria-label / aria-labelledby связывают поле с лейблом
  • aria-describedby указывает на caption с подсказкой или ошибкой
  • aria-required="true" для обязательных полей; aria-invalid="true" при ошибке
  • Календарь-поповер — role="dialog"; сетка дней — role="grid", ячейки — role="gridcell"
  • Каждая ячейка дня имеет aria-label с полной датой (например «27 мая 2026»)
Клавиатура

Навигация

  • Tab — фокус на поле; Shift+Tab — назад
  • Enter / Space — открыть календарь; повторно — закрыть
  • ↑ ↓ ← → — перемещение фокуса между днями
  • PageUp / PageDown — переключение месяцев
  • Esc — закрыть календарь без изменения значения
WCAG 2.2 AA · APCA

Контраст и размер

  • Контраст текста и иконок по APCA Lc (не WCAG ratios): body Lc≥60, UI-метки Lc≥45
  • Touch target ≥ 44×44px на мобильных — размеры LG / XL
  • SM на мобильных не применяется; Label in не поддерживает SM
  • Состояние ошибки — не только цвет: рамка + текст под полем с error code
  • Error messages: причина + следующее действие + (code: …) для support-correlation
Focus Ring

Фокус

  • Outline 2px, цвет --ds-info-800 (#5475F8)
  • Offset 1px — виден на любом фоне
  • Виден при навигации с клавиатуры (:focus-visible)
  • В открытом календаре фокус виден на сфокусированном дне
  • Скрывается при клике мышью — не мешает визуально

Работа с клавиатурой

Tab · Enter / Space · ↑ ↓ ← → · PageUp / PageDown · Esc
Клавиша
Действие
Tab
Переход фокуса на компонент. Shift + Tab возвращает фокус на предыдущий элемент. Компонент должен находиться в логическом порядке табуляции.
Enter Space
Открывают календарь. В открытом календаре — подтверждают выбор сфокусированной даты и закрывают его.
↑ ↓ ← →
Перемещают фокус между днями в сетке календаря.
PageUp PageDown
Переключают месяцы. Shift + PageUp / PageDown — переключают годы.
Home End
Home — на первый день месяца, End — на последний.
Esc
Закрывает календарь без изменения значения.

Дату можно вводить с клавиатуры в текстовое поле — маска автоматически расставляет разделители. Валидация выполняется по blur (потеря фокуса), а не в реальном времени, чтобы не отвлекать во время ввода.

State Explorer

Интерактивное переключение
DatePicker