Preview Updated 2026-05-10

Time picker

Trigger plus a three-column scroll panel for picking time. Supports HH:mm:ss, and pairs with DatePicker for date + time use cases.

Basic usage

v-model / value is a string in HH:mm (or HH:mm:ss when showSeconds is on). clearable shows a clear button.

背景

时（HH:mm）

含秒（HH:mm:ss）

已选：09:30 / (无)

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfTimePicker } from '@chufix-design/vue';

const t1 = ref<string | null>('09:30');
const t2 = ref<string | null>(null);
</script>
<template>
  <div style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">时（HH:mm）</div>
      <CfTimePicker v-model="t1" clearable />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">含秒（HH:mm:ss）</div>
      <CfTimePicker v-model="t2" show-seconds clearable />
    </div>
    <span style="font-size: 12px; color: var(--fg-3);">已选：<code>{{ t1 ?? '(无)' }}</code> / <code>{{ t2 ?? '(无)' }}</code></span>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfTimePicker } from '@chufix-design/vue';

const t1 = ref<string | null>('09:30');
const t2 = ref<string | null>(null);
</script>
<template>
  <div style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">时（HH:mm）</div>
      <CfTimePicker v-model="t1" clearable />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">含秒（HH:mm:ss）</div>
      <CfTimePicker v-model="t2" show-seconds clearable />
    </div>
    <span style="font-size: 12px; color: var(--fg-3);">已选：<code>{{ t1 ?? '(无)' }}</code> / <code>{{ t2 ?? '(无)' }}</code></span>
  </div>
</template>

import { useState } from 'react';
import { CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [t1, setT1] = useState(ref<string | null>('09:30'));
  const [t2, setT2] = useState(ref<string | null>(null));
  return (
    <>
      <CfTimePicker value={t1} onChange={setT1} clearable />
      <CfTimePicker value={t2} onChange={setT2} showSeconds clearable />
    </>
  );
}

API

Prop	Type	Default	Description
`value` / `modelValue`	`string \| null`	`—`	Controlled value, format `HH:mm` or `HH:mm:ss`
`defaultValue`	`string \| null`	`null`	Uncontrolled initial value
`placeholder`	`string`	`'Select time'`	Placeholder when empty
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger size
`disabled`	`boolean`	`false`	Disabled
`clearable`	`boolean`	`false`	Show clear button
`showSeconds`	`boolean`	`false`	Show seconds column; output becomes `HH:mm:ss`

Events: onChange(value) — fired when the time changes.