To pick a date use CdsDatePicker, and if you need a field with a date and a time at once — the ready CdsDateInput with the with-time prop: it puts this clock under the calendar and brings everything together into one string itself.

Anatomy

Every block of the time is a field with arrows: the value can be typed on the keyboard or stepped through one unit at a time. The seconds, the AM/PM switch and the "Now" button are added by the with-seconds, format12h and now-btn props.

Storybook

Variations

Value and format

The time arrives in v-model as a string in the mask format — HH:mm by default. As the second argument of the update:model-value event the component gives out the parsed date as an object: the year, the month, the day, the hours, the minutes, the seconds. While no value is chosen, the fields are empty and show the 00 hint.

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>

The mask may include the date as well: then the component changes the time only and carries the date over from the current value — that is how one string is shared between a calendar and a clock. The with-time prop of CdsDateInput is built on the same idea. If the model is empty, the date for the new string is taken from default-date (the YYYY/MM/DD format), otherwise it is today.

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>

Seconds

with-seconds adds a third block. The mask is extended automatically: the component appends :ss to HH:mm by itself.

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>

The 12-hour format

format12h shows the hours from 1 to 12 and the AM/PM switch. This does not affect the value in the model — the format is set by the mask, so for a string with AM/PM use 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>

The "Now" button

now-btn adds a button under the clock that sets the current time — the user does not have to step through the values with the arrows.

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>

Available time

allowed-hours, allowed-minutes and allowed-seconds accept arrays of the allowed values: the arrows step through those only, and a value outside the list is pulled by the component to the nearest allowed one.

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>

When the restriction depends on the already chosen time, pass the allowed-time function instead of the arrays. It is called separately for the hours, the minutes and the seconds: the parts that are not being checked arrive as 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>

Localization

locale accepts a locale name (ru | en) or your own object of translations; without the prop the locale of the application is taken. The caption of the "Now" button and the default format depend on the locale: in en the time is 12-hour, so the hours are shown from 1 to 12 even without format12h — only the AM/PM switch is added by it.

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>

States

disabled turns the clock off and dims it, readonly keeps the usual look but forbids changing the value — both with the arrows and from the keyboard.

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>

Guidelines

Storybook

Scenarios

Booking a meeting

Meetings are scheduled within working hours and by quarters of an hour — allowed-hours and allowed-minutes leave only such values. The user cannot pick a time that would have to be rejected later.

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>

A field with a time

Most often the clock lives not on the page but in a menu next to a text field. There is no ready field for the time alone in the system — assemble the control out of CdsTextInput, a CdsMenu with activator="parent" and the clock: all the props and slots of the field and the menu stay available to you. For the manual input add a mask: we recommend the lightweight (2.5 KB) Maska library. If you need the date together with the time, the field already exists — CdsDateInput with 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>

A "from — to" interval

Two clocks can share one rule: the allowed-time of the end looks at the start and does not let an earlier time be picked. When the start is moved past the end, the demo moves the end too — the rule and the code work in pairs.

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>

Date and time

The calendar does not pick the time and the clock does not pick the date — put them next to each other with a shared model and the same DD.MM.YYYY HH:mm mask: every component changes its own part of the string. In a field this pair is already assembled — turn on with-time on 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

Props

Name	Type	Default	Description
allowedHours	number[] | undefined	—	Configures which hours are available for selection.
allowedMinutes	number[] | undefined	—	Configures which minutes are available for selection.
allowedSeconds	number[] | undefined	—	Configures which seconds are available for selection.
allowedTime	((hr: number | null, min: number | null, sec: number | null) => boolean) | undefined	—	Configures which time is available for selection.
defaultDate	string | undefined	—	Date used by default when the model is empty (in the YYYY/MM/DD format).
disabled	boolean | null | undefined	null	Disabled state
format12h	boolean | undefined	—	Shows the time in the 12-hour AM/PM format.
locale	string | TDateLocale | undefined	—	Locale for the dates. A locale name ('ru' | 'en') or a TDateLocale object. The current locale from useLocale is taken by default, otherwise ru.
mask	string | undefined	'HH:mm'	Date/time format
modelValue	string | TDatetimeValueRange | (string | TDatetimeValueRange)[] | null | undefined	null	Value of the model
nowBtn	boolean | undefined	—	Shows the "Now" button.
readonly	boolean | null | undefined	null	Read-only state
theme	string | undefined	—	Component theme
withSeconds	boolean | undefined	—	Adds seconds to the time selection.

Events

Name	Type	Description
update:modelValue	[value: string | undefined, date: IRawDate]	The value changed (v-model). Passes the formatted value and the date object.

Exposed

Name	Type	Description
setAm	() => void	Switches the 12-hour format to the first half of the day (AM).
setHour	(hour: number) => void	Sets the hours.
setMinute	(minute: number) => void	Sets the minutes.
setNow	() => void	Sets the current system time.
setPm	() => void	Switches the 12-hour format to the second half of the day (PM).
setSecond	(second: number) => void	Sets the seconds.