Если календарь нужен прямо на странице, без поля, — берите CdsDatePicker. Для одного только времени — CdsTimePicker, для выбора из готового списка — CdsSelect.

Анатомия

Поле собрано на CdsTextInput, поэтому лейбл, описание, сообщения, очистка и валидация работают так же. Иконка календаря занимает зону prepend-inner и открывает меню — как и клик по самому полю.

Storybook

Вариации

Значение и формат

Дата приходит в v-model строкой в формате mask. Placeholder по умолчанию показывает саму маску, так что подсказывать формат отдельно не нужно.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const date = ref('22.02.2022');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput v-model="date" class="w-[250px]" label="Дата" clearable />

    <span class="text-200 text-content-secondary">v-model: {{ date ?? '—' }}</span>
  </div>
</template>

display-format меняет только то, что видит пользователь: в модели остаётся строка в mask. Принимает маску (D MMMM YYYY) или функцию, которая получает нативный Date. Если нужно хранить дату иначе — например в ISO, — меняйте mask: он задаёт и хранение, и разбор ручного ввода.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const short = ref('22.02.2022');
const long = ref('22.02.2022');
const iso = ref('2022-02-22');

// Функция получает нативную дату и возвращает готовую строку.
const relative = (date: Date) => new Intl.DateTimeFormat('ru', { dateStyle: 'full' }).format(date).replace(' г.', '');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput v-model="short" class="w-[250px]" label="Маска по умолчанию" />

    <CdsDateInput v-model="long" class="w-[250px]" label="displayFormat строкой" display-format="D MMMM YYYY" />

    <CdsDateInput v-model="iso" class="w-[250px]" label="Другая mask" mask="YYYY-MM-DD" />

    <CdsDateInput v-model="short" class="w-[250px]" label="displayFormat функцией" :display-format="relative" />
  </div>
</template>

Дата и время

with-time добавляет под календарь CdsTimePicker и дописывает время в маску: DD.MM.YYYY превращается в DD.MM.YYYY HH:mm (with-seconds — в DD.MM.YYYY HH:mm:ss). Значение остаётся одной строкой, календарь и часы меняют в ней свои части. Настройки тайм-пикера доступны прямо на поле — now-btn, format12h, allowed-hours, allowed-minutes — либо целиком через time-picker-props.

Со временем меню не закрывается по клику на дату: пользователь ещё выбирает часы. Если нужен явный финал, добавьте :hide-actions="false" — кнопки встанут под тайм-пикером.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const dateTime = ref('22.02.2022 12:35');
const withSeconds = ref('22.02.2022 12:35:00');
const workHours = ref('22.02.2022 10:00');

// Приём заявок только в рабочие часы.
const allowedHours = Array.from({ length: 9 }, (_, i) => i + 9);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput v-model="dateTime" class="w-[250px]" label="Дата и время" with-time clearable />

    <CdsDateInput
      v-model="withSeconds"
      class="w-[250px]"
      label="С секундами и кнопкой «Сейчас»"
      with-time
      with-seconds
      now-btn
    />

    <CdsDateInput
      v-model="workHours"
      class="w-[250px]"
      label="Только рабочие часы"
      with-time
      :allowed-hours="allowedHours"
      :hide-actions="false"
    />

    <span class="text-200 text-content-secondary">v-model: {{ dateTime }}</span>
  </div>
</template>

Несколько дат и период

multiple разрешает отметить несколько дат — модель становится массивом строк. range переключает календарь на выбор периода: значение приходит объектом { from, to }, а меню остаётся открытым, пока не выбраны обе границы. Общего времени у набора дат и диапазона нет, поэтому with-time с ними не работает.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const days = ref(['05.02.2022', '12.02.2022']);
const period = ref({ from: '07.02.2022', to: '18.02.2022' });
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput v-model="days" class="w-[250px]" label="Несколько дат" multiple clearable />

    <CdsDateInput v-model="period" class="w-[250px]" label="Период" range clearable />

    <span class="text-200 text-content-secondary">{{ JSON.stringify({ days, period }) }}</span>
  </div>
</template>

Кнопки подтверждения

