To select/input a time.
By clicking the input box, you can select a time from a popup panel.
Common props ref：Common props
import dayjs from 'dayjs';import customParseFormat from 'dayjs/plugin/customParseFormat'dayjs.extend(customParseFormat)<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| allowClear | Customize clear icon | boolean | { clearIcon?: ReactNode } | true | 5.8.0: Support object type |
| autoFocus | If get focus when component mounted | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| cellRender | Custom rendering function for picker cells | (current: number, info: { originNode: React.ReactElement, today: dayjs, range?: 'start' | 'end', subType: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 |
| changeOnBlur | Trigger change when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
| className | The className of picker | string | - | |
| clearIcon | The custom clear icon | ReactNode | - | |
| defaultValue | To set default time | dayjs | - | |
| disabled | Determine whether the TimePicker is disabled | boolean | false | |
| disabledTime | To specify the time that cannot be selected | DisabledTime | - | 4.19.0 |
| format | To set the time format | string | HH:mm:ss | |
| getPopupContainer | To set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - | |
| hideDisabledOptions | Whether hide the options that can not be selected | boolean | false | |
| hourStep | Interval between hours in picker | number | 1 | |
| inputReadOnly | Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
| minuteStep | Interval between minutes in picker | number | 1 | |
| open | Whether to popup panel | boolean | false | |
| placeholder | Display when there's no value | string | [string, string] | Select a time | |
| placement | The position where the selection box pops up | bottomLeft bottomRight topLeft topRight | bottomLeft | |
| popupClassName | The className of panel | string | - | |
| popupStyle | The style of panel | CSSProperties | - | |
| renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => ReactNode | - | |
| secondStep | Interval between seconds in picker | number | 1 | |
| showNow | Whether to show Now button on panel | boolean | - | 4.4.0 |
| size | To determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px | large | middle | small | - | |
| status | Set validation status | 'error' | 'warning' | 'success' | 'validating' | - | 4.19.0 |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| use12Hours | Display as 12 hours format, with default format h:mm:ss a | boolean | false | |
| value | To set time | dayjs | - | |
| onChange | A callback function, can be executed when the selected time is changing | function(time: dayjs, timeString: string): void | - | |
| onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - | |
| onSelect | A callback function, executes when a value is selected | function(time: dayjs): void | - |
type DisabledTime = (now: Dayjs) => {disabledHours?: () => number[];disabledMinutes?: (selectedHour: number) => number[];disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];};
| Name | Description | Version |
|---|---|---|
| blur() | Remove focus | |
| focus() | Get focus |
Same props from RangePicker of DatePicker. And includes additional props:
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| disabledTime | To specify the time that cannot be selected | RangeDisabledTime | - | 4.19.0 |
| order | Order start and end time | boolean | true | 4.1.0 |
type RangeDisabledTime = (now: Dayjs,type = 'start' | 'end',) => {disabledHours?: () => number[];disabledMinutes?: (selectedHour: number) => number[];disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];};
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| activeBorderColor | Active border color | string | #4096ff |
| activeShadow | Box-shadow when active | string | 0 0 0 2px rgba(5, 145, 255, 0.1) |
| addonBg | Background color of addon | string | rgba(0, 0, 0, 0.02) |
| cellActiveWithRangeBg | Background color of cell in range | string | #e6f4ff |
| cellBgDisabled | Background color of disabled cell | string | rgba(0, 0, 0, 0.04) |
| cellHeight | Height of cell | number | 24 |
| cellHoverBg | Background color of cell hover state | string | rgba(0, 0, 0, 0.04) |
| cellHoverWithRangeBg | Background color of hovered cell in range | string | #c8dfff |
| cellRangeBorderColor | Border color of cell in range when picking | string | #7cb3ff |
| cellWidth | Width of cell | number | 36 |
| errorActiveShadow | Box-shadow when active in error status | string | 0 0 0 2px rgba(255, 38, 5, 0.06) |
| hoverBorderColor | Hover border color | string | #4096ff |
| paddingBlock | Vertical padding of input | number | 4 |
| paddingBlockLG | Vertical padding of large input | number | 7 |
| paddingBlockSM | Vertical padding of small input | number | 0 |
| paddingInline | Horizontal padding of input | number | 11 |
| paddingInlineLG | Horizontal padding of large input | number | 11 |
| paddingInlineSM | Horizontal padding of small input | number | 7 |
| presetsMaxWidth | Max width of preset area | number | 200 |
| presetsWidth | Width of preset area | number | 120 |
| textHeight | Height of cell text | number | 40 |
| timeCellHeight | Height of time cell | number | 28 |
| timeColumnHeight | Height of time column | number | 224 |
| timeColumnWidth | Width of time column | number | 56 |
| warningActiveShadow | Box-shadow when active in warning status | string | 0 0 0 2px rgba(255, 215, 5, 0.1) |
| withoutTimeCellHeight | Height of decade/year/quarter/month/week cell | number | 66 |
| zIndexPopup | z-index of popup | number | 1050 |
Click TimePicker, and then we could select or input a time in panel.
The input box comes in three sizes. large is used in the form, while the medium size is the default.
While part of format is omitted, the corresponding column in panel will disappear, too.
Render addon contents to time picker panel's bottom.
Use time range picker with TimePicker.RangePicker.
Add status to TimePicker with status, which could be error or warning.
value and onChange should be used together,
A disabled state of the TimePicker.
Show stepped options by hourStep minuteStep secondStep.
TimePicker of 12 hours format, with default format h:mm:ss a.
Bordered-less style component.
