TimePicker 时间选择器

用于选择或输入时间，支持小时、时分、时分秒以及时间范围等多种类型，采用滚动选择交互。

基础用法

默认为时分秒类型（type='time'），通过 v-model 绑定时间字符串（HH:mm:ss 格式）：

请选择时间

当前值：未选择

小时选择

设置 type='hour'，仅选择小时，v-model 绑定为 HH 格式：

请选择小时

当前值：未选择

时分选择

默认 type='time' 包含时分秒列，可通过 format='HH:mm' 隐藏秒列，v-model 绑定为 HH:mm 格式：

请选择时分

当前值：未选择

时间范围选择

设置 type='timerange'，可选择开始时间和结束时间，左右两个选择面板独立操作，v-model 绑定为 [开始时间, 结束时间] 数组：

开始时间至结束时间

? ~ ?

格式化显示

通过 format 自定义显示格式，支持 HH、mm、ss 占位符。format 同时控制显示列（不含 ss 则隐藏秒列）：

HH时mm分

HH:mm

不同尺寸

设置 size 属性使用三种预设尺寸：

小尺寸

中等尺寸

大尺寸

可清空与禁用

clearable 属性使选择器显示清除按钮，disabled 属性禁用选择器：

10:30:00×

09:00:00

禁用部分时间

通过 disabledHours、disabledMinutes、disabledSeconds 函数禁用特定时间选项，函数返回需要禁用的时间数值数组：

禁用部分时间

API

参数	类型	默认值	说明
`modelValue`	`string \| [string, string]`	`''`	绑定值，timerange 类型为二元数组
`type`	`'hour' \| 'time' \| 'timerange'`	`'time'`	选择器类型：hour 仅选择小时，time 选择时分秒，timerange 选择时间范围
`placeholder`	`string`	`'请选择时间'`	未选择时的占位文本
`startPlaceholder`	`string`	`'开始时间'`	时间范围选择的开始占位文本
`endPlaceholder`	`string`	`'结束时间'`	时间范围选择的结束占位文本
`disabled`	`boolean`	`false`	是否禁用
`clearable`	`boolean`	`false`	是否可清空
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	选择器尺寸
`format`	`string`	`—`	显示格式，支持 HH、mm、ss 占位符。不含 ss 则隐藏秒列，不含 mm 则隐藏分列
`disabledHours`	`() => number[]`	`—`	禁用小时函数，返回禁用的小时数值数组
`disabledMinutes`	`(hour: number) => number[]`	`—`	禁用分钟函数，接收当前小时，返回禁用的分钟数值数组
`disabledSeconds`	`(hour: number, minute: number) => number[]`	`—`	禁用秒函数，接收当前小时和分钟，返回禁用的秒数值数组

事件名	参数	说明
`update:modelValue`	`(value: string \| [string, string] \| undefined) => void`	值变化时触发
`change`	`(value: string \| [string, string] \| undefined) => void`	确认选择时触发