По умолчанию выбранная дата применяется сразу, а меню закрывается. Передайте :hide-actions="false" — и выбор станет черновиком: он попадёт в модель только после кнопки «ОК», а «Отмена» вернёт прежнее значение. Компонент испускает save и cancel.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const date = ref('22.02.2022');
const lastEvent = ref('—');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput
      v-model="date"
      class="w-[250px]"
      label="Дата с подтверждением"
      :hide-actions="false"
      @save="lastEvent = `save: ${$event}`"
      @cancel="lastEvent = 'cancel'"
    />

    <span class="text-200 text-content-secondary">Последнее событие: {{ lastEvent }}</span>
  </div>
</template>

Слот actions заменяет пару кнопок своей: он получает save, cancel и isPristine — признак того, что в календаре ничего не меняли.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const date = ref('22.02.2022');
</script>

<template>
  <div class="flex flex-col items-center">
    <CdsDateInput v-model="date" class="w-[250px]" label="Дата" :hide-actions="false">
      <template #actions="{ save, cancel, isPristine }">
        <div class="flex px-4 pb-4 gap-2 justify-end">
          <CdsButton variant="soft" color="neutral" size="sm" text="Закрыть" @click="cancel" />
          <CdsButton size="sm" text="Выбрать дату" :disabled="isPristine" @click="save" />
        </div>
      </template>
    </CdsDateInput>
  </div>
</template>

Ручной ввод

update-on задаёт момент, когда набранное значение разбирается и попадает в модель: по умолчанию это blur и enter. Строка, которая не разбирается по mask (или по строковому display-format), игнорируется — поле возвращает прежнее значение. Пустой массив запрещает ввод с клавиатуры и оставляет только календарь.

Маску ввода компонент не навязывает — добавьте её директивой, например лёгкой (2,5 КБ) библиотекой Maska.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { vMaska } from 'maska/vue';
import { ref } from 'vue';

const onBlur = ref('22.02.2022');
const onEnter = ref('22.02.2022');
const pickerOnly = ref('22.02.2022');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput v-model="onBlur" v-maska="'##.##.####'" class="w-[250px]" label="По уходу фокуса" />

    <CdsDateInput
      v-model="onEnter"
      v-maska="'##.##.####'"
      class="w-[250px]"
      label="Только по Enter"
      :update-on="['enter']"
    />

    <CdsDateInput v-model="pickerOnly" class="w-[250px]" label="Только календарь" :update-on="[]" />
  </div>
</template>

Ограничения дат

Пропсы календаря доступны прямо на поле: allowed-dates оставляет доступными только нужные дни, min-year-month и max-year-month не выпускают навигацию за пределы диапазона.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const date = ref<string | null>(null);

const pad = (value: number) => String(value).padStart(2, '0');
const now = new Date();
const last = new Date(now.getFullYear(), now.getMonth() + 2, 1);
const min = `${now.getFullYear()}/${pad(now.getMonth() + 1)}`;
const max = `${last.getFullYear()}/${pad(last.getMonth() + 1)}`;

// Календарь отдаёт дату строкой YYYY/MM/DD.
const weekdaysOnly = (hash: string) => {
  const [year, month, day] = hash.split('/').map(Number);
  const weekday = new Date(year, month - 1, day).getDay();

  return weekday !== 0 && weekday !== 6;
};
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput
      v-model="date"
      class="w-[250px]"
      label="Только будни"
      hint="Навигация ограничена тремя месяцами"
      persistent-hint
      :allowed-dates="weekdaysOnly"
      :min-year-month="min"
      :max-year-month="max"
      clearable
    />
  </div>
</template>

Состояния

disabled блокирует и поле, и календарь, readonly запрещает изменения, но оставляет фокус и копирование, error-messages показывает ошибку под полем.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput class="w-[250px]" label="Обычное" model-value="22.02.2022" />

    <CdsDateInput class="w-[250px]" label="Заблокировано" model-value="22.02.2022" disabled />

    <CdsDateInput class="w-[250px]" label="Только чтение" model-value="22.02.2022" readonly />

    <CdsDateInput class="w-[250px]" label="Ошибка" model-value="22.02.2022" error-messages="Дата уже занята" />
  </div>
</template>

Календарь и меню

