输入或选择时间的控件。
@beisen-phoenix/time-picker
简介
当用户需要输入一个时间，可以点击标准输入框，可弹出该时间面板进行选择。
API
基础
| 参数 |
说明 |
类型 |
默认值 |
是否必传 |
| placeholder |
输入框没有值时显示的提示语 |
string |
"请输入" |
否 |
| value |
指定当前选中时间 |
string（注意格式为HH:mm:ss或HH:mm） 或 moment |
无 |
否 |
| allowEmpty |
是否展示输入框清除按钮 |
boolean |
true |
否 |
| showSecond |
是否展示秒选项 |
boolean |
true |
否 |
| format |
展示的时间格式 |
string |
"HH:mm:ss" |
否 |
| use12Hours |
使用 12 小时制，为 true 时 format 默认为 h:mm:ss a |
boolean |
false |
否 |
事件
| 参数 |
说明 |
类型 |
默认值 |
是否必传 |
| onChange |
时间发生变化的回调 |
(time: moment) => void |
无 |
否 |
| onSelect |
点击最后一列时调用：时/分/秒中的某一列的数值被选中后执行的函数 |
(time: Date) => void |
无 |
否 |
| onAmPmChange |
上午下午发生变化的回调 |
(ampm) => void |
无 |
否 |
| onClear |
点击清除按钮时的回调 |
() => void |
无 |
否 |
设置间隔
| 参数 |
说明 |
类型 |
默认值 |
是否必传 |
| hourStep |
小时选项间隔 |
number |
1（1-23） |
否 |
| minuteStep |
分钟选项间隔 |
number |
1 （1-60） |
否 |
| secondStep |
秒选项间隔 |
number |
1 （1-60） |
否 |
| allowEditStep |
当输入时间间隔内的时间时是否生效 |
boolean |
false |
否 |
禁用部分时间
| 参数 |
说明 |
类型 |
默认值 |
是否必传 |
| disabledHours |
禁止选择部分小时选项 |
() => Array |
无 |
否 |
| disabledMinutes |
禁止选择部分分钟选项 |
(selectedHour) => Array |
无 |
否 |
| disabledSeconds |
禁止选择部分秒选项 |
(selectedHour, selectedMinute) => Array |
无 |
否 |
| hideDisabledOptions |
隐藏禁止选择的选项 |
boolean |
false |
否 |
多语言
| 参数 |
说明 |
类型 |
默认值 |
是否必传 |
| lang |
当前语言环境(zh_CN,en_US,zh_TW) |
string |
zh_CN |
否 |
| translation |
自定义语言包，详情见下方 |
object |
- |
否 |
扩展
| 参数 |
说明 |
类型 |
默认值 |
是否必传 |
| addon |
选择框底部显示自定义的内容 |
() => React.ReactNode |
无 |
否 |
自动聚焦
| 参数 |
说明 |
类型 |
默认值 |
是否必传 |
| visible |
当前组件是否可见 |
boolean |
无 |
否 |
| autoFocus |
是否从不可见变为可见时自动获取焦点 |
boolean |
false |
否 |
相关说明
translation
const translation = {
hour: '时',
minute: '分',
second: '秒',
placeholder: '请输入'
};