Для выбора даты используйте CdsDatePicker, а если нужно поле с датой и временем сразу — готовый CdsDateInput с пропом with-time: он ставит эти часы под календарём и сам сводит всё в одну строку.

Анатомия

Каждый блок времени — это поле ввода со стрелками: значение можно набрать с клавиатуры или перебрать по одной единице. Секунды, переключатель AM/PM и кнопку «Сейчас» добавляют пропсы with-seconds, format12h и now-btn.

Storybook

Вариации

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

Время приходит в v-model строкой в формате mask — по умолчанию HH:mm. Вторым аргументом события update:model-value компонент отдаёт разобранную дату объектом: год, месяц, день, часы, минуты, секунды. Пока значение не выбрано, поля пустые и показывают подсказку 00.

Sandbox Storybook

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

const time = ref<string | null>(null);
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTimePicker v-model="time" />

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

Маска может включать и дату: тогда компонент меняет только время, а дату переносит из текущего значения — так одну строку делят между собой календарь и часы. На этом же построен with-time у CdsDateInput. Если модель пуста, дату для новой строки берёт default-date (формат YYYY/MM/DD), иначе — сегодняшний день.

Sandbox Storybook

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

const withDate = ref('01.09.2026 09:30');
const empty = ref<string | null>(null);
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-4">
    <div class="flex flex-col items-center gap-2">
      <CdsTimePicker v-model="withDate" mask="DD.MM.YYYY HH:mm" />

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

    <div class="flex flex-col items-center gap-2">
      <CdsTimePicker v-model="empty" mask="DD.MM.YYYY HH:mm" default-date="2026/09/01" />

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

Секунды

with-seconds добавляет третий блок. Маска расширяется автоматически: к HH:mm компонент сам дописывает :ss.

Sandbox Storybook

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

const time = ref('15:22:30');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTimePicker v-model="time" with-seconds />

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

12-часовой формат

format12h показывает часы от 1 до 12 и переключатель AM/PM. На значение в модели это не влияет — формат задаёт маска, поэтому для строки с AM/PM используйте hh:mm A.

Sandbox Storybook

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

const time = ref('14:00');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTimePicker v-model="time" format12h />

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

Кнопка «Сейчас»

now-btn добавляет под часами кнопку, которая ставит текущее время — пользователю не приходится перебирать значения стрелками.

Sandbox Storybook

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

const time = ref('18:00');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTimePicker v-model="time" now-btn />

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

Доступное время

allowed-hours, allowed-minutes и allowed-seconds принимают массивы разрешённых значений: стрелки перебирают только их, а значение вне списка компонент подтягивает к ближайшему допустимому.

Sandbox Storybook

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

const time = ref('12:30');

const allowedHours = [9, 10, 11, 12, 13, 14];
const allowedMinutes = [0, 15, 30, 45];
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTimePicker v-model="time" :allowed-hours="allowedHours" :allowed-minutes="allowedMinutes" />

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

Когда ограничение зависит от уже выбранного времени, вместо массивов передайте функцию allowed-time. Она вызывается отдельно для часов, минут и секунд: непроверяемые части приходят как null.

Sandbox Storybook

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

const time = ref('10:30');

// Часы и минуты проверяются по отдельности: сначала приходит только час,
// затем час вместе с минутой. Обед с 13:00 до 14:00 недоступен.
const allowedTime = (hour: number | null, minute: number | null) => {
  if (hour === null) return true;
  if (hour < 9 || hour > 17) return false;
  if (minute === null) return true;

  return hour !== 13;
};
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTimePicker v-model="time" :allowed-time="allowedTime" />

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

Локализация

locale принимает имя локали (ru | en) или собственный объект переводов; без пропа берётся локаль приложения. От локали зависят подпись кнопки «Сейчас» и формат по умолчанию: у en время 12-часовое, поэтому часы показываются от 1 до 12 даже без format12h — переключатель AM/PM добавляет только он.

Sandbox Storybook

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