picker-props передаёт настройки календарю — например шапку с итогом выбора, menu-props и location управляют выпадающим меню.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const withHeader = ref('22.02.2022');
const above = ref('22.02.2022');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsDateInput
      v-model="withHeader"
      class="w-[250px]"
      label="Шапка и кнопка «Сегодня»"
      :picker-props="{ header: true, todayBtn: true }"
    />

    <CdsDateInput
      v-model="above"
      class="w-[250px]"
      label="Календарь сверху"
      location="top start"
      :menu-props="{ offset: 8 }"
    />
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Отчётный период

Период живёт в одном поле: range даёт { from, to }, :hide-actions="false" превращает выбор в черновик, а кнопки-пресеты пишут в ту же модель — календарь подхватывает их значение.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

type Period = { from: string; to: string };

const period = ref<Period | null>({ from: '01.02.2022', to: '28.02.2022' });
const applied = ref<Period | null>(period.value);

const pad = (value: number) => String(value).padStart(2, '0');
const format = (date: Date) => `${pad(date.getDate())}.${pad(date.getMonth() + 1)}.${date.getFullYear()}`;

// Быстрый пресет: последние N дней по сегодняшний день.
function setLastDays(days: number) {
  const to = new Date();
  const from = new Date(to.getFullYear(), to.getMonth(), to.getDate() - days + 1);

  period.value = { from: format(from), to: format(to) };
}
</script>

<template>
  <div class="flex flex-col gap-2 w-[250px] m-auto">
    <CdsDateInput v-model="period" label="Отчётный период" range clearable :hide-actions="false" />

    <div class="flex justify-center gap-1">
      <CdsButton variant="soft" color="neutral" size="sm" text="7 дней" @click="setLastDays(7)" />
      <CdsButton variant="soft" color="neutral" size="sm" text="30 дней" @click="setLastDays(30)" />
    </div>

    <CdsButton text="Сформировать отчёт" :disabled="!period" @click="applied = period" />

    <span class="text-200 text-center text-content-secondary">
      {{ applied ? `Отчёт за ${applied.from} — ${applied.to}` : 'Период не выбран' }}
    </span>
  </div>
</template>

Дата доставки

Ограничения работают вместе: allowed-dates оставляет только будни, min-year-month и max-year-month — ближайшие два месяца. Ручной ввод здесь выключен намеренно: набрать недоступный день невозможно, а display-format показывает дату словами.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput } from '@central-design-system/components';
import { ref } from 'vue';

const date = ref<string | null>(null);

const pad = (value: number) => String(value).padStart(2, '0');
const now = new Date();
const first = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const last = new Date(now.getFullYear(), now.getMonth() + 2, 0);

const min = `${first.getFullYear()}/${pad(first.getMonth() + 1)}`;
const max = `${last.getFullYear()}/${pad(last.getMonth() + 1)}`;

// Доставка ездит по будням в ближайшие два месяца.
const allowedDates = (hash: string) => {
  const [year, month, day] = hash.split('/').map(Number);
  const candidate = new Date(year, month - 1, day);
  const weekday = candidate.getDay();

  return weekday !== 0 && weekday !== 6 && candidate >= first && candidate <= last;
};
</script>

<template>
  <div class="flex flex-col gap-2 w-[250px] m-auto">
    <CdsDateInput
      v-model="date"
      label="Дата доставки"
      display-format="D MMMM YYYY"
      :allowed-dates="allowedDates"
      :min-year-month="min"
      :max-year-month="max"
      :update-on="[]"
      clearable
    />

    <span class="text-200 text-center text-content-secondary">
      {{ date ? `Привезём ${date} с 10:00 до 18:00` : 'Выберите дату доставки' }}
    </span>
  </div>
</template>

Дата в форме

Поле участвует в CdsForm наравне с остальными: rules получают то же строковое значение, что лежит в модели, поэтому проверка «не в прошлом» — обычная функция. Ограничение навигации через min-year-month подстраховывает правило, а не заменяет его.

Sandbox Storybook

<script setup lang="ts">
import { CdsDateInput, CdsForm, CdsTextInput } from '@central-design-system/components';
import { ref } from 'vue';

const name = ref('');
const date = ref<string | null>(null);

const pad = (value: number) => String(value).padStart(2, '0');
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

const rules = {
  required: (value: unknown) => !!value || 'Обязательное поле',
  future: (value: string | null) => {
    if (!value) return true;

    const [day, month, year] = value.split('.').map(Number);

    return new Date(year, month - 1, day) >= today || 'Дата не может быть в прошлом';
  }
};

