DateRangePicker

Базовое использование

Значение: —

С временем

В подписи триггера появляется время начала и конца.

Ограничение по датам

Доступны только 15 дней назад и сегодня.

Ошибка и отключение

Входные параметры

Имя	Тип	По умолчанию	Описание
`modelValue`	`[Date \| string \| null, Date \| string \| null] \| null`	`null`	Выбранный диапазон `[начало, конец]` (через `v-model`).
`placeholder`	`string`	`'Выберите диапазон'`	Подсказка в триггере. Используется и как `aria-label` меню.
`presets`	`DateRangePreset[]`	`[]`	Пресеты быстрого выбора: `{ label, value }`. Показываются над календарём; выбор пресета сразу применяется и закрывает меню.
`withTime`	`boolean`	`false`	Добавить выбор часов и минут и показывать время в подписи триггера.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Размер поля. Высота триггера совпадает с остальными полями того же размера. Если не задан, берётся из `C3FormField`.
`locale`	`string`	`'ru'`	Локаль для названий месяцев и дней недели.
`minDate` / `maxDate`	`Date \| string`	`undefined`	Границы выбираемых дат.
`separator`	`string`	`'—'`	Разделитель между началом и концом в подписи триггера.
`disabled`	`boolean`	`false`	Отключает поле: меню не открывается.
`error`	`boolean`	`false`	Признак ошибки — красная рамка и `aria-invalid`. Наследуется из `C3FormField`, если не задан явно.
`name`	`string`	`undefined`	Имя поля. Принят для единообразия API, но в разметку не попадает: триггер — это `<button>`. Так же ведут себя `SelectMenu`, `Listbox`, `TreeSelect` и `ColorPicker`.

События

Имя	Аргументы	Когда срабатывает
`update:modelValue`	`range: [Date \| string \| null, Date \| string \| null]`	При выборе даты в календаре или применении пресета.
`select`	`range: [Date \| string \| null, Date \| string \| null]`	При применении готового диапазона (пресет или закрытие меню).

Описание

DateRangePicker выбирает период: два месяца рядом, подсветка диапазона между границами и подсчёт дней. Главное отличие от C3DatePicker с range — сразу два месяца, поэтому период не нужно выбирать через границу месяца: видны и месяц начала, и месяц конца.

Внутри используется C3Calendar с пропом monthsCount, поэтому подсветка диапазона, границы minDate/maxDate и режим времени работают ровно так же, как в отдельном календаре. Пресеты — обычные кнопки над календарём; значение пресета подставляется как есть, поэтому «Текущий месяц» можно посчитать один раз, а не описывать логику в разметке.

Меню не закрывается после выбора даты: сначала выбираются обе границы, затем кнопкой «Готово». Так случайный клик по календарю не теряет уже выбранный период.

Дополнительная информация

Под триггером показывается статистика: сколько дней и ночей в выбранном периоде. Пока границы не заданы, вместо цифр — подсказка, что выбрать дальше.
Частично выбранный период отображается как 05.01.2026 — …, чтобы было видно, что конец ещё не выбран.
Количество ночей равно числу дней минус один, поэтому диапазон в один день даёт «1 дн. · 0 ноч.».
Слотов нет: состояние целиком во внешнем v-model.
Клавиатура: Enter, Space и ArrowDown открывают меню, Escape закрывает и возвращает фокус на триггер.
Доступность: триггер — <button> с aria-haspopup="dialog" и aria-expanded, меню — role="dialog" с aria-label из placeholder.
Как и остальные поля формы, интегрируется с C3FormField: наследует size и error (приоритет у собственных пропов) и регистрирует значение для валидации.
Поповер телепортится в body, поэтому не обрезается родителями с overflow: hidden. За шириной отвечает C3Calendar: при двух месяцах он становится шире.
Проп monthsCount у C3Calendar принимает 1–3 месяца и сдвигает навигацию сразу на это число. Значения вне диапазона обрезаются.
В режиме месяцев и лет календарь, как и раньше, показывает по одному месяцу или году — monthsCount влияет только на сетку дней.