# Time-picker 时间/范围 (新) V2.5.20
# 通用规范
| 类型 | 规范细则 |
|---|---|
| 默认规则 | - 默认显示格式为：时:分:秒 - 默认开启：智能录入 |
| 面板打开规则 | - 时间：默认手动输入，不打开面板 - 时间范围：默认手动输入，默认打开面板 |
| 必要元素 | - 提示文字：请选择时间 - 时间范围提示文字：开始时间、结束时间 - 尾部图标：必须为 时间图标 |
| 智能录入规范 | - 自动补齐：时/分/秒不足 2 位自动补零（1 → 01） - 自动校验：输入长度满足要求即完成，或提前完成输入即补齐跳转（如时输入 3 → 03） - 自动分隔与跳转：每块输入完成后自动追加分隔符并跳转到下一个块 - 点击块高亮与修改：点击块整体高亮，输入新数字直接替换，并触发补齐 → 校验 → 跳转 - 键盘辅助：←/→ 切换块，↑/↓ 增减数值并校验范围 |
| 禁止出现的情况 | - 禁止换行、遮挡、显示不全 |
# 代码演示
# API
# Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| trigger-suffix | 只能点击尾部图标弹出选择面板(不适用范围选择器) | Boolean | — | false | v2.0.7 |
| align | 对齐方式 | String | 'left' | 'center' | 'right' | 'left' | ||
| arrow-control | 是否使用箭头进行时间选择，仅对<w-time-picker>有效 | Boolean | — | false | |
| clearable | 是否显示清除按钮 | Boolean | — | true | |
| clear-icon | 自定义清空图标的类名 | String | — | 'w-icon-close' | |
| disabled | 禁用 | Boolean | — | false | |
| default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) | String(TimeSelect) | 可被new Date()解析(TimePicker) / 可选值(TimeSelect) | — | |
| end-placeholder | 范围选择时开始日期的占位内容 | String | — | — | |
| editable | 文本框可输入 | Boolean | — | true | |
| is-range | 是否为时间范围选择，仅对<w-time-picker>有效 | Boolean | — | false | |
| placeholder | 非范围选择时的占位内容 | String | — | — | |
| prefix-icon | 自定义头部图标的类名 | String | — | 'w-icon-time' | |
| range-separator | 选择范围时的分隔符 | String | — | '-' | |
| readonly | 完全只读 | Boolean | — | false | |
| name | 原生属性 | String | — | — | |
| popper-class | TimePicker 下拉框的类名 | String | — | — | |
| picker-options | 当前时间日期选择器特有的选项参考下表 | Object | — | {} | |
| start-placeholder | 范围选择时开始日期的占位内容 | String | — | — | |
| size | 输入框尺寸 | String | 'medium' | 'small' | 'mini' | — | |
| value-format | 可选，仅 TimePicker 时可用，绑定值的格式。不指定则绑定值为 Date 对象 | String | 见 DatePicker 日期组件 | — | |
| value / v-model | 绑定值 | Date(TimePicker) | String(TimeSelect) | — | — | |
| now | 控制弹层是否显示「此刻」 | — | false |
# Time Select Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| end | 结束时间 | String | — | 18:00 | |
| minTime | 最小时间，小于该时间的时间段将被禁用 | String | — | 00:00 | |
| maxTime | 最大时间，大于该时间的时间段将被禁用 | String | — | — | |
| step | 间隔时间 | String | — | 00:30 | |
| start | 开始时间 | String | — | 09:00 |
# Time Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| format | 时间格式化(TimePicker) | String | 小时：HH，分：mm，秒：ss，AM/PM A | 'HH:mm:ss' | |
| selectableRange | 可选时间段，例如'18:30:00 — 20:30:00'或者传入数组['09:30:00 — 12:00:00', '14:30:00 — 18:30:00'] | String | Array | — | — |
# Events
| 事件名 | 说明 | 参数 | Version |
|---|---|---|---|
| blur | 当 input 失去焦点时触发 | 组件实例 | |
| change | 用户确认选定的值时触发 | 组件绑定值 | |
| focus | 当 input 获得焦点时触发 | 组件实例 |
# Methods
| 方法名 | 说明 | 参数 | Version |
|---|---|---|---|
| focus | 使 input 获取焦点 | — |