React Time Picker Component API

Sets the accessible label (aria-label) of the button that clears the value.

The aria-label of the day section.

The aria-label of the hour section.

Sets the accessible label of the time selection itself, the group its parts sit in.

The aria-label of the meridiem section.

The aria-label of the minute section.

The aria-label of the month section.

Sets the accessible label (aria-label) of the button that opens the time selection.

Sets the accessible label (aria-label) of the time selection panel, which opens as a role="dialog".

The aria-label of the quarter section.

The aria-label of the second section.

Sets the accessible label of the hours column.

Sets the accessible label of the AM/PM column.

Sets the accessible label of the minutes column.

Sets the accessible label of the seconds column.

The aria-label of the week section.

The aria-label of the year section.

Adds a custom class name to the React Time Picker.

Renders the button that clears the value.

The artwork of the cleaner button. Defaults to a cross drawn on currentColor.

The element the time selection is rendered into instead of document.body. Implies portal. Inside a modal dialog it goes into the dialog instead, because the rest of the page is inert.

Replaces the DD the day section shows while it is empty.

The initial open state of an uncontrolled time selection — read once on mount.

The initial time for the uncontrolled mode. Ignored when time is set.

Toggles the disabled state.

Feedback for the current validationState — rendered only while the state is set, and styled after it. For the client-side mode, where the browser owns the state, use feedbackValid and feedbackInvalid instead.

Feedback the stylesheet reveals while the control is invalid — always rendered, so it works with client-side validation, where the browser decides the state.

Feedback the stylesheet reveals while the control is valid — always rendered, so it works with client-side validation, where the browser decides the state.

Renders a floating label inside the field — the component wraps its input in .form-floating and the text also becomes the field's accessible name.

Keeps the floating label floated and the placeholder visible while the field is empty.

The content of the panel's footer. Either a node, or a function receiving the picker's context — setTime, now, clear, reset, close, isTimeSelectable, time and disabled.

The mask layout. A string is parsed as dayjs/moment or date-fns/luxon format tokens, a function receives the locale and returns the section layout, and undefined derives the layout from the locale.

Replaces the HH (hh on a 12-hour clock) the hour section shows while it is empty.

Narrows the hours to a list, or to the ones a predicate accepts. Hours are 0 to 23 in every locale; on a 12-hour clock an hour that only one day period allows sets that period when picked.

Mark the control invalid.

Use validationState="invalid" instead — invalid is ignored when validationState is set.

Add a caption for a component.

The locale the parts are formatted in. It also decides the 12 or 24-hour split.

The latest time the user can pick: a time string such as '17:00', or a Date of which only the time of day counts. The panel disables the times after it, a time picked in the panel moves back to it, and the field rejects a later time.

Replaces the AM the meridiem section shows while it is empty.

The earliest time the user can pick: a time string such as '09:30', or a Date of which only the time of day counts. The panel disables the times before it, a time picked in the panel moves up to it, and the field rejects an earlier time.

Replaces the mm the minute section shows while it is empty.

Renders the minutes part, optionally narrowed the way hours is.

Replaces the MM the month section shows while it is empty.

Name of the value input the value is submitted under. Without it the field is not submitted with the form.

Callback fired when the validation state changes; receives 'incomplete', 'minDate', 'maxDate', 'disabledDate', or null when the value is valid or the field is empty. When one change moves both the value and the validation state, it fires after the change callback, so a value set from it replaces the one just reported.

Callback fired when the time is hidden.

Callback fired when the time is shown.

Callback fired when the time selection requests an open-state change — a dismiss gesture (Escape, a click outside) or, in uncontrolled mode, any internal toggle. In controlled mode update show yourself, or the time selection stays as it is.

Callback fired once when the value changes, whether from the field, the panel or the context methods; receives the Date the field holds, anchored to 1970-01-01 and cut to the units the field shows, or null while the field is empty or incomplete, and the formatted value.

Callback fired with undefined when the user changes the time, or the form is reset, while validationState (or the deprecated invalid/valid) is set. A given state is a verdict on the value it was given for; clear it here to let the browser's own validation show again.

The artwork of the button that opens the time selection. Defaults to a clock drawn on currentColor.

Renders the time selection through a portal: into the open <dialog> the field sits in, otherwise into document.body.

Replaces the Q the quarter section shows while it is empty.

Toggle the readonly state for the component.

When present, it specifies that the field must be filled out before submitting the form.

Replaces the ss the second section shows while it is empty.

Renders the seconds part, optionally narrowed the way hours is.

Control the open state. When set, the time selection renders what show says and dismiss gestures only call onShowChange — nothing closes until the parent flips the prop.

Sizes the control, the way .form-control-sm and .form-control-lg size a form control.

Add helper text to the component.

The controlled time — a Date or a time string like '14:30'. Pair it with onTimeChange; for the uncontrolled mode use defaultTime instead.

Display validation feedback in a styled tooltip.

Mark the control valid.

Use validationState="valid" instead — valid is ignored when validationState is set.

The validation state, rendered as the is-{state} class; 'invalid' also sets aria-invalid on every section and blocks the submit. Any custom state declared in the $form-validation-states Sass map is accepted. A field of a date range whose end is before its start draws no other state. The user's next change of the value asks to drop it through onValidationStateChange.

Controls the visibility of the time selection.

Use defaultShow / show / onShowChange instead — visible is ignored when either of them is set.

Replaces the WW the week section shows while it is empty.

Replaces the YYYY the year section shows while it is empty.