Timepicker Component

The TimePicker component provides a time input with a list-based selector. It supports custom formats, min/max time, step intervals, validation, strict mode, localization, item templates, and inline or dialog popup display.

Usage

To import and use the Timepicker component in your application, use the following code snippet:

import { TimePicker } from '@syncfusion/react-calendars';

export default function App() {
return <TimePicker placeholder="Choose a time" step={30} />;
}

import { TimePicker } from '@syncfusion/react-calendars';

export default function App() {
return <TimePicker placeholder="Choose a time" step={30} />;
}

Demos

Explore the demos of the React Timepicker component. Refer to this page.

Props

The following table outlines the props for the Timepicker component:

Name	Type	Default	Description
clearButton	boolean	true	Specifies whether to show the clear button in the TimePicker.
defaultValue	Date \| null	-	Specifies the default selected time value of the component.
disabled	boolean	false	Specifies whether the TimePicker component is disabled.
editable	boolean	true	Specifies whether the TimePicker allows users to edit the time value.
format	string	'h:mm a'	Specifies the format string to display the time value.
fullScreenMode	boolean	false	Specifies whether the TimePicker should display in full screen mode on mobile devices.
itemTemplate	(time: Date) => node	-	Provides a template for displaying content within the dropdown items.
labelMode	LabelMode	'Auto'	Specifies the behavior of the floating label.
maxTime	Date \| null	-	Specifies the maximum time that can be selected.
minTime	Date \| null	-	Specifies the minimum time that can be selected.
open	boolean	false	Specifies whether the TimePicker popup is open or not.
openOnFocus	boolean	false	Specifies whether the TimePicker popup should open when the input is focused.
pickerVariant	PickerVariant	PickerVariant.Auto	Specifies the display variant of the calendar popup. Inline: anchored popup near the input (both desktop and mobile) Dialog: centered dialog overlay (both desktop and mobile) Auto: desktop = Inline, mobile = Dialog
placeholder	string	-	Specifies the placeholder text to be displayed in the input element.
readOnly	boolean	false	Specifies whether the TimePicker component is in read-only mode.
required	boolean	false	Specifies whether the component is required.
size	Size	Size.Medium	Specifies the size style of the Timepicker. Options include 'Small', 'Medium' and 'Large'.
step	number	30	Specifies the time interval in minutes between two adjacent time values in the popup list.
strictMode	boolean	false	Specifies whether the TimePicker should act as a strict time selector. When enabled, the component allows selection of valid time values only.
valid	boolean	true	Specifies whether the component value is valid.
validMessage	string	-	Specifies the validation message to display when the component is valid.
validityStyles	boolean	false	Specifies whether to apply validation styles.
value	Date \| null	-	Specifies the selected time value of the component.
variant	Variant	Variant.Standard	Specifies the visual style variant of the component.
zIndex	number	1000	Specifies the z-index value of the TimePicker popup element.

Events

The following table outlines the events for the Timepicker component:

Name	Type	Description
onChange	(event: TimePickerChangeEvent) => void	Triggered when the selected time value changes.
onClose	( ) => void	Triggered when the TimePicker popup closes.
onOpen	( ) => void	Triggered when the TimePicker popup opens.