Ant Design

⌘ K

5.26.5

TimePicker

To select/input a time.

Importimport { TimePicker } from "antd";

Sourcecomponents/time-picker

Docs

Edit this page Changelog

contributors

Switch Transfer

When To Use

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

Examples

API

Common props ref：Common props

jsx

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` \| `underlined`	`outlined`	5.13.0 \| `underlined`: 5.24.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

typescript

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

typescript

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

Semantic DOM

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

Basic

Click TimePicker, and then we could select or input a time in panel.

Three Sizes

The input box comes in three sizes: large, middle and small. Large is used in the form, while the medium size is the default.

disabled

A disabled state of the TimePicker.

interval option

Show stepped options by hourStep minuteStep secondStep.

12 hours

TimePicker of 12 hours format, with default format h:mm:ss a.

Time Range Picker

Use time range picker with TimePicker.RangePicker.

Status

Add status to TimePicker with status, which could be error or warning.

Under Control

value and onChange should be used together,

Need Confirm

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.