设置UI引擎前端页面时间选择器组件属性

绑定值

存储从组件中选中的时间或时间范围值，选择后会自动更新绑定值。

是

显示格式

指定时间的显示格式，需参考特定的格式化占位符（请参见表1）。

示例：需12小时制显示时，配置为“hh:mm:ss a”。

是

箭头选择

控制时分秒切换的交互方式：

• 关闭：通过鼠标滚动切换时分秒数值，默认关闭。
• 开启：显示上下箭头按钮，单击箭头切换数值。

是

占位文本

未启用“范围选择”时，时间输入框未选择值的提示文本。

是

范围选择

是否启用时间范围选择功能。

开启后组件分为“开始时间”和“结束时间”两个选择区域。

是

开始时间占位文本

启用“范围选择”后，开始时间输入框未选择值时的提示文本。

是

结束时间占位文本

启用“范围选择”后，结束时间输入框未选择值时的提示文本。

是

清除按钮

是否启用一键清除功能。

开启后组件右侧显示清除按钮，单击可清空已选时间值。

是

禁用

是否禁用组件。

禁用后无法触发选择面板、输入或修改时间值。

是

文本框可输入

时间输入框是否允许手动输入时间。

关闭后仅能通过下拉选择面板选择时间。

是

尺寸

组件整体大小，默认值为“小”，可根据业务场景选择对应尺寸。

是

自定义步长

自定义时分秒的选择步长值，不配置则使用默认规则（默认步长为1）。

是

a

12小时制，显示am/pm（小写）。

A

12小时制，显示AM/PM（大写）。

d

日期（1-31），小于10时不补0（如1、9、10）。

dd

日期（01-31），小于10时补0（如01、09、10）。

h

小时（12小时制，1-12），小于10时不补0。

hh

小时（12小时制，01-12），小于10时补0。

H

小时（24小时制，0-23），小于10时不补0。

HH

小时（24小时制，00-23），小于10时补0。

m

分钟（0-59），小于10时不补0。

mm

分钟（00-59），小于10时补0。

M

月份（1-12），小于10时不补0。

MM

月份（01-12），小于10时补0。

s

秒（0-59），小于10时不补0。

ss

秒（00-59），小于10时补0。

W

周（1-53），小于10时不补0。

WW

周（01-53），小于10时补0。

yyyy

完整年份（如2026）。

元素id值

对应HTML标签的“id”属性，同一页面内必须唯一。

是

样式类

对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。

是

ref引用类

对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。

如果为“数据源表单”组件，会自动填充默认值。

是

onUpdate:modelValue

(...args: any) => void

双向绑定值更新时触发。

onBlur

() => void

当时间输入框失去焦点时触发。

onFocus

() => void

当时间输入框获得焦点时触发。

onClick

(e: MouseEvent) => void

浏览器事件，点击组件时触发。

onChange

(value: Date | Date[]) => void

当用户确认选定的时间值时触发（如单击选择面板的“确定”按钮），参数为选中值：

• 非范围类：单个Date对象。
• 范围类：Date对象数组（“[开始时间, 结束时间]”）。

onMousemove

(e: MouseEvent) => void

浏览器事件，鼠标在组件上移动时触发，注意此事件可能会在组件外继续执行。