TimePicker 升级到 TimePicker2 #1.22版本增加当前组件
功能变化：
moment 的依赖，使用 dayjspreset 预设日期hasBorder 支持去掉边框API变化：
onChange 和 onOk 等事件返回日期对象为 Dayjs 类型当用户需要输入一个时间，可以点击输入框，在弹出的时间选择面板上操作。时间选择面板仅支持 24 小时制。format 支持的时间格式如下：
| 格式 | 例子 | 说明 |
|---|---|---|
H HH |
0..23 |
时，24 小时制 |
m mm |
0..59 |
分 |
s ss |
0..59 |
秒 |
组件默认使用 dayjs 实例作为输入输出值，推荐使用结合 dayjs 的方式使用组件。此外，组件也支持传入时间字符串的方式，例如直接传入 "12:00:00"。用户传入什么类型的 value/defaultValue 值，就会在 onChange 中返回相应的类型。
可以通过 defaultValue 传入默认时间值，并且可以通过选择改变该值。
在 1.x 中，
onChange回调参数的值的类型取决于defaultValue的类型 而在 2.x 里，我们废弃了这种难以捉摸的黑魔法，onChange种第一个参数是dayjs类型，第二个参数是被format后的String类型
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| label | 按钮的文案 | ReactNode | - | |
| size | 时间选择框的尺寸 | 'small' | 'medium' | 'large' | 'medium' | |
| state | 输入框状态 | 'error' | 'success' | - | |
| hasClear | 是否允许清空时间 | boolean | true | |
| format | 时间的格式 | string | 'HH:mm:ss' | |
| hourStep | 小时选项步长 | number | - | |
| minuteStep | 分钟选项步长 | number | - | |
| secondStep | 秒钟选项步长 | number | - | |
| renderTimeMenuItems | 渲染的可选择时间列表 [{ label: '01', value: 1 }] 签名: 参数: list: 默认渲染的列表 mode: 渲染的菜单 hour, minute, second value: 当前时间，可能为 null 返回值: 返回需要渲染的数据 |
( list: Array<TimeMenuListItem>, mode: TimeMenuProps['mode'], value: TimeMenuProps['value'] ) => Array<TimeMenuListItem> |
- | |
| visible | 弹层是否显示（受控） | boolean | - | |
| defaultVisible | 弹层默认是否显示（非受控） | boolean | - | |
| popupContainer | 弹层容器 | string | HTMLElement | ((target: HTMLElement) => HTMLElement) | - | |
| popupAlign | 弹层对齐方式，详情见 Overlay 文档 | string | 'tl bl' | |
| popupTriggerType | 弹层触发方式 | 'click' | 'hover' | 'click' | |
| onVisibleChange | 弹层展示状态变化时的回调 | (visible: boolean, reason?: string) => void | - | |
| popupStyle | 弹层自定义样式 | CSSProperties | - | |
| popupClassName | 弹层自定义样式类 | string | - | |
| popupProps | 弹层属性 | PopupProps | - | |
| followTrigger | 跟随触发元素 | boolean | - | |
| hasBorder | 是否有边框 | boolean | true | |
| isPreview | 是否为预览态 | boolean | - | |
| renderPreview | 预览态模式下渲染的内容 | (value: ValueType, props: TimePickerProps) => ReactNode | - | |
| inputProps | 自定义输入框属性 | InputProps | - | |
| placeholder | 输入框提示 | string | - | |
| value | 时间值（Dayjs 对象或时间字符串，受控状态使用） | string | Dayjs | null | (Dayjs | null | string)[] | - | |
| defaultValue | 时间初值（Dayjs 对象或时间字符串，非受控状态使用） | string | Dayjs | (Dayjs | null)[] | - | |
| disabledHours | 禁用小时的函数，TimePicker.RangePicker 时，函数需要返回 number[]，且函数中没有 index 入参，非 TimePicker.RangePicker 时，函数需要返回 boolean，函数中有 index 入参 | (index?: number) => boolean | number[] | - | |
| disabledMinutes | 禁用分钟函数，TimePicker.RangePicker 时，函数需要返回 number[]，且函数中没有 index 入参，非 TimePicker.RangePicker 时，函数需要返回 boolean，函数中有 index 入参 | (index?: number) => boolean | number[] | - | |
| disabledSeconds | 禁用秒钟函数，TimePicker.RangePicker 时，函数需要返回 number[]，且函数中没有 index 入参，非 TimePicker.RangePicker 时，函数需要返回 boolean，函数中有 index 入参 | (index?: number) => boolean | number[] | - | |
| onChange | 时间值改变时的回调 | (value: ValueType) => void | - | |
| preset | 预设值，会显示在时间面板下面 | PresetType | PresetType[] | - | |
| disabled | 禁用 | boolean | boolean[] | false |
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| label | 按钮的文案 | ReactNode | - | |
| size | 时间选择框的尺寸 | 'small' | 'medium' | 'large' | 'medium' | |
| state | 输入框状态 | 'error' | 'success' | - | |
| hasClear | 是否允许清空时间 | boolean | true | |
| format | 时间的格式 | string | 'HH:mm:ss' | |
| hourStep | 小时选项步长 | number | - | |
| minuteStep | 分钟选项步长 | number | - | |
| secondStep | 秒钟选项步长 | number | - | |
| renderTimeMenuItems | 渲染的可选择时间列表 [{ label: '01', value: 1 }] 签名: 参数: list: 默认渲染的列表 mode: 渲染的菜单 hour, minute, second value: 当前时间，可能为 null 返回值: 返回需要渲染的数据 |
( list: Array<TimeMenuListItem>, mode: TimeMenuProps['mode'], value: TimeMenuProps['value'] ) => Array<TimeMenuListItem> |
- | |
| visible | 弹层是否显示（受控） | boolean | - | |
| defaultVisible | 弹层默认是否显示（非受控） | boolean | - | |
| popupContainer | 弹层容器 | string | HTMLElement | ((target: HTMLElement) => HTMLElement) | - | |
| popupAlign | 弹层对齐方式，详情见 Overlay 文档 | string | 'tl bl' | |
| popupTriggerType | 弹层触发方式 | 'click' | 'hover' | 'click' | |
| onVisibleChange | 弹层展示状态变化时的回调 | (visible: boolean, reason?: string) => void | - | |
| popupStyle | 弹层自定义样式 | CSSProperties | - | |
| popupClassName | 弹层自定义样式类 | string | - | |
| popupProps | 弹层属性 | PopupProps | - | |
| followTrigger | 跟随触发元素 | boolean | - | |
| hasBorder | 是否有边框 | boolean | true | |
| isPreview | 是否为预览态 | boolean | - | |
| renderPreview | 预览态模式下渲染的内容 | (value: ValueType, props: TimePickerProps) => ReactNode | - | |
| inputProps | 自定义输入框属性 | InputProps | - | |
| disabledHours | 禁用小时的函数，TimePicker.RangePicker 时，函数需要返回 number[]，且函数中没有 index 入参，非 TimePicker.RangePicker 时，函数需要返回 boolean，函数中有 index 入参 | (index?: number) => boolean | number[] | - | |
| disabledMinutes | 禁用分钟函数，TimePicker.RangePicker 时，函数需要返回 number[]，且函数中没有 index 入参，非 TimePicker.RangePicker 时，函数需要返回 boolean，函数中有 index 入参 | (index?: number) => boolean | number[] | - | |
| disabledSeconds | 禁用秒钟函数，TimePicker.RangePicker 时，函数需要返回 number[]，且函数中没有 index 入参，非 TimePicker.RangePicker 时，函数需要返回 boolean，函数中有 index 入参 | (index?: number) => boolean | number[] | - | |
| disabled | 禁用 | boolean | boolean[] | false | |
| placeholder | 输入框提示 | string | string[] | - | |
| value | 时间值（Dayjs 对象或时间字符串，受控状态使用） | Array<ConfigType> | - | |
| defaultValue | 时间初值（Dayjs 对象或时间字符串，非受控状态使用） | Array<ConfigType> | - | |
| onChange | 时间值改变时的回调 | (value: Array<Dayjs>) => void | - | |
| onOk | 确定按钮点击时的回调 | (value: Array<Dayjs>) => void | - | |
| preset | 预设值，会显示在时间面板下面 | PresetType[] | - |
| 按键 | 说明 |
|---|---|
| Enter | 打开时间选择框 |
| Esc | 关闭时间选择框 |
| Up | 输入上一秒的时间 （如果 disabledMinutes={true} 则可能是上一分钟或者上一小时） |
| Down | 输入下一秒的时间 （如果 disabledMinutes={true} 则可能是下一分钟或者下一小时） |
| Page Up | 输入上一分钟的时间 |
| Page Down | 输入下一分钟的时间 |
| Alt + Page Up | 输入上一小时的时间 |
| Alt + Page Down | 输入下一小时的时间 |