const time = ref('09:35 AM');
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsTimePicker v-model="time" locale="en" format12h now-btn mask="hh:mm A" />

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

Состояния

disabled отключает часы и приглушает их, readonly сохраняет обычный вид, но запрещает менять значение — и стрелками, и с клавиатуры.

Sandbox Storybook

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

const time = ref('15:22');
</script>

<template>
  <div class="flex flex-wrap justify-center gap-4">
    <CdsTimePicker v-model="time" disabled now-btn />
    <CdsTimePicker v-model="time" readonly now-btn />
  </div>
</template>

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

Storybook

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

Запись на встречу

Встречи назначают в рабочие часы и по четвертям часа — allowed-hours и allowed-minutes оставляют только такие значения. Пользователь не может выбрать время, которое потом придётся отклонять.

Sandbox Storybook

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

const time = ref('10:30');

// Встречи назначают в рабочие часы и по четвертям часа.
const allowedHours = [9, 10, 11, 12, 13, 14, 15, 16, 17];
const allowedMinutes = [0, 15, 30, 45];

const pad = (value: number) => String(value).padStart(2, '0');

const finish = computed(() => {
  const [hour, minute] = time.value.split(':').map(Number);
  const end = hour * 60 + minute + 30;

  return `${pad(Math.floor(end / 60))}:${pad(end % 60)}`;
});
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <CdsCard class="w-fit">
      <CdsTimePicker v-model="time" :allowed-hours="allowedHours" :allowed-minutes="allowedMinutes" />
    </CdsCard>

    <span class="text-200 text-content-secondary">Встреча: {{ time }} — {{ finish }} (30 минут)</span>
  </div>
</template>

Поле со временем

Чаще всего часы живут не на странице, а в меню у текстового поля. Готового поля для одного только времени в системе нет — соберите контрол из CdsTextInput, CdsMenu с activator="parent" и часов: вам остаются доступны все свойства и слоты поля и меню. Для ручного ввода добавьте маску: рекомендуем лёгкую (2,5 КБ) библиотеку Maska. Если вместе со временем нужна дата, поле уже есть — CdsDateInput с with-time.

Sandbox Storybook

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

const time = ref('12:00');
</script>

<template>
  <div class="w-[250px] m-auto">
    <CdsTextInput v-model="time" v-maska="'##:##'" label="Время" placeholder="Выберите время" append-inner-icon="time">
      <CdsMenu activator="parent" :close-on-content-click="false">
        <CdsTimePicker v-model="time" now-btn />
      </CdsMenu>
    </CdsTextInput>
  </div>
</template>

Интервал «с — до»

Двум часам можно дать общее правило: allowed-time у окончания смотрит на начало и не пускает выбрать время раньше. Когда начало сдвигают за окончание, демо переносит и его — правило и код работают в паре.

Sandbox Storybook

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

const start = ref('09:00');
const end = ref('18:00');

const pad = (value: number) => String(value).padStart(2, '0');
const toMinutes = (time: string) => {
  const [hour, minute] = time.split(':').map(Number);

  return hour * 60 + minute;
};

// Окончание не может быть раньше начала. Часы и минуты проверяются по отдельности:
// сначала приходит только час, затем час вместе с выбранной минутой.
const allowedEnd = (hour: number | null, minute: number | null) => {
  if (hour === null) return true;
  if (minute === null) return hour >= Math.floor(toMinutes(start.value) / 60);

  return hour * 60 + minute > toMinutes(start.value);
};

// Начало сдвинули за окончание — переносим окончание на час вперёд.
watch(start, () => {
  if (toMinutes(end.value) > toMinutes(start.value)) return;

  const shifted = Math.min(toMinutes(start.value) + 60, 23 * 60 + 59);
  end.value = `${pad(Math.floor(shifted / 60))}:${pad(shifted % 60)}`;
});

const duration = computed(() => {
  const total = toMinutes(end.value) - toMinutes(start.value);

  return `${Math.floor(total / 60)} ч ${pad(total % 60)} мин`;
});
</script>

