material-date-range-field

Date range picker — read-only field opening a modal material-calendar range; two picks define the range, the in-between band renders in secondary-container. Two hidden ISO inputs (start-name/end-name) post the Django date_from/date_to pair.

field opens a modal range calendar — first pick starts the range, hover previews the band, second pick completes it; OK is disabled until both ends are set; the ✕ clears

valueChange: —

preselected range + min/max limits (Q2 2026 only); filled variant

standalone material-calendar range embedded inline (dense) — for filter sidebars; rangeSelect fires on every pick with {start, end}

rangeSelect: {"start":"2026-07-07","end":"2026-07-16"}

RTL — the range band, caps and hover preview mirror with the reading direction

form integration — the hidden pair posts like two Django form fields

posted: —

disabled state

Sample usage (Django) 
<material-date-range-field label="Period"
                           start-name="date_from" end-name="date_to"
                           start-value="{{ form.date_from.value|date:'Y-m-d' }}"
                           end-value="{{ form.date_to.value|date:'Y-m-d' }}"
                           min="2020-01-01" clearable>
</material-date-range-field>

# request.GET/POST: date_from=2026-05-05, date_to=2026-05-18

<script>
  field.addEventListener('valueChange', (e) => e.detail);  // {start, end}
</script>