Timepicker Component

The TimePicker component provides a time input with a list-based selector for choosing time values. It supports time formatting, parsing, min/max time constraints, time intervals (step), strict mode validation, and can be rendered as an inline picker, dialog-based picker, or full-screen mode on mobile devices.

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 />;
}

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

export default function App() {
       return <TimePicker />;
}

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 within the input field.
defaultValue	Date \| null	-	Specifies the default selected time value of the component.
disabled	boolean	false	Specifies whether the component is disabled or not.
editable	boolean	true	Specifies whether the input field can be edited directly. When false, only allows selection via calendar.
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.
helperText	node	-	Specifies the helper text content to display below the input.
helperTextDirection	HorizontalAlignment	'Left'	Specifies the horizontal alignment of the helper text below the input.
helperTextOnFocus	boolean	false	Specifies whether the helper text is only visible when the input is focused.
inputMask	boolean	false	Specifies whether to enable a segment-based masked input driven by the current `format` instead of a free-text input.
inputProps	Omit<InputHTMLAttributes<HTMLInputElement>>	-	Specifies additional HTML attributes to apply to the underlying input element. Values provided here can override default aria-* attributes set by the component.
itemTemplate	(time: Date) => node	-	Provides a template for displaying content within the dropdown items.
labelMode	LabelMode	'Never'	Specifies the float label behavior. Possible values: `Never` - The label will never float. `Auto` - The label floats when the input has focus, value, or placeholder. `Always` - The label always floats.
maskPlaceholder	MaskPlaceholder	-	Per-segment placeholder overrides for the mask input. Only relevant when `inputMask=true`.
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 calendar popup is open or closed.
openOnFocus	boolean	false	When true, should open the calendar popup on input focus.
pickerIcon	node	undefined	Specifies the calendar/datepicker icon rendered in the input.
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 display in the input box when no value is set.
popupSettings	PopupSettings	-	Specifies configuration for the popup, including positioning, collision handling, sizing, and layering behavior.
prefix	node	-	Specifies the icon or element to display at the beginning of the input.
readOnly	boolean	false	Specifies whether the component is in read-only mode. When enabled, users cannot change input value or open the picker.
required	boolean	false	Specifies whether the DatePicker is a required field in a form. When set to true, the component will be marked as required.
size	Size	Size.Medium	Specifies the size of the component. 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	Enables strict date validation mode. When enabled, invalid values are prevented or auto-corrected.
suffix	node	-	Specifies the icon or element to display at the end of the input.
valid	boolean	false	Overrides the validity state of the component. If valid is set, the required property will be ignored.
validationMessage	string	-	Controls the form error message of the component.
validityStyles	boolean	true	If set to false, no visual representation of the invalid state of the component will be applied.
value	Date \| null	-	Specifies the selected time value of the component.
variant	Variant	Variant.Standard	Specifies the visual style variant of the component.

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.

Timepicker Component

Usage

Demos

Props

Events

Enhance your React apps with Syncfusion components today