Time Picker

Allows users to select a specific time, providing a controlled and consistent input method for hours, minutes and seconds.

Usage

Use the Time Picker when users need to input or select a time value, such as setting alarms.

Keyboard Handling

The user can use the following keyboard shortcuts in order to navigate through the time picker:

• Up / Down - Moves focus to the next/previous column item.
• Tab - Moves focus to the next column (hour -> minute -> second -> day period), then to the "Now" and "OK" buttons, looping back to the first column.
• Shift + Tab - Moves focus to the previous column or button, looping from the first column to the last button. Focus stays inside the open popover.
• Right - Moves focus to the next column. Focuses the first item or the last focused/selected one.
• Left - Moves focus to the previous column. Focuses the first item or the last focused/selected one.
• Enter - Shows and moves focus the time picker popover. If already shown, selects the focused item from the first column.
• Space - Selects the focused item.
• PageUp / Home - Selects the first item in the column.
• PageDown / End - Selects the last item in the column.
• Esc - Closes the time picker popover and returns focus to the input.

API Reference

Component attribute(s)

x-h-time-picker
x-h-time-picker-input
x-h-time-picker-popup

Attributes

x-h-time-picker

Attribute	Values	Required	Description
data-size	sm default	false	Changes the size of the time picker.

x-h-time-picker-popup

Attribute	Values	Required	Description
data-label-hours	string	false	Sets the aria-label attribute value for the hours list. Default value is Select hour.
data-label-minutes	string	false	Sets the aria-label attribute value for the minutes list. Default value is Select minute.
data-label-seconds	string	false	Sets the aria-label attribute value for the seconds list. Default value is Select second.
data-label-meridiem	string	false	Sets the aria-label attribute value for the meridiem list. Default value is Select meridiem.
data-label-now	string	false	Label for the button that sets the current time as selected. Default value is Now.
data-label-ok	string	false	Label for the button that sets confirms and closes the popup. Default value is OK.
data-align	bottom-start bottom bottom-end right-start right right-end left-start left left-end top-start top top-end	false	Aligns the calendar popover relative to the trigger.

Modifiers

x-h-time-picker

Modifier	Description
table	Use when the input is inside a table

Model

When using x-model on x-h-time-picker-input, the time picker reads and writes times as HH:MM strings in 24-hour format (e.g. "13:30"). With seconds enabled, the format is HH:MM:SS (e.g. "13:30:45").

The is12Hour option only affects the popup display - the model value is always in 24-hour format regardless of the display mode.

Setting the bound model to an empty string clears the picker. The input goes blank and the popup selection is reset.

Events

Event	Description
change	Fired on the x-h-time-picker-input element when the user selects a time from the popup. The event bubbles, so a listener can be placed on the x-h-time-picker element. Read the new value from the bound model, as the input's own value holds the display text.

There is no need to use $watch to react to user selection - listen for change instead. See Listening for changes.

Configuration

You can pass a configuration object to the time picker as an expression or as a value.

Example:

<div x-h-time-picker="timeConfig">
  <input type="text" x-h-time-picker-input />
  <div x-h-time-picker-popup></div>
</div>
<script>
  Alpine.data('controller', () => ({
    timeConfig: { locale: 'en-US', seconds: false, is12Hour: true },
  }));
</script>

Key	Values	Description
locale	string	The locale of the time picker as a BCP 47 language tag. If not provided, it is taken from the page's <html lang> attribute, then the browser locale.
seconds	boolean	Include seconds in the picker.
is12Hour	boolean	Set to true to switch the popup to 12-hour display mode. The day periods (meridiem) are always displayed as AM/PM. Defaults to false. The model value remains in 24-hour format.

Validation timing

By default this control shows native-constraint errors (for example required) only after the user interacts with it or attempts to submit, not on page load. To validate on load instead, set data-validate="immediate" on a wrapping x-h-fieldset, x-h-field, or any ancestor element. Setting aria-invalid="true" yourself always shows the error immediately. See Fieldset for details.

Data Slots

Slot	Element
time-picker	x-h-time-picker
cell-input-time	x-h-time-picker.table
time-picker-input	x-h-time-picker-input
time-picker-popup	x-h-time-picker-popup

Examples

<div x-data="{ timeConfig: { seconds: true, is12Hour: true } }" x-h-time-picker="timeConfig">
  <input type="text" id="tpi-1" x-h-time-picker-input />
  <div x-h-time-picker-popup></div>
</div>

<div x-data="{ time: '13:33' }" x-h-time-picker>
  <input type="text" id="tpi-2" x-model="time" x-h-time-picker-input />
  <div x-h-time-picker-popup></div>
</div>

Listening for changes

<div x-data="{ time: '' }" x-h-time-picker @change="console.log('Selected time:', time)">
  <input type="text" id="tpi-3" x-model="time" x-h-time-picker-input />
  <div x-h-time-picker-popup></div>
</div>

With translated labels

The data-label-* attributes name the popup's lists for screen readers and set the text of its "Now" and "OK" buttons.

<div x-data="{ time: '13:33' }" x-h-time-picker>
  <input type="text" id="tpi-labels" x-model="time" x-h-time-picker-input />
  <div x-h-time-picker-popup data-label-hours="Изберете час" data-label-minutes="Изберете минути" data-label-now="Сега" data-label-ok="Готово"></div>
</div>

Small size

<div x-data="{ time: '13:33' }" x-h-time-picker data-size="sm">
  <input type="text" id="tpi-sm" x-model="time" x-h-time-picker-input />
  <div x-h-time-picker-popup></div>
</div>

Invalid

Reacts to the native invalid state or to the aria-invalid attribute.

<div x-data="{ time: '13:33' }" x-h-time-picker>
  <input type="text" id="tpi-invalid" x-model="time" x-h-time-picker-input aria-invalid="true" />
  <div x-h-time-picker-popup></div>
</div>

Disabled

Set the native disabled attribute on the inner input to disable the whole picker.

<div x-data="{ time: '13:33' }" x-h-time-picker>
  <input type="text" id="tpi-disabled" x-model="time" x-h-time-picker-input disabled />
  <div x-h-time-picker-popup></div>
</div>

Read-only

Set the native readonly attribute on the inner input. The value is shown with a muted background, and the popup cannot be opened.

<div x-data="{ time: '13:33' }" x-h-time-picker>
  <input type="text" id="tpi-readonly" x-model="time" x-h-time-picker-input readonly />
  <div x-h-time-picker-popup></div>
</div>