Calendar

Компонент для выбора даты и времени, поддерживает различные режимы работы, настройку ограничений по датам и локализацию.

Загружается...

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

Данный компонент представляет собой непосредственно календарь, который необходимо встраивать в нужные части вашего приложения.

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

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

Режим работы

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

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

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

Выбор времени

Для включения выбора времени используйте свойство enableTime.

Загружается...

Часовые пояса

Компонент поддерживает работу с часовыми поясами через свойство timezone (принимает сроку в IANA ↗). При указании часового пояса все даты автоматически конвертируются в указанный часовой пояс.

Локализация

Компонент поддерживает настройку текстов через changeDayLabel, changeHoursLabel и остальные *Label свойства.

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

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

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

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

Свойство	Описание
`changeDayLabel`	`string` Deprecated: Будет удалeно в VKUI v8. Использовалось для задания aria-label для контейнера дней в календаре. Теперь этот контейнер является таблицей (с помощью role=“grid”) и в aria-label рендерится текущий открытый в календаре месяц и год. По умолчанию: `-`
`changeHoursLabel`	`string` Текст выпадающего списка с выбором часов. Делает его доступным для ассистивных технологий. По умолчанию: `Изменить час`
`changeMinutesLabel`	`string` Текст выпадающего списка с выбором минут. Делает его доступным для ассистивных технологий. По умолчанию: `Изменить минуту`
`changeMonthLabel`	`string` `aria-label` для селектора месяца. По умолчанию: `Изменить месяц`
`changeYearLabel`	`string` `aria-label` для селектора года. По умолчанию: `Изменить год`
`dayProps`	`CalendarDayElementProps` Дополнительные свойства для элементов дней. По умолчанию: `-`
`dayTestId`	`string \| ((day: Date) => string)` Передает атрибут `data-testid` для дня в календаре. По умолчанию: `-`
`defaultValue`	`Date \| null` Начальная дата при монтировании. По умолчанию: `-`
`disableFuture`	`boolean` Запрещает выбор даты в будущем. Применяется, если не задано `shouldDisableDate`. По умолчанию: `-`
`disablePast`	`boolean` Запрещает выбор даты в прошлом. Применяется, если не заданы `shouldDisableDate` и `disableFuture`. По умолчанию: `-`
`disablePickers`	`boolean` Отключает селекторы выбора месяца/года. По умолчанию: `-`
`DoneButton`	`ComponentType<ButtonProps>` Кастомное отображение кнопки `"Done"`. По умолчанию: `-`
`doneButtonDisabled`	`boolean` Блокировка взаимодействия с кнопкой “Done”. По умолчанию: `-`
`doneButtonShow`	`boolean` Управление отображением кнопки `"Done"`. По умолчанию: `-`
`doneButtonTestId`	`string` Передает атрибут `data-testid` для кнопки “Готово” в календаре. По умолчанию: `-`
`doneButtonText`	`string` Текст отображаемый в кнопке `"Done"`. По умолчанию: `-`
`enableTime`	`boolean` Включает выбор времени. По умолчанию: `false`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`hoursTestId`	`string` Передает атрибут `data-testid` для дропдауна выбора часа в календаре. По умолчанию: `-`
`listenDayChangesForUpdate`	`boolean` Следить за изменениями дней для обновления UI. По умолчанию: `-`
`maxDateTime`	`Date` Максимальные дата и время, которые можно выбрать. Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`. По умолчанию: `-`
`minDateTime`	`Date` Минимальные дата и время, которые можно выбрать. Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`. По умолчанию: `-`
`minutesTestId`	`string` Передает атрибут `data-testid` для дропдауна выбора минут в календаре. По умолчанию: `-`
`monthDropdownTestId`	`string \| ((monthIndex: number) => string)` Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря. По умолчанию: `-`
`nextMonthButtonTestId`	`string` Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря. По умолчанию: `-`
`nextMonthIcon`	`ReactNode` Кастомная иконка для кнопки следующего месяца. По умолчанию: `-`
`nextMonthLabel`	`string` `aria-label` для кнопки следующего месяца. По умолчанию: `Следующий месяц`
`nextMonthProps`	`ArrowMonthProps` Дополнительные свойства для кнопки следующего месяца. По умолчанию: `-`
`onChange`	`((value?: Date) => void) \| undefined` Обработчик изменения выбранной даты. По умолчанию: `-`
`onDoneButtonClick`	`(() => void)` Обработки нажатия на кнопку `"Done"`. По умолчанию: `-`
`onHeaderChange`	`((value: Date) => void)` Обработчик изменения даты в шапке календаря. По умолчанию: `-`
`onNextMonth`	`(() => void)` Нажатие на кнопку переключения на следующий месяц. По умолчанию: `-`
`onPrevMonth`	`(() => void)` Нажатие на кнопку переключения на предыдущий месяц. По умолчанию: `-`
`prevMonthButtonTestId`	`string` Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря. По умолчанию: `-`
`prevMonthIcon`	`ReactNode` Кастомная иконка для кнопки предыдущего месяца. По умолчанию: `-`
`prevMonthLabel`	`string` `aria-label` для кнопки предыдущего месяца. По умолчанию: `Предыдущий месяц`
`prevMonthProps`	`ArrowMonthProps` Дополнительные свойства для кнопки предыдущего месяца. По умолчанию: `-`
`renderDayContent`	`((day: Date) => ReactNode)` Кастомизация отображения содержимого дня. По умолчанию: `-`
`shouldDisableDate`	`((value: Date) => boolean)` Функция для проверки запрета выбора даты. По умолчанию: `-`
`showNeighboringMonth`	`boolean` Показывать дни соседних месяцев. По умолчанию: `-`
`size`	`"s" \| "m"` Размер календаря. По умолчанию: `m`
`timezone`	`string` Часовой пояс для отображения даты. По умолчанию: `-`
`value`	`Date \| null` Текущая выбранная дата. По умолчанию: `-`
`viewDate`	`Date` Дата отображаемого месяца. При использовании обновление даты должно происходить вне компонента. По умолчанию: `-`
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` День недели, с которого начинается неделя. По умолчанию: `1`
`yearDropdownTestId`	`string \| ((year: number) => string)` Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря. По умолчанию: `-`

WriteBar

CalendarRange