Pickers

Набор элементов управления для выбора даты и времени.

DatePicker​

Live Editor

Result

TimePicker​

Live Editor

Result

Размеры​

Доступно три размера компонентов: l, s и xs.

Доступность​

DatePicker​

Добавьте значения атрибутам daysAriaLabel monthsAriaLabel и yearsAriaLabel для озвучивания компонента с помощью ScreenReader:

<DatePicker
daysAriaLabel="день"
monthsAriaLabel="месяц"
yearsAriaLabel="год"
/>

TimePicker​

По аналогии с DatePicker, добавьте значения атрибутам secondsAriaLabel minutesAriaLabel и hoursAriaLabel:

<TimePicker
secondsAriaLabel="секунды"
minutesAriaLabel="минуты"
hoursAriaLabel="часы"
/>

Управление с клавиатуры​

Компоненты DatePicker и TimePicker имеют возможность переключаться с помощью клавиш на клавиатуре:

  • ArrowUp - прокрутка назад;
  • ArrowDown - вперед;
  • PageUp - вернуться на 10 пунктов назад;
  • PageDown - на 10 пунктов вперед;
  • Home - переход к первому элементу;
  • End - к последнему элементу.

При этом, с активированным экранным считывающим устройством (screen reader), происходит объявление переключаемых опций.

Проблемы в Safari iOS 14.5 и ниже​

Для корректной работы необходимо выключить scroll-snap-align.

Для этого нужно использовать - disableScrollSnapAlign.

По-умолчанию значение для этого свойства - false.

Live Editor

Result