Time picker

The time picker (.time-picker) is a compact hour/minute/AM-PM control styled as two large numeric fields separated by a colon, plus a stacked two-button meridiem switch — a friendlier, larger-touch-target alternative to a native <input type="time">. It is fully interactive out of the box: flickui.js restricts each .time-picker-field to digits only as you type, clamps and zero-pads the value into a valid range on blur (1–12 for hour, 0–59 for minute, detected via aria-label), supports Arrow Up/Down to increment or decrement the focused field with wraparound, and toggles aria-pressed on the meridiem buttons for you on click. Any of these interactions fires flick:change with { hour, minute, meridiem }.

<div class="time-picker">
  <input class="time-picker-field" type="text" inputmode="numeric" maxlength="2" value="09" aria-label="Hour">
  <span class="time-picker-sep">:</span>
  <input class="time-picker-field" type="text" inputmode="numeric" maxlength="2" value="30" aria-label="Minute">
  <div class="time-picker-meridiem">
    <button type="button" aria-pressed="true">AM</button>
    <button type="button" aria-pressed="false">PM</button>
  </div>
</div>