CalendarRange
Компонент для выбора диапазона дат, позволяет пользователю выбрать начальную и конечную даты в календаре. Компонент отображает два месяца одновременно для удобства выбора длинных диапазонов.
Применение компонента
Данный компонент представляет собой непосредственно календарь, который необходимо встраивать в нужные части вашего приложения.
Если вам нужно поле ввода даты и времени (со всплывающим календарём), то используйте компонент DateRangeInput
.
Если вам нужен компонент для выбора одиночной даты и времени, то используйте Calendar
.
Режим работы
Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.
Для использования неконтролируемого режима достаточно просто не передавать value
или передавать defaultValue
, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств value
/onChange
для задания значения и его изменения.
// Неконтролируемое состояние
<CalendarRange defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]} />;
// Контролируемое состояние
const [date, setDate] = React.useState([new Date(2024, 2, 1), new Date(2024, 2, 10)]);
<CalendarRange value={date} onChange={setDate} />;
Локализация
Компонент поддерживает настройку текстов через changeMonthLabel
, changeYearLabel
и остальные *Label
свойства.
Тестирование (e2e)
Для тестирования компонента доступны следующие data-атрибуты:
<CalendarRange
dayTestId={(day) => format(day, 'dd.MM.yyyy')}
leftPartHeaderTestsData={{
monthDropdownTestId: 'left-month-dropdown',
}}
rightPartHeaderTestsData={{
monthDropdownTestId: 'right-month-dropdown',
}}
/>
Доступность (a11y)
Компонент обеспечивает базовую доступность через:
- корректную семантическую разметку;
- поддержку клавиатурной навигации;
aria
-атрибуты для всех интерактивных элементов.
При использовании компонента убедитесь, что все текстовые метки
(changeMonthLabel
, changeYearLabel
и остальные *Label
свойства) корректно описывают действия для пользователей скринридеров.
Свойства и методы
Свойство | Описание |
---|---|
changeDayLabel | string Deprecated: Since 7.4.0. Будет удалeно в VKUI v8. Использовалось для задания aria-label для контейнера дней в календаре. Теперь этот контейнер является таблицей (с помощью role=“grid”) и в aria-label рендерится текущий открытый в календаре месяц и год. По умолчанию: - |
changeMonthLabel | string
По умолчанию: Изменить месяц |
changeYearLabel | string
По умолчанию: Изменить год |
dayTestId | string | ((day: Date) => string) Передает атрибут По умолчанию: - |
defaultValue | DateRangeType | null Начальный промежуток при монтировании. По умолчанию: - |
disableFuture | boolean Запрещает выбор даты в будущем.
Применяется, если не задано По умолчанию: - |
disablePast | boolean Запрещает выбор даты в прошлом.
Применяется, если не заданы По умолчанию: - |
disablePickers | boolean Отключает селекторы выбора месяца/года. По умолчанию: - |
getRootRef | Ref<HTMLDivElement> По умолчанию: - |
leftPartHeaderTestsData | CalendarHeaderTestsProps Передает атрибуты По умолчанию: - |
listenDayChangesForUpdate | boolean Следить за изменениями дней для обновления UI. По умолчанию: - |
nextMonthIcon | ReactNode Кастомная иконка для кнопки следующего месяца. По умолчанию: - |
nextMonthLabel | string
По умолчанию: Следующий месяц |
onChange | ((value: DateRangeType) => void) | undefined Обработчик изменения выбранного промежутка. По умолчанию: - |
onClose | (() => void) Deprecated: Свойство не используется. По умолчанию: - |
prevMonthIcon | ReactNode Кастомная иконка для кнопки предыдущего месяца. По умолчанию: - |
prevMonthLabel | string
По умолчанию: Предыдущий месяц |
renderDayContent | ((day: Date) => ReactNode) Кастомизация отображения содержимого дня. По умолчанию: - |
rightPartHeaderTestsData | CalendarHeaderTestsProps Передает атрибуты По умолчанию: - |
shouldDisableDate | ((value: Date) => boolean) Функция для проверки запрета выбора даты. По умолчанию: - |
value | DateRangeType | null Текущий выбранный промежуток. По умолчанию: - |
weekStartsOn | 0 | 1 | 2 | 3 | 4 | 5 | 6 День недели, с которого начинается неделя. По умолчанию: 1 |