const minYearMonth = `${today.getFullYear()}/${pad(today.getMonth() + 1)}`;
</script>

<template>
  <CdsForm class="flex flex-col gap-2 w-[250px] m-auto">
    <CdsTextInput
      v-model="name"
      label="Название встречи"
      placeholder="Введите название встречи"
      :rules="[rules.required]"
    />

    <CdsDateInput
      v-model="date"
      label="Дата встречи"
      :rules="[rules.required, rules.future]"
      :min-year-month="minYearMonth"
      clearable
    />
  </CdsForm>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Активное состояние поля
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
allowedDates	TCalendarAllowedDates | undefined	—	Массив дат, которые будут отображаться в календаре. При использовании функции, функция получает дату в формате YYYY/MM/DD и должна вернуть true или false.
allowedHours	number[] | undefined	—	Позволяет настроить какие часы доступны для выбора.
allowedMinutes	number[] | undefined	—	Позволяет настроить какие минуты доступны для выбора.
allowedSeconds	number[] | undefined	—	Позволяет настроить какие секунды доступны для выбора.
allowedTime	((hr: number | null, min: number | null, sec: number | null) => boolean) | undefined	—	Позволяет настроить какое время доступно для выбора.
appendIcon	IconValue | undefined	—	Иконка в слоте append после контента
appendInnerIcon	IconValue | undefined	—	Иконка во внутреннем слоте append после содержимого поля
autocomplete	string | undefined	—	Помогает влиять на предложения браузера. Значение «suppress» изменяет атрибут name полей, а значение «off» полагается на то, что браузер по собственной инициативе перестанет предлагать значения. Любое другое значение передается встроенной функции автозаполнения для соответствующего элемента.
autofocus	boolean | undefined	—	Включает автофокус
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
centerAffix	boolean | undefined	—	Выровнять по вертикали элементы appendInner, prependInner, clearIcon и label по центру.
clearable	boolean | undefined	—	Отображать кнопку очистки значения
clearIcon	IconValue | undefined	'remove'	Иконка кнопки очистки
color	string | undefined	—	Цвет компонента
counter	string | number | boolean | undefined	—	Счетчик символов. Принимает булево значение, число или строку
counterValue	number | ((value: any) => number) | undefined	—	Пользовательское значение счетчика. Может быть числом или функцией вычисления от текущего значения
defaultDate	string | undefined	—	Используемая дата по-умолчанию, когда модель не заполнена (в формате YYYY/MM/DD).
defaultYearMonth	string | undefined	—	Отображаемый год/месяц в формате YYYY/MM. По-умолчанию это текущий год/месяц если не указана v-model.
description	string | undefined	—	Описание компонента, отображаемое под меткой
dirty	boolean | undefined	—	Признак того, что значение поля было изменено пользователем
disabled	boolean | null | undefined	null	Заблокированное состояние
displayFormat	string | ((date: Date) => string) | undefined	—	Формат отображения даты в поле ввода. Маска ('D MMMM YYYY') или функция, получающая нативный Date и возвращающая строку. По умолчанию значение показывается как есть — в маске mask.
emitImmediately	boolean | undefined	—	Эмитировать событие update:modelValue при смене месяца и года сразу. Недоступно при multiple и range.
error	boolean | undefined	—	Состояние ошибки
errorMessages	string | readonly string[] | null | undefined	[]	Отображает компонент в состояние ошибки и передает пользовательские сообщения об ошибках. Будет объединяться с любыми проверками, заданными в свойстве rules. Это поле не запускает валидацию.
events	TCalendarEvents | undefined	—	Список событий, которые будут отображаться в календаре. Формат: YYYY/MM/DD.
eventsColor	TCalendarEventsColor | undefined	'default'	Цвет событий в календаре.
firstDayOfWeek	string | number | undefined	1	Первый день недели (понедельник по-умолчанию).
focused	boolean | undefined	—	Управляет состоянием фокуса компонента. Когда true, компонент считается сфокусированным и может применять соответствующие стили или поведение.
format12h	boolean | undefined	—	Отображает время в 12-часовом формате AM/PM.
header	boolean | undefined	—	Отображать шапку календаря
hideActions	boolean | undefined	true	Скрыть кнопки подтверждения под календарём — выбранная дата применяется сразу.
hideDetails	boolean | "auto" | undefined	—	Скрытие блока с деталями (сообщениями и подсказками). При значении 'auto' блок скрывается, если нет сообщений
hideMessages	boolean | undefined	—	Скрыть сообщения под полем ввода
hideSiblingMonth	boolean | undefined	—	Скрыть дни соседних месяцев в календаре.
hint	string | undefined	—	Текст подсказки, отображаемый под полем ввода
iconColor	string | boolean | undefined	—	Цвет иконки. Принимает булево значение или строку с цветом
id	string | undefined	—	Уникальный идентификатор компонента
label	string | undefined	—	Текст метки (label) компонента
loading	string | boolean | undefined	—	Индикатор загрузки для компонента
locale	string | TDateLocale | undefined	—	Локаль для дат. Имя локали ('ru' | 'en') или объект TDateLocale. По умолчанию берётся текущая локаль из useLocale, иначе ru.
location	Anchor | undefined	'bottom start'	Положение выпадающего календаря относительно поля ввода.
mask	string | undefined	'DD.MM.YYYY'	Формат даты/времени
maxErrors	string | number | undefined	1	Максимальное число отображаемых ошибок при валидации
maxWidth	string | number | undefined	—	Максимальная ширина компонента
maxYearMonth	string | undefined	—	Запретить навигацию в календаре после указанной максимальной даты в формате YYYY/MM.
menu	boolean | undefined	—	Состояние выпадающего календаря (v-model:menu).
menuProps	CdsMenuProps | undefined	—	Пропсы, пробрасываемые в компонент CdsMenu выпадающего календаря.
messages	string | readonly string[] | undefined	[]	Сообщения для отображения под полем ввода
minWidth	string | number | undefined	—	Минимальная ширина компонента
minYearMonth	string | undefined	—	Запретить навигацию в календаре до указанной минимальной даты в формате YYYY/MM.
modelModifiers	Record<string, boolean> | undefined	—	Модификаторы v-model, переданные Vue для обработки значения поля
modelValue	TDateInputValue | undefined	null	Значение поля: строка в маске mask, объект диапазона { from, to } или их массив при multiple/range.
multiple	boolean | undefined	—	Разрешает множественный выбор дат. v-model должна быть массивом.
name	string | undefined	—	Имя поля ввода
noUnset	boolean | undefined	—	Запретить сброс даты в календаре.
nowBtn	boolean | undefined	—	Отображает кнопку "Сейчас".
persistentClearable	boolean | undefined	—	Всегда отображать кнопку очистки, а не только при наведении или фокусе
persistentCounter	boolean | undefined	—	Всегда отображать счетчик, а не только при взаимодействии с полем
persistentHint	boolean | undefined	—	Всегда отображать подсказку, а не только при фокусе
persistentPlaceholder	boolean | undefined	—	Всегда отображать placeholder, а не скрывать его при взаимодействии с полем
pickerProps	CdsDatePickerProps | undefined	—	Пропсы, пробрасываемые в компонент CdsDatePicker. Побеждают одноимённые пропсы самого поля.
placeholder	string | undefined	—	Текст-заполнитель, отображаемый в пустом поле
prefix	string | undefined	—	Текстовый префикс, отображаемый перед значением поля
prependIcon	IconValue | undefined	—	Иконка в слоте prepend перед контентом
prependInnerIcon	IconValue | undefined	'calendar'	Иконка во внутреннем слоте prepend перед содержимым поля
range	boolean | undefined	—	Разрешает выбор диапазона дат. v-model должна быть массивом.
readonly	boolean | null | undefined	null	Только для чтения
reverse	boolean | undefined	—	Обратный порядок расположения элементов внутри поля
role	string | undefined	—	ARIA-роль для нативного элемента ввода
rules	readonly ValidationRule[] | undefined	[]	Принимает массив, состоящий из элементов различных типов: функций, логических значений и строк. Функции принимают входное значение в качестве аргумента и должны возвращать либо true / false, либо строку, содержащую сообщение об ошибке. Поле ввода перейдет в состояние ошибки, если функция возвращает значение false (или любое значение в массиве содержит false) либо является строкой.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
suffix	string | undefined	—	Текстовый суффикс, отображаемый после значения поля
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
timePickerProps	CdsTimePickerProps | undefined	—	Пропсы, пробрасываемые в компонент CdsTimePicker. Побеждают одноимённые пропсы самого поля.
todayBtn	boolean | undefined	—	Отображать кнопку "Сегодня" в шапке календаря
type	string | undefined	'text'	Тип нативного поля ввода
updateOn	("enter" | "blur")[] | undefined	['blur', 'enter']	События, по которым применяется вручную введённое значение. Пустой массив запрещает ручной ввод — поле становится readonly.
validateOn	ValidateOn | undefined	—	Изменяет тип события, при котором запускается валидация
validationValue	any	—	Значение, используемое при применении правил валидации
view	"Calendar" | "Years" | "Months" | undefined	'Calendar'	Вид календаря по-умолчанию. Возможные значения: 'Calendar', 'Years', 'Months'.
width	string | number | undefined	—	Ширина компонента
withSeconds	boolean | undefined	—	Добавляет секунды в выбор времени.
withTime	boolean | undefined	—	Добавляет под календарь выбор времени (CdsTimePicker) и дописывает время в маску. Работает только для одиночной даты — с multiple и range игнорируется.

