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:

Demos

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

Props

The following table outlines the props for the Timepicker component:

NameTypeDefaultDescription
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.

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.
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.

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 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

Enables strict date validation mode. When enabled, invalid values are prevented or auto-corrected.

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.

zIndex
number
1000

Sets the z-index value for the dropdown popup, controlling its stacking order relative to other elements on the page.

Events

The following table outlines the events for the Timepicker component:

NameTypeDescription
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.