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

category, group, title, description, cover, coverDark, demo

category	group	title	description	cover	coverDark	demo
Components	Data Entry	TimePicker	To select/input a time.	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

When To Use

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

Examples

Basic Under Control Three Sizes Need Confirm disabled Hour and minute interval option Addon 12 hours Change on scroll Colored Popup Time Range Picker Variants Status Prefix and Suffix Custom semantic dom styling _InternalPanelDoNotUseOrYouWillBeFired

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
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	-
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, 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, please use classNames.popup instead	string	-
popupStyle	The style of panel, please use styles.popup instead	CSSProperties	-
prefix	The custom prefix	ReactNode	-	5.22.0
previewValue	When the user selects the time hover option, the value of the input field undergoes a temporary change	false | hover	hover	6.0.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
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>	-
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

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[];
};

Semantic DOM

Design Token

FAQ

• How to use TimePicker with customize date library like dayjs