material-date-field — @viewflow/material

Default (`picker="auto"` — docked on desktop)

Click the calendar_month icon: on ≥600px viewports the calendar drops down docked below the field — picking a date commits and closes (no OK/Cancel, typing stays available). On compact viewports the same trigger opens the modal dialog.

Forced surfaces — `picker="modal"` / `picker="docked"`

Pre-filled + bounded

Initial value 2026-05-15; calendar restricted to May 2026.

Lenient manual entry

Type into the field directly — separators (. / - space comma), 1- or 2-digit day/month, 2-digit years (00–68 → 20xx, 69–99 → 19xx), month names, omitted year (current year), and the compact 8-digit form all parse. The display string is rebuilt from the canonical ISO on commit.

Default ordering: 15.05.2026 / 15/5/26 / 15-5-26 / 15052026
Year omitted: 15.5 → today's year
Month name (any locale-listed format): 15 May 2026, 15 may 26

Form round-trip

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

(submit to serialize)

Last valueChange

(none)

Sample usage

<material-date-field
  name="due"
  label="Due date"
  value="2026-05-15"
  min="2026-01-01"
  max="2026-12-31"
  required
></material-date-field>

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