stimulus-zag

Appearance

Time Picker ​

A time picker with hour/minute/(second)/period columns. Column cells are dynamic, so you mark each column with data-unit and provide a cell <template>.

html
<div
  data-controller="zag-time-picker"
  data-part="root"
  data-zag-time-picker-value-value="09:30"
  class="relative inline-block"
>
  <div data-part="control" class="flex">
    <input
      data-part="input"
      placeholder="HH:MM"
      class="border-input bg-popover focus:ring-ring/50 rounded-l-lg border px-3 py-2 text-sm focus:outline-none focus:ring-2"
    />
    <button
      data-part="trigger"
      class="border-input hover:bg-accent rounded-r-lg border border-l-0 px-3"
      aria-label="Open time picker"
    >
      🕐
    </button>
  </div>
  <div data-part="positioner">
    <div
      data-part="content"
      hidden
      class="border-border bg-popover z-50 mt-1 flex h-48 gap-1 overflow-hidden rounded-lg border p-1 shadow-lg"
    >
      <div data-part="column" data-unit="hour" class="flex flex-col gap-0.5 overflow-y-auto"></div>
      <div
        data-part="column"
        data-unit="minute"
        class="flex flex-col gap-0.5 overflow-y-auto"
      ></div>
      <div data-part="column" data-unit="period" class="flex flex-col gap-0.5"></div>
    </div>
  </div>
  <template data-zag-time-picker-target="cellTemplate">
    <button
      data-part="cell"
      class="hover:bg-accent data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground rounded px-3 py-1 text-sm"
    ></button>
  </template>
</div>

Parts ​

root, label, control, input, trigger, clear-trigger, positioner, content, column, cell, spacer.

Targets: cellTemplate. Columns carry data-unit (hour/minute/second/period).

Values ​

AttributeTypeDefaultDescription
data-zag-time-picker-value-valueString""Initial time ("HH:mm").
data-zag-time-picker-allow-seconds-valueBooleanfalseInclude a seconds column.
data-zag-time-picker-open-valueBooleanfalseOpen by default.
data-zag-time-picker-name-valueString""name for form submission.
data-zag-time-picker-disabled-valueBooleanfalseDisable the picker.
data-zag-time-picker-read-only-valueBooleanfalseRead-only.

Events ​

Emits zag-time-picker:change ({ value }, 24-hour) and :open-change.

Programmatic control ​

value (getter, 24-hour HH:mm:ss), setValue(time), open(), close(), isOpen.