TimePicker 时间选择框

Guide

何时使用

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

格式例子说明
H HH0..23时,24 小时制
m mm0..59
s ss0..59

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

基本

最简单的用法。

  

尺寸

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



默认值

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

受控

通过 valueonChange 实现受控,仅支持通过选择实现受控。

Disable TimePicker

Disable Hours/Minutes/Seconds

禁用时分秒

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

Hide seconds

Hide hours

时间格式

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

步长

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



结合 Field 使用

配合 Field 使用

时间范围基本

选取时间范围

时间范围受控

选取时间范围,受控

时间范围禁用

禁用时间范围

API

TimePicker

参数说明类型默认值
className自定义组件classString-
style自定义组件styleObject-
label按钮的文案ReactNode-
size时间选择框的尺寸

可选值:
'small', 'medium'
Enum'medium'
state输入框状态

可选值:
'error', 'success'
Enum-
placeholder输入框提示String-
value时间值(moment 对象或时间字符串,受控状态使用)custom-
defaultValue时间初值(moment 对象或时间字符串,非受控状态使用)custom-
hasClear是否允许清空时间Booleantrue
format时间的格式
https://momentjs.com/docs/#/parsing/string-format/
String'HH:mm:ss'
hourStep小时选项步长Number-
minuteStep分钟选项步长Number-
secondStep秒钟选项步长Number-
disabledHours禁用小时函数

签名:
Function(index: Number) => Boolean
参数:
index: {Number} 时 0 - 23
返回值:
{Boolean} 是否禁用
Function-
disabledMinutes禁用分钟函数

签名:
Function(index: Number) => Boolean
参数:
index: {Number} 分 0 - 59
返回值:
{Boolean} 是否禁用
Function-
disabledSeconds禁用秒钟函数

签名:
Function(index: Number) => Boolean
参数:
index: {Number} 秒 0 - 59
返回值:
{Boolean} 是否禁用
Function-
visible弹层是否显示(受控)Boolean-
defaultVisible弹层默认是否显示(非受控)Boolean-
popupContainer弹层容器

签名:
Function(target: Object) => ReactNode
参数:
target: {Object} 目标节点
返回值:
{ReactNode} 容器节点
Function-
popupAlign弹层对齐方式, 详情见Overlay 文档String'tl bl'
popupTriggerType弹层触发方式

可选值:
'click', 'hover'
Enum'click'
onVisibleChange弹层展示状态变化时的回调

签名:
Function(visible: Boolean, type: String) => void
参数:
visible: {Boolean} 弹层是否隐藏和显示
type: {String} 触发弹层显示和隐藏的来源 fromTrigger 表示由trigger的点击触发; docClick 表示由document的点击触发
Functionfunc.noop
popupStyle弹层自定义样式Object-
popupClassName弹层自定义样式类String-
popupProps弹层属性Object-
followTrigger是否跟随滚动Boolean-
disabled是否禁用Booleanfalse
onChange时间值改变时的回调

签名:
Function(value: Object/String) => void
参数:
value: {Object/String} 时间对象或时间字符串
Functionfunc.noop

TimePicker.RangePicker

参数说明类型默认值
className自定义组件classString-
style自定义组件styleObject-
size尺寸,可选值smallmediumStringmedium
defaultVisible弹层初始是否可见,非受控Boolean-
visible弹层是否可见,受控Boolean-
onVisibleChange弹层显隐回调Function-
defaultValue默认值,moment或字符串数组,非受控Array-
valuemoment或字符串数组,受控Array-
onChange整体值发生变化时触发的回调方法Function-
format时间格式StringHH:mm:ss
hourStep小时选择步长Number1
minuteStep分钟选择步长Number1
secondStep秒选择步长Number1
disabledHours禁用的小时,数组Array-
disabledMinutes禁用的分钟,数组Array-
disabledSeconds禁用的秒,数组Array-
popupContainer弹层容器

签名:
Function(target: Object) => ReactNode
参数:
target: {Object} 目标节点
返回值:
{ReactNode} 容器节点
Function-
popupAlign弹层对齐方式, 详情见Overlay 文档Stringtl bl
popupTriggerType弹层触发方式可选值:click, hoverStringclick
popupStyle弹层自定义样式Object-
popupClassName弹层自定义样式类String-
popupProps透传弹层属性Object-
followTrigger是否跟随滚动Boolean-
disabled是否禁用Boolean-

ARIA and KeyBoard

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