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 свойства.

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

<CalendarRange
  dayTestId={(day) => format(day, 'dd.MM.yyyy')}
  leftPartHeaderTestsData={{
    monthDropdownTestId: 'left-month-dropdown',
  }}
  rightPartHeaderTestsData={{
    monthDropdownTestId: 'right-month-dropdown',
  }}
/>

Компонент обеспечивает базовую доступность через:

  • корректную семантическую разметку;
  • поддержку клавиатурной навигации;
  • aria-атрибуты для всех интерактивных элементов.

При использовании компонента убедитесь, что все текстовые метки (changeMonthLabel, changeYearLabel и остальные *Label свойства) корректно описывают действия для пользователей скринридеров.

СвойствоОписание
changeDayLabelstring

Deprecated: Since 7.4.0.

Будет удалeно в VKUI v8. Использовалось для задания aria-label для контейнера дней в календаре. Теперь этот контейнер является таблицей (с помощью role=“grid”) и в aria-label рендерится текущий открытый в календаре месяц и год.

По умолчанию: -
changeMonthLabelstring

aria-label для селектора месяца.

По умолчанию: Изменить месяц
changeYearLabelstring

aria-label для селектора года.

По умолчанию: Изменить год
dayTestIdstring | ((day: Date) => string)

Передает атрибут data-testid для дня в календаре.

По умолчанию: -
defaultValueDateRangeType | null

Начальный промежуток при монтировании.

По умолчанию: -
disableFutureboolean

Запрещает выбор даты в будущем. Применяется, если не задано shouldDisableDate.

По умолчанию: -
disablePastboolean

Запрещает выбор даты в прошлом. Применяется, если не заданы shouldDisableDate и disableFuture.

По умолчанию: -
disablePickersboolean

Отключает селекторы выбора месяца/года.

По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
leftPartHeaderTestsDataCalendarHeaderTestsProps

Передает атрибуты data-testid для интерактивных элементов в заголовке календаря в левой части.

По умолчанию: -
listenDayChangesForUpdateboolean

Следить за изменениями дней для обновления UI.

По умолчанию: -
nextMonthIconReactNode

Кастомная иконка для кнопки следующего месяца.

По умолчанию: -
nextMonthLabelstring

aria-label для кнопки следующего месяца.

По умолчанию: Следующий месяц
onChange((value: DateRangeType) => void) | undefined

Обработчик изменения выбранного промежутка.

По умолчанию: -
onClose(() => void)

Deprecated: Свойство не используется.

По умолчанию: -
prevMonthIconReactNode

Кастомная иконка для кнопки предыдущего месяца.

По умолчанию: -
prevMonthLabelstring

aria-label для кнопки предыдущего месяца.

По умолчанию: Предыдущий месяц
renderDayContent((day: Date) => ReactNode)

Кастомизация отображения содержимого дня.

По умолчанию: -
rightPartHeaderTestsDataCalendarHeaderTestsProps

Передает атрибуты data-testid для интерактивных элементов в заголовке календаря в правой части.

По умолчанию: -
shouldDisableDate((value: Date) => boolean)

Функция для проверки запрета выбора даты.

По умолчанию: -
valueDateRangeType | null

Текущий выбранный промежуток.

По умолчанию: -
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 6

День недели, с которого начинается неделя.

По умолчанию: 1