Skip to content

TimePicker 时间选择框

用于选择或输入标准时间,支持滚动选择、12小时制、视觉反馈等特性。

基础用法

基本的时间选择器,支持 HH:mm:ss 格式。

12小时制

使用 use12Hours 属性开启12小时制选择,包含 AM/PM 选项。

格式控制

通过 format 属性控制展示格式,例如隐藏秒数。

视觉反馈 (特色功能)

开启 visualFeedback 后,下拉面板的背景色会根据选择的时间(早晨、中午、晚上)呈现不同的渐变色,增强时间感知的交互体验。

键盘滚动 (特色功能)

默认开启 scrollInput,在输入框聚焦时,可以使用键盘上下键快速调整分钟。

范围选择

设置 is-range 开启时间范围选择模式。

API

TimePicker 属性

属性名说明类型默认值
modelValue绑定值string / Date / Array-
disabled是否禁用booleanfalse
editable是否可输入booleantrue
clearable是否显示清除按钮booleantrue
size尺寸'large' / 'default' / 'small''default'
placeholder占位文本string-
start-placeholder范围选择时开始时间的占位内容string-
end-placeholder范围选择时结束时间的占位内容string-
range-separator范围选择时的分隔符string'-'
is-range是否为时间范围选择booleanfalse
format显示格式,支持 'HH:mm:ss' 或 'HH:mm'string'HH:mm:ss'
use12Hours是否使用12小时制booleanfalse
visualFeedback是否开启视觉反馈(背景渐变)booleanfalse
scrollInput是否允许键盘上下键调整时间booleantrue

TimePicker 事件

事件名说明回调参数
change值改变时触发(val: string)
visible-change下拉框出现/隐藏时触发(visible: boolean)