События

Имя	Тип	Описание
cancel	[]	Выбор отменён кнопкой отмены.
navigation	[payload: { year: number | undefined; month: number | undefined; }]	Переход к другому месяцу или году в календаре.
rangeEnd	[payload: { from: Partial<IRawDate>; to: Partial<IRawDate>; }]	Окончание выбора диапазона дат.
rangeStart	[value: Partial<IRawDate>]	Начало выбора диапазона дат.
save	[value: TDateInputValue]	Значение подтверждено — выбором в календаре или кнопкой сохранения.
update:focused	[focused: boolean]	Изменение состояния фокуса поля (v-model:focused).
update:menu	[value: boolean]	Изменение состояния выпадающего календаря (v-model:menu).
update:modelValue	[value: TDateInputValue]	Изменение значения поля (v-model).

Слоты

Имя	Тип	Описание
actions	CdsDateInputActionsSlot	Кнопки подтверждения под календарём (актуально при hide-actions="false").
append	CdsInputSlot	Добавляет элемент после поля ввода
append-inner	CdsInputDefaultSlot	Слот, добавляемый в конце инпута ввода
clear	CdsInputDefaultSlot & { props: Record<string, any>; }	Слот для пользовательского иконки очистки (отображается, когда свойство clearable имеет значение «true»).
description	{ description: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsDescription
details	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
label	{ label: string | undefined; props: Record<string, any>; }	Слот по умолчанию для компонента CdsLabel
loader	LoaderSlotProps	Слот для пользовательского загрузчика (отображается, если свойство loading имеет значение true).
message	CdsMessageSlot	Слот для настройки содержания сообщения
messages	CdsInputSlot	Слот для ввода пользовательских данных, позволяющее настраивать отображение сообщений
picker-description	{ year: string | number | undefined; }	Описание шапки календаря.
picker-title	{ date: string; }	Заголовок шапки календаря.
prepend	CdsInputSlot	Добавляет элемент до поля ввода
prepend-inner	CdsInputDefaultSlot	Слот, добавляемый в начало инпута ввода

Exposed

Имя	Тип	Описание
cancel	() => void	Отменяет выбор, возвращает предыдущее значение и закрывает всплывающее окно.
controlRef	HTMLElement | undefined	Ref-ссылка на контролл поля ввода
fieldIconColor	string | undefined	Цвет иконки
isDirty	boolean	Является ли поле ввода "грязным"
isDisabled	boolean	Является ли поле ввода заблокированным
isPure	boolean	Является ли поле ввода "чистым"
isReadonly	boolean	Является ли поле ввода только для чтения
isValid	boolean | null	Является ли поле ввода валидным
isValidating	boolean	Является ли поле ввода в процессе валидации
reset	() => Promise<void>	Функция сброса поля ввода в исходное состояние
resetValidation	() => Promise<void>	Функция сброса валидации поля ввода
save	() => void	Подтверждает выбранную в календаре дату и закрывает всплывающее окно.
validate	(silent?: boolean) => Promise<string[]>	Функция валидации поля ввода