仅桌面端保证样式
TimePicker 时间选择器
时间(点选面板)选择器:支持时:分:秒与任意 format,范围选择用 is-range。日期 + 时间一起选请用 DatePicker。
基础用法
当前值:未选择
范围选择
-
两端输入框支持手输:合法值走统一确认通道(自动按先后排序输出),非法输入回滚显示。
格式与取值格式
format 控制展示(不含 ss 即隐藏秒列),value-format 控制绑定值格式(缺省绑定 Date 对象):
字符串值:
禁用时间
disabled-hours / disabled-minutes / disabled-seconds 传入函数(返回数字数组),滚轮对应项置灰且不可选中;分钟、秒的禁用集分别接收当前小时、当前小时与分钟作为入参。当前值落在禁用集内时自动让位到最近的可用值。
当前值:09:30:00
TimePicker Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| modelValue | 绑定值;value-format 缺省时为 Date | date | string | array | null |
| is-range | 范围选择,绑定值为 [起, 止] 数组 | boolean | false |
| format | 展示格式(不含 ss 隐藏秒列) | string | HH:mm:ss |
| value-format | 绑定值格式化(dayjs 格式),缺省绑定 Date | string | |
| placeholder | 占位文案(范围用 start/end-placeholder) | string | |
| clearable | 可清空 | boolean | true |
| editable | 允许手动键入(单值与 range 输入框均支持,非法输入回滚显示) | boolean | true |
| disabled | 禁用 | boolean | false |
| size | 尺寸(缺省跟随 Form) | large | default | small | |
| disabled-hours | 禁用的小时集合,当前值落在禁用集内自动让位到最近可用值 | () => number[] | null |
| disabled-minutes | 禁用的分钟集合(入参当前 hour) | (hour) => number[] | null |
| disabled-seconds | 禁用的秒集合(入参当前 hour 与 minute) | (hour, minute) => number[] | null |
| ripple | 激活涟漪动效开关:聚焦时实体色影向内收拢消散;也可在 Form 上批量关闭或全局 setRipple(false) | boolean | true |
TimePicker Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| change | 确认选择 | (value) => void | — |
| clear | 清空 | () => void | — |
| visible-change | 面板显隐 | (visible: boolean) => void | — |
| focus / blur | 聚焦 / 失焦 | (e: FocusEvent) => void | — |