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">. Like the date pickers, it is purely structural: FlickUI supplies no JavaScript for incrementing values, validating input, or switching AM/PM.

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