material-datetime-field — @viewflow/material

Default — locale-derived 12/24h

Click the event icon to open the dialog on the calendar. The toggle in the bottom-left swaps to the time picker; OK commits both. Click inside the time portion of the field first → dialog opens directly on the time view.

24h pre-filled

Initial value 2026-05-03T14:30.

Business-hours bounded

15-minute slots, dates 2026-05-01 → 2026-05-31, time 08:00 – 17:00 applied to every day. Picker disables off-step / out-of-range cells; manual entry rejects invalid values.

Lenient manual entry

Mix date + time separators freely. Try:

2026-05-03 14:30
2026-05-03T14:30 (ISO with T)
2026-05-03 2:30 pm
05/03/2026 09:05

Form round-trip

The hidden input always carries ISO YYYY-MM-DDTHH:MM.

(submit to serialize)

Last valueChange

(none)

Sample usage

<material-datetime-field
  name="when"
  label="When"
  mode="24"
  value="2026-05-03T14:30"
  required
></material-datetime-field>

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