TimePicker

时间选择器。

何时使用 #

当用户需要输入一个时间，可以点击输入框，在弹出的时间选择面板上操作。时间选择面板仅支持 24 小时制。format 支持的时间格式如下：

格式 例子 说明
H HH 0..23 时，24 小时制
m mm 0..59 分
s ss 0..59 秒

组件默认使用 moment 实例作为输入输出值，推荐使用结合 moment 的方式使用组件。此外，组件也支持传入时间字符串的方式，例如直接传入 "12:00:00"。用户传入什么类型的 value/defaultValue 值，就会在 onChange 中返回相应的类型。

代码演示 #

基本 #

最简单的用法。

默认值 #

可以通过 defaultValue 传入默认时间值，并且可以通过选择改变该值。onChange 回调参数的值的类型取决于 defaultValue 的类型。

尺寸 #

TimePicker 使用和 Input 组件相同的输入框尺寸，可以通过 size 属性进行设置。

受控 #

通过 value 和 onChange 实现受控，仅支持通过选择实现受控。

禁用时分秒 #

禁用全部和禁用部分选择项

时间格式 #

可以通过 format 属性格式化时间值，此外该属性还会影响到时间列的展示。

自定义渲染时间选择菜单 #

可以通过 renderTimeMenuItems 来自定义渲染下拉菜单每一项。

步长 #

可以通过 hourStep, minuteStep, secondStep 分别设置时分秒的选项间隔。

结合 Field 使用 #

配合 Field 使用

API #

TimePicker #

参数 说明 类型 默认值 是否必填
label 按钮的文案 React.ReactNode -
state 输入框状态 'error' | 'success' -
placeholder 输入框提示 string -
value 时间值（moment 对象或时间字符串，受控状态使用） string | Moment | null -
defaultValue 时间初值（moment 对象或时间字符串，非受控状态使用） string | Moment -
size 时间选择框的尺寸 'small' | 'medium' | 'large' -
hasClear 是否允许清空时间 boolean -
format 时间的格式 string -
hourStep 小时选项步长 number -
minuteStep 分钟选项步长 number -
secondStep 秒钟选项步长 number -
disabledHours 禁用小时的函数 (index: number) => boolean -
disabledMinutes 禁用分钟函数 (index: number) => boolean -
disabledSeconds 禁用秒钟函数 (index: number) => boolean -
visible 弹层是否显示（受控） boolean -
defaultVisible 弹层默认是否显示（非受控） boolean -
popupContainer 弹层容器 string | HTMLElement | ((target: HTMLElement) => HTMLElement) -
popupAlign 弹层对齐方式，详情见 Overlay 文档 string -
popupTriggerType 弹层触发方式 'click' | 'hover' -
onVisibleChange 弹层展示状态变化时的回调 (visible: boolean, reason: string) => void -
popupStyle 弹层自定义样式 React.CSSProperties -
popupClassName 弹层自定义样式类 string -
popupProps 弹层属性 PopupProps -
disabled 是否禁用 boolean -
isPreview 是否为预览态 boolean -
renderPreview 预览态模式下渲染的内容 (value: Moment | null, props: TimePickerProps) => React.ReactNode -
onChange 时间值改变时的回调 (value: Moment | string | null) => void -
renderTimeMenuItems 渲染的可选择时间列表

签名:
参数:
list: 默认渲染的列表
mode: 渲染的菜单 hour, minute, second
value: 当前时间，可能为 null
返回值:
返回需要渲染的数据		 (
list: Array<TimeMenuListItem>,
mode: TimeMenuProps['mode'],
value: TimeMenuProps['value']
) => Array<TimeMenuListItem>		 -
inputProps 自定义输入框属性 InputProps -
popupContent 弹层内容 React.ReactNode -
followTrigger 跟随触发元素 boolean -

无障碍键盘操作指南 #

按键 说明
Enter 打开时间选择框
Esc 关闭时间选择框
Up 输入上一秒的时间 （如果 disabledMinutes={true} 则可能是上一分钟或者上一小时）
Down 输入下一秒的时间 （如果 disabledMinutes={true} 则可能是下一分钟或者下一小时）
Page Up 输入上一分钟的时间
Page Down 输入下一分钟的时间
Alt + Page Up 输入上一小时的时间
Alt + Page Down 输入下一小时的时间