Calendar

Выбор одной даты

пнвтсрчтптсбвс

Ничего не выбрано

Диапазон дат

пнвтсрчтптсбвс

Диапазон не выбран

Со временем

пнвтсрчтптсбвс

Ничего не выбрано

Множественный выбор

пнвтсрчтптсбвс

Выбрано дат: 0

Режимы месяц и год

Кликните на заголовок «месяц год», чтобы перейти к выбору месяца, ещё раз — к выбору года.

пнвтсрчтптсбвс

Ограничение диапазона

пнвтсрчтптсбвс

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

Имя	Тип	По умолчанию	Описание
`modelValue`	`Date \| string \| null` (или массив в `multiple`, пара в `range`)	`null`	Выбранная дата.
`multiple`	`boolean`	`false`	Режим множественного выбора.
`range`	`boolean`	`false`	Режим выбора диапазона дат.
`withTime`	`boolean`	`false`	Показывает ввод времени.
`minDate`	`Date \| string`	`undefined`	Минимальная выбираемая дата.
`maxDate`	`Date \| string`	`undefined`	Максимальная выбираемая дата.
`locale`	`string`	`'ru'`	Локаль для заголовка и дней недели.

События

select — payload: выбранный объект Date. Срабатывает при выборе дня.
update:modelValue — payload: новое значение modelValue (для v-model).

Описание

Компонент C3Calendar — календарь для выбора даты, поддерживающий одиночный, множественный и диапазонный выбор, режимы «месяц»/«год», ввод времени и ограничение допустимого диапазона. Связывается через v-model свойством modelValue.

Клик по заголовку «месяц год» переключает режим выбора: день → месяц → год. Для диапазона первый клик задаёт начало, второй — конец, границы автоматически сортируются. При withTime выбранные даты дополняются указанным временем.

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

Дни недели начинаются с понедельника в зависимости от заданной locale.
Кнопки навигации «Назад»/«Вперёд» имеют aria-label; сетка дней размечена role="grid".
Даты вне допустимого диапазона отключаются (disabled) и не выбираются.
В режиме range без внешнего v-model диапазон хранится во внутреннем состоянии.
Ввод времени реализован через два <select> (часы и минуты) с обновлением выбранных дат.