TimePicker - Ant Design

When To Use

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

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/value.tsx">Under Control</code> <code src="./demo/size.tsx">Three Sizes</code> <code src="./demo/need-confirm.tsx" version="5.14.0">Need Confirm</code> <code src="./demo/disabled.tsx">disabled</code> <code src="./demo/hide-column.tsx">Hour and minute</code> <code src="./demo/interval-options.tsx">interval option</code> <code src="./demo/addon.tsx">Addon</code> <code src="./demo/12hours.tsx">12 hours</code> <code src="./demo/change-on-scroll.tsx" version="5.14.0">Change on scroll</code> <code src="./demo/colored-popup.tsx" debug>Colored Popup</code> <code src="./demo/range-picker.tsx">Time Range Picker</code> <code src="./demo/variant.tsx" version="5.13.0">Variants</code> <code src="./demo/status.tsx">Status</code> <code src="./demo/suffix.tsx">Prefix and Suffix</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>

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
~~addon~~	Called from time picker panel to render an addon to its bottom, please use `renderExtraFooter` instead	() => ReactNode	-	-
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` \| `medium` \| `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

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

FAQ

How to use TimePicker with customize date library like dayjs