DateRangeInput

Применение компонента

Данный компонент представляет собой поле формы с возможностью вызова календаря.

Если вам нужен отдельный компонент календаря для выбора диапазона дат, то используйте CalendarRange.

Если вам нужно поле ввода одиночной даты и времени (со всплывающим календарём), то используйте DateInput.

Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.

Для использования неконтролируемого режима достаточно просто не передавать value или передавать defaultValue, если требуется задать значение по умолчанию. Для контролируемого режима используйте связку свойств value/onChange для задания значения и его изменения.

// Неконтролируемое состояние
<DateRangeInput defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]} accessible />;
 
// Контролируемое состояние
const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2, 10)]);
 
<DateRangeInput value={date} onChange={setDate} accessible />;

Состояния

disabled

Свойство disabled блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

Валидация

Свойство status используется для визуализации валидации компонента - некорректности заполненного поля (значение "error") или успешной валидации (значение "valid").

Тестирование (e2e)

Для тестирования компонента можно использовать следующие свойство определяющие data-testid атрибуты:

• calendarTestsProps
• startDateTestsProps
• endDateTestsProps
• showCalendarButtonTestId
• clearButtonTestId

Подробности смотри в Свойства и методы.

Доступность (a11y)

Компонент обеспечивает базовую доступность, но по умолчанию компонент всё ещё сложно использовать пользователям ассистивных технологий. Мы доработали компонент так, чтобы сделать его доступным, но это потребовало ломающих изменений в визуальном поведении компонента.

Новое, доступное поведение можно включить с помощью нового свойства accessible.

Вот список изменений которые отличают поведение со свойством accessible от поведения по умолчанию:

• иконка календаря видна постоянно (раньше она была видна, только если в DateRangeInput нет значения);
• календарь открывается только по клику по иконке календаря, по клику на поле ввода и нажатию клавиши <Space>, если DateRangeInput в фокусе (раньше он открывался сразу при фокусе на DateRangeInput);
• при открытии календарь получает фокус. При закрытии календаря фокус возвращается на DateRangeInput. Если нужно отключить это поведение, используйте свойство disableFocusTrap. Если нужно больше контроля над тем, куда возвращать фокус, используйте свойство restoreFocus.

Из-за особенности реализации DateRangeInput, если вкладывать его внутрь label, или связывать label и DateRangeInput через htmlFor, то по клику на label фокус будет попадать на DateRangeInput, но текст label скринридером зачитываться в момент фокуса не будет. Рекомендуем дублировать текст label в DateRangeInput, передавая в DateRangeInput текст через свойство aria-label.

<label>
  Период проживания
  <DateRangeInput aria-label="Период проживания" accessible />
</label>

<label htmlFor="date">Срок действия договора</label>
<DateRangeInput
  id="date"
  aria-label="Срок действия договора"
  accessible
/>

<FormItem top="Период бронирования" htmlFor="date">
  <DateRangeInput id="date" aria-label="Период бронирования" accessible />
</FormItem>

Интернационализация (i18n)

Формат дат и их перевод задаётся с помощью средств браузера Intl.DateTimeFormat ↗. Тем не менее компонент, в том числе и календарь, имеют большое количество внутренних интерактивных элементов, которые должны иметь описание. Особенно важно для доступности (a11y), так как большинство подписей зрячему пользователю не видны, но критически важны пользователям скринридеров.

Ниже приведён список свойств, которые стоит использовать, если требуется перевести компонент на другой язык. Полный список ищите в таблице свойств компонента ниже.

• changeDayLabel;
• changeMonthLabel;
• changeYearLabel;
• changeStartDayLabel;
• changeStartMonthLabel;
• changeStartYearLabel;
• changeEndDayLabel;
• changeEndMonthLabel;
• changeEndYearLabel;
• prevMonthLabel;
• nextMonthLabel;
• clearFieldLabel;
• showCalendarLabel;
• calendarLabel.

Свойства и методы