TimePicker

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.

5.14.0

Hour and minute

While part of format is omitted, the corresponding column in panel will disappear, too.

Addon

Render addon contents to time picker panel's bottom.

Change on scroll

Use changeOnScroll and needConfirm to change the value when scrolling.

5.14.0

Variants

Bordered-less style component.

5.13.0

Prefix and Suffix

Custom prefix and suffixIcon.

API

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	-

DisabledTime

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.

Methods

Name	Description	Version
blur()	Remove focus
focus()	Get focus

RangePicker

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

RangeDisabledTime

type RangeDisabledTime = (
  now: Dayjs,
  type = 'start' | 'end',
) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

Design Token

Component TokenHow to use?

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	#cbe0fd
cellRangeBorderColor	Border color of cell in range when picking	string	#82b4f9
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

Global TokenHow to use?

FAQ

How to use TimePicker with customize date library like dayjs