<template>
  <div class="flex flex-col items-center gap-2">
    <div class="flex flex-wrap items-start justify-center gap-4">
      <div class="flex flex-col items-center gap-1">
        <span class="text-200 text-content-secondary">Начало</span>

        <CdsCard class="w-fit">
          <CdsTimePicker v-model="start" />
        </CdsCard>
      </div>

      <div class="flex flex-col items-center gap-1">
        <span class="text-200 text-content-secondary">Окончание</span>

        <CdsCard class="w-fit">
          <CdsTimePicker v-model="end" :allowed-time="allowedEnd" />
        </CdsCard>
      </div>
    </div>

    <span class="text-200 text-content-secondary">Рабочий день: {{ duration }}</span>
  </div>
</template>

Дата и время

Календарь не выбирает время, часы не выбирают дату — поставьте их рядом с общей моделью и одинаковой маской DD.MM.YYYY HH:mm: каждый компонент меняет свою часть строки. В поле ввода эта пара уже собрана — включите with-time у CdsDateInput.

Sandbox Storybook

<script setup lang="ts">
import { CdsDatePicker, CdsDivider, CdsMenu, CdsTextInput, CdsTimePicker } from '@central-design-system/components';
import { vMaska } from 'maska/vue';
import { ref } from 'vue';

const mask = 'DD.MM.YYYY HH:mm';
const dateTime = ref('01.09.2026 09:30');
</script>

<template>
  <div class="w-[250px] m-auto">
    <CdsTextInput
      v-model="dateTime"
      v-maska="'##.##.#### ##:##'"
      label="Дата и время"
      placeholder="Выберите дату и время"
      append-inner-icon="calendar"
    >
      <CdsMenu activator="parent" :close-on-content-click="false">
        <div class="flex flex-col">
          <CdsDatePicker v-model="dateTime" :mask="mask" />

          <CdsDivider />

          <CdsTimePicker v-model="dateTime" :mask="mask" now-btn />
        </div>
      </CdsMenu>
    </CdsTextInput>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
allowedHours	number[] | undefined	—	Позволяет настроить какие часы доступны для выбора.
allowedMinutes	number[] | undefined	—	Позволяет настроить какие минуты доступны для выбора.
allowedSeconds	number[] | undefined	—	Позволяет настроить какие секунды доступны для выбора.
allowedTime	((hr: number | null, min: number | null, sec: number | null) => boolean) | undefined	—	Позволяет настроить какое время доступно для выбора.
defaultDate	string | undefined	—	Используемая дата по-умолчанию, когда модель не заполнена (в формате YYYY/MM/DD).
disabled	boolean | null | undefined	null	Заблокированное состояние
format12h	boolean | undefined	—	Отображает время в 12-часовом формате AM/PM.
locale	string | TDateLocale | undefined	—	Локаль для дат. Имя локали ('ru' | 'en') или объект TDateLocale. По умолчанию берётся текущая локаль из useLocale, иначе ru.
mask	string | undefined	'HH:mm'	Формат даты/времени
modelValue	string | TDatetimeValueRange | (string | TDatetimeValueRange)[] | null | undefined	null	Значение модели
nowBtn	boolean | undefined	—	Отображает кнопку "Сейчас".
readonly	boolean | null | undefined	null	Только для чтения
theme	string | undefined	—	Тема компонента
withSeconds	boolean | undefined	—	Добавляет секунды в выбор времени.

События

Имя	Тип	Описание
update:modelValue	[value: string | undefined, date: IRawDate]	Изменение значения (v-model). Передаёт отформатированное значение и объект даты.

Exposed

Имя	Тип	Описание
setAm	() => void	Переключает 12-часовой формат на первую половину суток (AM).
setHour	(hour: number) => void	Устанавливает часы.
setMinute	(minute: number) => void	Устанавливает минуты.
setNow	() => void	Устанавливает текущее системное время.
setPm	() => void	Переключает 12-часовой формат на вторую половину суток (PM).
setSecond	(second: number) => void	Устанавливает секунды.