TimePicker

To select/input a time.

When To Use

By clicking the input box, you can select a time from a popup panel.

Examples

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
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	-
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	-

DisabledTime

type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

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
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
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

Global TokenHow to use?

FAQ

How to use TimePicker with customize date library like dayjs

To select/input a time.

When To Use

By clicking the input box, you can select a time from a popup panel.

Examples

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
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	-
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	-

DisabledTime

type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
};

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
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
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

Global TokenHow to use?

FAQ

How to use TimePicker with customize date library like dayjs

TimePickerChangelog

When To Use

Examples

API

DisabledTime

Methods

RangePicker

RangeDisabledTime

Design Token

Component TokenHow to use?

Global TokenHow to use?

FAQ

TimePickerChangelog

When To Use

Examples

API

DisabledTime

Methods

RangePicker

RangeDisabledTime

Design Token

Component TokenHow to use?

Global TokenHow to use?

FAQ

TimePicker