A TimePicker is used to input a time by displaying an interface the user can interact with. The TimePicker panel only support 24h clock. Setting format with:
| Format | \nExample | \nDescription | \n
|---|---|---|
H HH | \n0..23 | \nHour，24h | \n
m mm | \n0..59 | \nMinute | \n
s ss | \n0..59 | \nSecond | \n
By default, TimePicker using dayjs instance as input value, which is the suggestion way. In addition, input value as string is also supported, e.g. "12:00:00". The type of the first parameter in the callback of onChange is based on the input value.
| Param | \nDescription | \nType | \nDefault Value | \nRequired | \n
|---|---|---|---|---|
| label | \nButton text | \nReactNode | \n- | \n\n |
| size | \nSize of time picker | \n'small' | 'medium' | 'large' | \n'medium' | \n\n |
| state | \nInput state | \n'error' | 'success' | \n- | \n\n |
| hasClear | \nWhether to allow clearing time | \nboolean | \ntrue | \n\n |
| format | \nTime format | \nstring | \n'HH:mm:ss' | \n\n |
| hourStep | \nHour option step | \nnumber | \n- | \n\n |
| minuteStep | \nMinute option step | \nnumber | \n- | \n\n |
| secondStep | \nSecond option step | \nnumber | \n- | \n\n |
| renderTimeMenuItems | \nRender the selectable time list signature: params: list: list mode: mode value: value | \n( list: Array<TimeMenuListItem>, mode: TimeMenuProps['mode'], value: TimeMenuProps['value'] ) => Array<TimeMenuListItem> | \n- | \n\n |
| visible | \nPopup layer display status (controlled) | \nboolean | \n- | \n\n |
| defaultVisible | \nPopup layer default display status (uncontrolled) | \nboolean | \n- | \n\n |
| popupContainer | \nPopup layer container | \nstring | HTMLElement | ((target: HTMLElement) => HTMLElement) | \n- | \n\n |
| popupAlign | \nPopup layer alignment, see Overlay documentation | \nstring | \n'tl bl' | \n\n |
| popupTriggerType | \nPopup layer trigger type | \n'click' | 'hover' | \n'click' | \n\n |
| onVisibleChange | \nCallback when the popup layer display status changes | \n(visible: boolean, reason?: string) => void | \n- | \n\n |
| popupStyle | \nPopup layer custom style | \nCSSProperties | \n- | \n\n |
| popupClassName | \nPopup layer custom style class | \nstring | \n- | \n\n |
| popupProps | \nPopup layer property | \nPopupProps | \n- | \n\n |
| followTrigger | \nFollow trigger element | \nboolean | \n- | \n\n |
| hasBorder | \nWhether the input has border | \nboolean | \ntrue | \n\n |
| isPreview | \nIs preview | \nboolean | \n- | \n\n |
| renderPreview | \nContent of preview mode | \n(value: ValueType, props: TimePickerProps) => ReactNode | \n- | \n\n |
| inputProps | \nCustom input property | \nInputProps | \n- | \n\n |
| placeholder | \nInput hint | \nstring | \n- | \n\n |
| value | \nTime value (Dayjs object or time string, controlled state use) | \nstring | Dayjs | null | (Dayjs | null | string)[] | \n- | \n\n |
| defaultValue | \nTime init value (Dayjs object or time string, uncontrolled state use) | \nstring | Dayjs | (Dayjs | null)[] | \n- | \n\n |
| disabledHours | \nFor the disabled hours function, if it's a TimePicker.RangePicker, the function should return a number[] and it shouldn't have an index parameter. If it's not a TimePicker.RangePicker, the function should return a boolean and it should have an index parameter. | \n(index?: number) => boolean | number[] | \n- | \n\n |
| disabledMinutes | \nFor the disabled minutes function, if it's a TimePicker.RangePicker, the function should return a number[] and it shouldn't have an index parameter. If it's not a TimePicker.RangePicker, the function should return a boolean and it should have an index parameter. | \n(index?: number) => boolean | number[] | \n- | \n\n |
| disabledSeconds | \nFor the disabled seconds function, if it's a TimePicker.RangePicker, the function should return a number[] and it shouldn't have an index parameter. If it's not a TimePicker.RangePicker, the function should return a boolean and it should have an index parameter. | \n(index?: number) => boolean | number[] | \n- | \n\n |
| onChange | \nCallback when the time value changes | \n(value: ValueType) => void | \n- | \n\n |
| preset | \nRreset values, shown below the time panel. Can be object or array of object, with the following properties. properties: label: shown text name: key of React element, can be empty, and index will become key instead value: date value | \nPresetType | PresetType[] | \n- | \n\n |
| disabled | \nDisable | \nboolean | boolean[] | \nfalse | \n\n |
| Param | \nDescription | \nType | \nDefault Value | \nRequired | \n
|---|---|---|---|---|
| label | \nButton text | \nReactNode | \n- | \n\n |
| size | \nSize of time picker | \n'small' | 'medium' | 'large' | \n'medium' | \n\n |
| state | \nInput state | \n'error' | 'success' | \n- | \n\n |
| hasClear | \nWhether to allow clearing time | \nboolean | \ntrue | \n\n |
| format | \nTime format | \nstring | \n'HH:mm:ss' | \n\n |
| hourStep | \nHour option step | \nnumber | \n- | \n\n |
| minuteStep | \nMinute option step | \nnumber | \n- | \n\n |
| secondStep | \nSecond option step | \nnumber | \n- | \n\n |
| renderTimeMenuItems | \nRender the selectable time list signature: params: list: list mode: mode value: value | \n( list: Array<TimeMenuListItem>, mode: TimeMenuProps['mode'], value: TimeMenuProps['value'] ) => Array<TimeMenuListItem> | \n- | \n\n |
| visible | \nPopup layer display status (controlled) | \nboolean | \n- | \n\n |
| defaultVisible | \nPopup layer default display status (uncontrolled) | \nboolean | \n- | \n\n |
| popupContainer | \nPopup layer container | \nstring | HTMLElement | ((target: HTMLElement) => HTMLElement) | \n- | \n\n |
| popupAlign | \nPopup layer alignment, see Overlay documentation | \nstring | \n'tl bl' | \n\n |
| popupTriggerType | \nPopup layer trigger type | \n'click' | 'hover' | \n'click' | \n\n |
| onVisibleChange | \nCallback when the popup layer display status changes | \n(visible: boolean, reason?: string) => void | \n- | \n\n |
| popupStyle | \nPopup layer custom style | \nCSSProperties | \n- | \n\n |
| popupClassName | \nPopup layer custom style class | \nstring | \n- | \n\n |
| popupProps | \nPopup layer property | \nPopupProps | \n- | \n\n |
| followTrigger | \nFollow trigger element | \nboolean | \n- | \n\n |
| hasBorder | \nWhether the input has border | \nboolean | \ntrue | \n\n |
| isPreview | \nIs preview | \nboolean | \n- | \n\n |
| renderPreview | \nContent of preview mode | \n(value: ValueType, props: TimePickerProps) => ReactNode | \n- | \n\n |
| inputProps | \nCustom input property | \nInputProps | \n- | \n\n |
| disabledHours | \nFor the disabled hours function, if it's a TimePicker.RangePicker, the function should return a number[] and it shouldn't have an index parameter. If it's not a TimePicker.RangePicker, the function should return a boolean and it should have an index parameter. | \n(index?: number) => boolean | number[] | \n- | \n\n |
| disabledMinutes | \nFor the disabled minutes function, if it's a TimePicker.RangePicker, the function should return a number[] and it shouldn't have an index parameter. If it's not a TimePicker.RangePicker, the function should return a boolean and it should have an index parameter. | \n(index?: number) => boolean | number[] | \n- | \n\n |
| disabledSeconds | \nFor the disabled seconds function, if it's a TimePicker.RangePicker, the function should return a number[] and it shouldn't have an index parameter. If it's not a TimePicker.RangePicker, the function should return a boolean and it should have an index parameter. | \n(index?: number) => boolean | number[] | \n- | \n\n |
| disabled | \nDisable | \nboolean | boolean[] | \nfalse | \n\n |
| placeholder | \nInput hint | \nstring | string[] | \n- | \n\n |
| value | \nTime value (Dayjs object or time string, controlled state use) | \nArray<ConfigType> | \n- | \n\n |
| defaultValue | \nTime init value (Dayjs object or time string, uncontrolled state use) | \nArray<ConfigType> | \n- | \n\n |
| onChange | \nCallback when the time value changes | \n(value: Array<Dayjs>) => void | \n- | \n\n |
| onOk | \nCallback when the ok button is clicked | \n(value: Array<Dayjs>) => void | \n- | \n\n |
| preset | \nRreset values, shown below the time panel. Can be object or array of object, with the following properties. properties: label: shown text name: key of React element, can be empty, and index will become key instead value: date value | \nPresetType[] | \n- | \n\n |
| 按键 | \n说明 | \n
|---|---|
| Enter | \nOpen time select popup | \n
| Esc | \nClose time select popup | \n
| Up | \nInput previous seconds （if disabledMinutes={true} is previous minutes or previous hours） | \n
| Down | \nInput next seconds （if disabledMinutes={true} is next minutes or next hours） | \n
| Page Up | \nInput previous minutes | \n
| Page Down | \nInput next minutes | \n
| Alt + Page Up | \nInput previous hours | \n
| Alt + Page Down | \nInput next hours | \n