Preview Updated 2026-05-10

Time range picker

Two TimePickers paired up to select a "start – end" time range.

Basic usage

v-model / value is [string, string] | null; each entry is HH:mm or HH:mm:ss (when showSeconds is on).

–

已选：09:00 – 18:00

<CfTimeRangePicker v-model="range" clearable />

<CfTimeRangePicker value={range} onChange={setRange} clearable />

Prop	Type	Default	Description
`value` / `modelValue`	`[string \| null, string \| null] \| null`	`—`	Controlled range value
`defaultValue`	`[string \| null, string \| null] \| null`	`null`	Uncontrolled initial value
`placeholder`	`[string, string]`	`['Start time', 'End time']`	Placeholders for both ends
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger size
`disabled`	`boolean`	`false`	Disable the whole group
`clearable`	`boolean`	`false`	Show clear button
`showSeconds`	`boolean`	`false`	Show seconds column
`separator`	`string`	`'–'`	Separator between values

Events: onChange(value) fires whenever either end changes.