material-time-picker — @viewflow/material

12-hour mode (AM/PM)

Tap an hour on the dial → auto-advances to the minute view. Use the AM/PM toggle on the right. The keyboard icon at the bottom-left swaps to the input variant.

24-hour mode

AM/PM selector hidden. Outer ring 0–11, inner ring 12–23. The hour tile widens to 114dp.

15-minute steps (precision="00:15")

Minute dial collapses to 4 cells (0, 15, 30, 45) — taps snap to the nearest quarter; manual input rejects off-step values.

Time range (8am – 5pm)

Hours outside 08:00..17:00 are dimmed. Minutes that would land outside the bound (e.g. 17:30) also disable. AM/PM toggles reflect the available range.

Input view (start in keyboard mode)

Two number inputs (Hour, Minute) with labels below — same a11y as the spec's input variant. Toggle to dial via the clock icon.

Last valueChange

(none)

Sample usage

<material-time-picker
  value="14:30"
  mode="24"
></material-time-picker>

<script>
  document.querySelector('material-time-picker')
    .addEventListener('valueChange', e => console.log(e.detail.value));  // ISO HH:MM
</script>