ant-design/components/time-picker/index.en-US.md

category	group	title	cover	coverDark	demo
Components	Data Entry	TimePicker	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*kGmGSLk_1fwAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1hDmQJIDFJQAAAAAAAAAAAAADrJ8AQ/original	cols 2

To select/input a time.

When To Use

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

Examples

Basic Under Control Three Sizes disabled Hour and minute interval option Addon 12 hours Colored Popup Time Range Picker Bordered-less Status Suffix _InternalPanelDoNotUseOrYouWillBeFired

API

---

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	Whether allow clearing text	boolean	true
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	-
clearText	The clear tooltip of icon	string	clear
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

FAQ

• How to use TimePicker with customize date library like dayjs