material-time-field — @viewflow/material

Default — locale-derived 12/24h

Click the schedule icon to open the picker dialog. Pick a time and press OK; the field updates with the locale-formatted display string and the hidden name="start" input gets ISO HH:MM.

12-hour mode pre-filled

Initial value 09:30 rendered as 09:30 AM.

24-hour mode pre-filled

Initial value 14:30 rendered as 14:30.

15-minute steps + bounded

Snap to quarter-hours within business hours. Picker dial only shows valid options; manual entry rejects off-step / out-of-range values.

Lenient manual entry

Type into the field directly — separators (: . space comma), 1- or 2-digit hour/minute, AM/PM in any case, and the compact 4-digit HHMM form all parse.

24h shapes: 9:05 / 21:30 / 0905 / 9 5
12h shapes: 9:05 pm / 9:05PM / 09:05 a.m.

Form round-trip

The hidden input always carries 24h ISO. Submit and check the serialized output.

(submit to serialize)

Last valueChange

(none)

Sample usage

<material-time-field
  name="start"
  label="Start time"
  mode="24"
  value="14:30"
  required
></material-time-field>

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