Correct and idiomatic ways to use the <mds-input-date-range-preselection> component, ordered from most common to most specialized. Patterns assume a working knowledge of the shared component rules in agents/conventions.md.

Basic Preset Range Shortcuts

Place one or more <mds-input-date-range-preselection> elements as direct children of <mds-input-date-range>. Each element needs a start date (ISO format) and a human-readable label in its default slot. The component auto-assigns itself to the parent’s calendar-preselection slot.

<mds-input-date-range name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
    Questo mese
  </mds-input-date-range-preselection>
  <mds-input-date-range-preselection start="2025-05-01" end="2025-05-31">
    Mese scorso
  </mds-input-date-range-preselection>
  <mds-input-date-range-preselection start="2025-01-01" end="2025-12-31">
    Anno corrente
  </mds-input-date-range-preselection>
</mds-input-date-range>

Single-Day Shortcut (omit end)

Omit the end attribute to create a single-day preselection. The parent matches it as active whenever its current range is a single day equal to start.

<mds-input-date-range name="data-singola">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-05">
    Oggi
  </mds-input-date-range-preselection>
</mds-input-date-range>

Multiple Preset Windows Together

Group semantically related shortcuts - short-term, medium-term, and long-term - so users can jump to the most common reporting windows without picking the dates on the calendar (the presets sit in the calendar dropdown, next to the calendar). Only one item carries selected at a time; the parent manages it automatically.

<mds-input-date-range name="finestra-report">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-05-29" end="2025-06-04">
    Ultima settimana
  </mds-input-date-range-preselection>
  <mds-input-date-range-preselection start="2025-05-01" end="2025-05-31">
    Ultimo mese
  </mds-input-date-range-preselection>
  <mds-input-date-range-preselection start="2025-01-01" end="2025-06-30">
    Ultimo semestre
  </mds-input-date-range-preselection>
  <mds-input-date-range-preselection start="2024-01-01" end="2024-12-31">
    Anno precedente
  </mds-input-date-range-preselection>
</mds-input-date-range>

Reading the Selected Value via Parent Events

Listen to the parent’s mdsInputDateRangeValueChange event to read the chosen range. The preselection component itself fires no event - the parent owns the value contract.

<mds-input-date-range id="date-range" name="periodo">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2025-06-01" end="2025-06-30">
    Questo mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

<script>
  document.getElementById('date-range').addEventListener('mdsInputDateRangeValueChange', (e) => {
    console.log(e.detail.startDate, e.detail.endDate);
  });
</script>

Styling Customization

Override the three visual states - default, hover, and selected - through the documented --mds-date-range-preselection-* CSS custom properties. Set them on the host element or a parent selector; use the semantic color roles (agents/color.md) so dark mode and themes keep working. The background and color properties take a color (rgb(var(--magma-<role>))); the three -border properties take a bare RGB triplet (var(--magma-<role>), no rgb()).

.dashboard mds-input-date-range-preselection {
  --mds-date-range-preselection-default-background: rgb(var(--magma-wash-strong) / 0.1);
  --mds-date-range-preselection-default-border: var(--magma-neutral-border);
  --mds-date-range-preselection-selected-background: rgb(var(--magma-accent-emphasis-hover));
  --mds-date-range-preselection-selected-border: var(--magma-accent-emphasis-hover);
  --mds-date-range-preselection-selected-color: rgb(var(--magma-accent-on-emphasis));
}