TimePicker
TimePicker
To select/input a time.
Importimport{ TimePicker }from"antd"; |
Sourcecomponents/time-picker |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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 | |
| 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 |
| changeOnScroll | Trigger selection when scroll the column | boolean | false | 5.14.0 |
| className | The className of picker | string | - | |
| 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 | |
| needConfirm | Need click confirm button to trigger value change | boolean | - | 5.14.0 |
| 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 | - | |
| prefix | The custom prefix | ReactNode | - | 5.22.0 |
| 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 | - | |
| variant | Variants of picker | outlined | borderless | filled | outlined | 5.13.0 |
| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. info argument is added in 4.4.0 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range:start|end }) | - | |
| 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 | - |
type DisabledTime = (now: Dayjs) => {disabledHours?: () => number[];disabledMinutes?: (selectedHour: number) => number[];disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];disabledMilliseconds?: (selectedHour: number,selectedMinute: number,selectedSecond: number,) => number[];};
Note: disabledMilliseconds is added in 5.14.0.
| 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 |
|---|---|---|---|
| activeBg | Background color when the input box is activated | string | #ffffff |
| activeBorderColor | Active border color | string | #1677ff |
| 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) |
| hoverBg | Background color when the input box hovers | string | #ffffff |
| hoverBorderColor | Hover border color | string | #4096ff |
| inputFontSize | Font size | number | 14 |
| inputFontSizeLG | Font size of large | number | 16 |
| inputFontSizeSM | Font size of small | number | 14 |
| multipleItemBg | Background color of multiple tag | string | rgba(0, 0, 0, 0.06) |
| multipleItemBorderColor | Border color of multiple tag | string | transparent |
| multipleItemBorderColorDisabled | Border color of multiple tag when disabled | string | transparent |
| multipleItemColorDisabled | Text color of multiple tag when disabled | string | rgba(0, 0, 0, 0.25) |
| multipleItemHeight | Height of multiple tag | number | 24 |
| multipleItemHeightLG | Height of multiple tag with large size | number | 32 |
| multipleItemHeightSM | Height of multiple tag with small size | number | 16 |
| multipleSelectorBgDisabled | Background color of multiple selector when disabled | string | rgba(0, 0, 0, 0.04) |
| 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, middle and small. Large is used in the form, while the medium size is the default.
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.
Passing custom class to TimePicker popup.
Bordered-less style component.
Custom prefix and suffixIcon.
value and onChange should be used together,
TimePicker will automatically determine whether to show a confirm button according to the picker property. You can also set the needConfirm property to determine whether to show a confirm button. When needConfirm is set, the user must click the confirm button to complete the selection. Otherwise, the selection will be submitted when the picker loses focus or select a time.
While part of format is omitted, the corresponding column in panel will disappear, too.
Render addon contents to time picker panel's bottom.
Use changeOnScroll and needConfirm to change the value when scrolling.
Use time range picker with TimePicker.RangePicker.
Add status to TimePicker with status, which could be error or warning.
Debug usage. Do not use in your production.
