代码演示
如何引入
jsx
import { TimePicker } from '@kousum/semi-ui-vue';基础使用
点击 TimePicker，然后可以在浮层中选择或者输入某一时间。
无限滚动
版本V2.22.0开始，我们将 TimePicker 内的 ScrollItem 的默认模式从 wheel 变更为了 normal, 若想应用回无限滚动的效果，可参考以下示例。
带内嵌标签
受控组件
当使用 value 而不是 defaultValue 时，作为受控组件使用。value 和 onChange 需要配合使用。
不同的 Format 格式
TimePicker 浮层中的列会随着 format 变化，当略去 format 中的某部分时，浮层中对应的列也会消失。
NOTE: format 遵循 date-fns 的 format 格式。 https://date-fns.org/v2.0.0/docs/format
设置面板头部，底部
禁用时间选择
设置步长
可以使用 hourStep, minuteStep, secondStep 按步长展示可选的时分秒。
12 小时制
12 小时制的时间选择器，默认的 format 为 h:mm:ss a，传入的 format 格式必须在 dateFns 日期格式范围之内。
例如默认的 12 小时制格式串为：
a h:mm:ss，如果传入A h:mm:ss则会导致无法正确格式化。
时间范围
版本： >=0.23.0
传入 type="timeRange" 开启时间范围选择。
自定义触发器
默认情况下我们使用 Input 组件作为 TimePicker 组件的触发器，通过传递 triggerRender 方法你可以自定义这个触发器。
时区设置
Semi 所有关于时区的配置都收敛在 ConfigProvider 中，详细使用可以参考 ConfigProvider
API 参考
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoAdjustOverflow | 浮层被遮挡时是否自动调整方向 | boolean | true | |
| autoFocus | 自动获取焦点 | boolean | false | |
| borderless | 无边框模式 >=2.33.0 | boolean | ||
| className | 外层样式名 | string | ||
| clearIcon | 可用于自定义清除按钮, showClear为true时有效 | ReactNode | 2.25.0 | |
| defaultOpen | 面板是否默认打开 | boolean | ||
| defaultValue | 默认时间 | Date|timeStamp|String（type="timeRange"时为数组） | ||
| disabled | 禁用全部操作 | boolean | false | |
| disabledHours | 禁止选择部分小时选项 | Function(): number[] | ||
| disabledMinutes | 禁止选择部分分钟选项 | Function(selectedHour: number): number[] | ||
| disabledSeconds | 禁止选择部分秒选项 | Function(selectedHour: number, selectedMinute: number): number[] | ||
| dropdownMargin | 浮层算溢出时的增加的冗余值，详见issue#549，作用同 Tooltip margin | object|number | 2.25.0 | |
| focusOnOpen | 挂载时是否打开面板并focus输入框 | boolean | false | |
| format | 展示的时间格式 | string | "HH:mm:ss" | |
| getPopupContainer | 指定容器，浮层将会渲染至该元素内，自定义需要设置 position: relative 这会改变浮层 DOM 树位置，但不会改变视图渲染位置。 | Function(): HTMLElement | () => document.body | |
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
| hourStep | 小时选项间隔 | number | 1 | |
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
| insetLabel | 前缀标签，优先级低于 prefix | string|ReactNode | ||
| minuteStep | 分钟选项间隔 | number | 1 | |
| motion | 是否展示弹出层动画 | boolean | true | |
| open | 面板是否打开的受控属性 | boolean | ||
| panelFooter | 面板底部 addon | ReactNode|ReactNode[]|string | 无 | |
| panelHeader | 面板头部 addon | ReactNode|ReactNode[]|string | 无 | |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" | |
| popupClassName | 弹出层类名 | string | '' | |
| popupStyle | 弹出层样式对象 | object | - | |
| position | 浮层位置 | string | type="timeRange"时默认为"bottom"，type="time"时默认为"bottomLeft" | |
| prefix | 前缀内容 | string|ReactNode | ||
| preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法 | boolean | ||
| rangeSeparator | 时间范围分隔符 | string | " ~ " | |
| scrollItemProps | 透传给 scrollItem 的属性，可选值同ScrollList#API | object | ||
| secondStep | 秒选项间隔 | number | 1 | |
| showClear | 是否展示清除按钮 | boolean | true | |
| stopPropagation | 是否阻止弹出层上的点击事件冒泡 | boolean | true | 2.49.0 |
| size | 输入框的大小，可选 'default'，'small'，'large' | string | 'default' | |
| triggerRender | 自定义触发器渲染方法 | ({ placeholder: string }) => ReactNode | - | |
| type | 类型 | "time"|"timeRange" | "time" | |
| use12Hours | 使用 12 小时制，为 true 时 format 默认为 h:mm:ss a | boolean | false | |
| value | 当前时间 | Date|timeStamp|String（type="timeRange"时为数组） | ||
| onBlur | 失去焦点时的回调 | (e: domEvent) => void | () => {} | |
| onChange | 时间发生变化的回调 | Function(time: Date, timeString: string): void （type="timeRange"时入参皆为数组） | 无 | |
| onChangeWithDateFirst | 设置为 true 时 onChange 的入参顺序为 (Date, string), false 时为 (string, Date) | boolean | true | 2.4.0 |
| onFocus | 获得焦点时的回调 | (e: domEvent) => void | () => {} | |
| onOpenChange | 面板打开/关闭时的回调 | Function(isOpen: boolean): void | 无 |
Methods
绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
| 名称 | 描述 |
|---|---|
| blur() | 移除焦点 |
| focus() | 获取焦点 |
文案规范
- 时间选择器至少包括时和分，如：11:30，它在本地化过程中，可以适应为12小时制或者24小时制
- 当选择12小时制，需要和AM/PM一起搭配使用