Time Picker 时间选择器
用于输入时间。
任意时间点
可选择任意时间。
默认可通过滚轮选择时间；设置 arrow-control 后也可使用箭头控件选择。
限制时间范围
可限制可选时间范围。
通过 disabledHours、disabledMinutes 与 disabledSeconds 限制可选时间。
任意时间范围
可选择任意时间范围。
添加 is-range 可选择时间范围；范围模式下同样支持 arrow-control。
To
To
面板底部按钮
底部支持「此刻」与「确定」按钮；点击「此刻」会选中当前时分秒，并与「确定」一致地关闭面板。
API
属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值；若为数组，长度应为 2 | number / string / object | '' |
| readonly | 是否只读 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| editable | 文本框是否可输入 | boolean | true |
| clearable | 是否显示清除按钮 | boolean | true |
| size | 输入框尺寸 | enum | — |
| placeholder | 非范围模式下的占位文本 | string | '' |
| start-placeholder | 范围模式下开始时间的占位文本 | string | — |
| end-placeholder | 范围模式下结束时间的占位文本 | string | — |
| is-range | 是否为时间范围选择 | boolean | false |
| arrow-control | 是否使用箭头按钮选择时间 | boolean | false |
| popper-class | 下拉框的自定义类名 | string | '' |
| popper-style | 下拉框的自定义样式 | string / object | — |
| popper-options | 自定义 Popper 选项，详见 popper.js | object | {} |
| fallback-placements | Tooltip 可能出现的位置列表，详见 popper.js | array | ['bottom', 'top', 'right', 'left'] |
| placement | 下拉框位置 | Placement | bottom |
| range-separator | 范围选择分隔符 | string | '-' |
| format | 输入框中展示值的格式 | string 参见日期格式 | — |
| default-value | 可选，日历的默认日期 | Date / array | — |
| value-format | 可选，绑定值的格式；未指定时绑定值为 Date 对象 | string 参见日期格式 | — |
| id | 同原生 input 的 id | string / array | — |
| name | 同原生 input 的 name | string | '' |
| aria-label a11y | 同原生 input 的 aria-label | string | — |
| prefix-icon | 自定义前缀图标组件 | string / Component | Clock |
| clear-icon | 自定义清除图标组件 | string / Component | CircleClose |
| disabled-hours | 指定不可选的小时数组 | Function | — |
| disabled-minutes | 指定不可选的分钟数组 | Function | — |
| disabled-seconds | 指定不可选的秒数组 | Function | — |
| teleported | 下拉是否挂载到 body | boolean | true |
| tabindex | 输入框 tabindex | string / number | 0 |
| empty-values | 组件的空值配置，参见 config-provider | array | — |
| value-on-clear | 清空时的返回值，参见 config-provider | string / number / boolean / Function | — |
| save-on-blur | 未选择值时，失焦是否用当前时间自动填充输入框 | boolean | true |
| show-now | 是否显示「此刻」按钮 | boolean | true |
| show-confirm | 是否显示确认按钮 | boolean | true |
| show-footer | 是否显示底部栏 | boolean | true |
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| change | 用户确认值时触发 | Function |
| blur | 输入框失焦时触发 | Function |
| focus | 输入框聚焦时触发 | Function |
| clear | 可清空时点击清除图标触发 | Function |
| visible-change | 下拉出现/隐藏时触发 | Function |
暴露
| 名称 | 说明 | 类型 |
|---|---|---|
| focus | 聚焦时间选择器 | Function |
| blur | 失焦时间选择器 | Function |
| handleOpen | 打开时间选择器浮层 | Function |
| handleClose | 关闭时间选择器浮层 | Function |
类型声明
显示类型声明
ts
type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'
| 'right'
| 'right-start'
| 'right-end'