Harmonia

Appearance

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). If the "Now" button is enabled, it will move focus to it first before looping back to the first column.
  • Shift + Tab - Moves focus to the previous column.
  • 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.

API Reference ​

Component attribute(s) ​

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

Attributes ​

x-h-time-picker ​

AttributeValuesRequiredDescription
data-sizesm
default		falseChanges the size of the time picker.

x-h-time-picker-popup ​

AttributeValuesRequiredDescription
data-label-hoursstringfalseSets the aria-label attribute value for the hours list. Default value is Select time.
data-label-minutesstringfalseSets the aria-label attribute value for the minutes list. Default value is Select minute.
data-label-secondsstringfalseSets the aria-label attribute value for the seconds list. Default value is Select second.
data-label-meridiemstringfalseSets the aria-label attribute value for the meridiem list. Default value is Select meridiem.
data-label-nowstringfalseLabel for the button that sets the current time as selected. Default value is Now.
data-label-okstringfalseLabel for the button that sets confirms and closes the popup. Default value is OK.
data-alignbottom-start
bottom
bottom-end
right-start
right
right-end
left-start
left
left-end
top-start
top
top-end		falseAligns the calendar popover relative to the trigger.

Modifiers ​

x-h-time-picker ​

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

Events ​

EventDescription
changeFired 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:

html
<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>
KeyValuesDescription
localestringThe 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.
secondsbooleanInclude seconds in the picker.
is12HourbooleanSet 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.

Examples ​

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

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

Invalid ​

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

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

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

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