Свойства

Prop	Type	Default	Описание
`value`	`{ start: Date \| null; end: Date \| null }`	—	Выбранное значение диапазона даты и времени
`onChange`	`(value: { start: Date \| null; end: Date \| null }) => void`	—	Обработчик, вызываемый при изменении значения
`time`	`TimeConfig`	—	Конфигурация панели времени (применяется к началу и концу диапазона)
`presets`	`DateRangePreset[]`	—	Предустановленные диапазоны дат
`maxDays`	`number`	—	Максимальное количество дней в диапазоне (включительно)
`minDays`	`number`	—	Минимальное количество дней в диапазоне (включительно)
`allowSingleDateInRange`	`boolean`	`true`	Разрешить диапазон, в котором начало совпадает с концом
`minDate`	`Date`	—	Минимальная дата для выбора
`maxDate`	`Date`	—	Максимальная дата для выбора
`locale`	`Partial<Locale>`	—	Пользовательская конфигурация локали
`initialMonth`	`Date`	—	Изначально отображаемый месяц
`size`	`"small" \| "medium" \| "large" \| "x-large"`	`"medium"`	Размер компонента
`weekStartsOn`	`WeekDay`	`"sunday"`	Первый день недели
`isDateUnavailable`	`(date: Date) => boolean`	—	Отметить даты как недоступные
`displayFormat`	`string`	—	Пользовательский формат отображения
`open`	`boolean`	—	Управляемое состояние открытия
`initialOpen`	`boolean`	—	Начальное состояние открытия (неуправляемое)
`onOpenChange`	`(open: boolean) => void`	—	Обработчик, вызываемый при изменении состояния открытия
`required`	`boolean`	`false`	Запретить очистку значения
`showOutsideDays`	`boolean`	`false`	Показывать дни из соседних месяцев
`highlightDates`	`Date[]`	—	Даты для подсветки
`shouldCloseOnSelect`	`boolean`	`false`	Автоматическое подтверждение при выборе предустановленного диапазона
`numberOfMonths`	`number`	`2`	Количество отображаемых месяцев
`captionLayout`	`"buttons" \| "dropdown"`	`"buttons"`	Стиль навигации в заголовке
`fromYear`	`number`	—	Начальный год для выпадающего списка
`toYear`	`number`	—	Конечный год для выпадающего списка
`disablePast`	`boolean`	`false`	Отключить даты до сегодняшнего дня
`disableFuture`	`boolean`	`false`	Отключить даты после сегодняшнего дня
`inline`	`boolean`	`false`	Показывать календарь встроенным (без всплывающего окна)
`name`	`string`	—	Имя скрытого поля для отправки формы (начальная дата и время)
`endName`	`string`	—	Имя скрытого поля для конечной даты и времени (по умолчанию `name-end`)
`placeholder`	`string`	—	Текст-заполнитель для триггера
`hideHeader`	`boolean`	`false`	Скрыть заголовок навигации
`hideFooter`	`boolean`	`false`	Скрыть футер с действиями

TimeConfig

interface TimeConfig {
  /** Точность отображения времени. По умолчанию "minute". */
  precision?: "hour" | "minute" | "second";
  /** 12-часовой или 24-часовой формат. По умолчанию "24". */
  hourFormat?: "12" | "24";
  /** Шаг приращения минут. По умолчанию 5. */
  minuteStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
  /** Шаг приращения секунд. По умолчанию 1. */
  secondStep?: 1 | 2 | 3 | 5 | 10 | 15 | 20 | 30;
  /** Высота (в пкс) каждого элемента колеса прокрутки. По умолчанию 32. */
  itemHeight?: number;
}

DateRangePreset

interface DateRangePreset {
  label: string;
  value: { start: Date; end: Date } | (() => { start: Date; end: Date });
}