Time picker

A time picker component allows users to select a time from a list of options.

Examples

Appending the TimePicker to the document.body may cause accessibility issues, including being unable to navigate into the menu via keyboard or other assistive technologies. Instead, appending to the "parent" is recommended.

Basic 12 hour

Basic 24 hour

Custom delimiter

Minimum/maximum times

The minTime/maxTime props restrict the options shown for the user to select from as well as trigger the invalidMinMaxErrorMessage if the user enters a time outside this range.

With seconds

Basic 24 hours with seconds

Props

TimePicker

*required
Name	Type	Default	Description
aria-label	string	'Time picker'	Accessible label for the time picker
className	string	''	Additional classes added to the time picker.
delimiter	string	':'	Character to display between the hour and minute
id	string		Id of the time picker
includeSeconds	boolean		Includes number of seconds with the chosen time and allows users to manually edit the seconds value.
inputProps	TextInputProps	{}	Additional props for input field
invalidFormatErrorMessage	string	'Invalid time format'	Error message to display when the time is provided in an invalid format.
invalidMinMaxErrorMessage	string	'Invalid time entered'	Error message to display when the time provided is not within the minTime/maxTime constriants
is24Hour	boolean	false	True if the time is 24 hour time. False if the time is 12 hour time
isDisabled	boolean	false	Flag indicating the time picker is disabled
isOpen	boolean	false	Flag to control the opened state of the time picker menu
maxTime	string \| Date	''	A time string indicating the maximum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format
menuAppendTo	HTMLElement \| (() => HTMLElement) \| 'inline' \| 'parent'	'inline'	The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}
minTime	string \| Date	''	A time string indicating the minimum value allowed. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format
onChange	( event: React.FormEvent<HTMLInputElement>, time: string, hour?: number, minute?: number, seconds?: number, isValid?: boolean ) => void		Optional event handler called each time the value in the time picker input changes.
placeholder	string	'hh:mm'	String to display in the empty time picker field as a hint for the expected time format
setIsOpen	(isOpen?: boolean) => void	() => {}	Handler invoked each time the open state of time picker updates
stepMinutes	number	30	Size of step between time options in minutes.
time	string \| Date	''	A time string. The format could be an ISO 8601 formatted date string or in 'HH{delimiter}MM' format
validateTime	(time: string) => boolean		Optional validator can be provided to override the internal time validator.
width	string	'150px'	Width of the time picker.
zIndex	number	9999	z-index of the time picker

CSS variables

Expand or collapse column	Selector	Variable	Value

Edit this page on GitHub