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 / (无)

<CfTimePicker v-model="t1" clearable />
<CfTimePicker v-model="t2" show-seconds clearable />

<CfTimePicker value={t1} onChange={setT1} clearable />
<CfTimePicker value={t2} onChange={setT2} showSeconds clearable />

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.