Common incorrect uses of <mds-input-date-range>. Each entry pairs the wrong form with the right one and a one-line reason. System-wide rules (boolean-as-string, shadow piercing, Tailwind color utilities, raw native event listening) live in agents/anti-patterns.md - they apply here too but are not repeated.

Do Not Omit the Named Slots

The host renders two named slots (start and end) and wires them together internally. Without slotted <mds-input-date> children the component has no visible inputs and no data to commit.

<!-- INCORRECT -->
<mds-input-date-range start-date="2026-01-01" end-date="2026-01-31">
</mds-input-date-range>

<!-- CORRECT -->
<mds-input-date-range start-date="2026-01-01" end-date="2026-01-31">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>

Do Not Slot Raw <input> Elements

The start and end slots expect mds-input-date children. The host calls .setValue() and .focusInput() on the assigned element; a native <input> does not expose those methods and will break internal orchestration.

<!-- INCORRECT -->
<mds-input-date-range>
  <input type="date" slot="start" />
  <input type="date" slot="end" />
</mds-input-date-range>

<!-- CORRECT -->
<mds-input-date-range>
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>

Do Not Disable the Fields Instead of the Range

Disabling the slotted fields leaves the calendar button of the range enabled, and the user can still change the dates from the calendar. Set disabled on the range: it disables its calendar button and the two fields, and leaves the dates out of the form.

<!-- INCORRECT -->
<mds-input-date-range name="period">
  <mds-input-date slot="start" disabled></mds-input-date>
  <mds-input-date slot="end" disabled></mds-input-date>
</mds-input-date-range>

<!-- CORRECT -->
<mds-input-date-range name="period" disabled>
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>

Do Not Use Non-ISO Date Strings

startDate, endDate, min, and max all require YYYY-MM-DD ISO format. Passing a locale-formatted string (e.g. "01/06/2026") is silently invalid for Luxon’s DateTime.fromISO() and leaves the range empty or unguarded.

<!-- INCORRECT -->
<mds-input-date-range start-date="01/06/2026" end-date="30/06/2026" min="01/01/2026">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>

<!-- CORRECT -->
<mds-input-date-range start-date="2026-06-01" end-date="2026-06-30" min="2026-01-01">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>

Do Not Listen to Native change or input Events

The component emits mdsInputDateRangeValueChange as a documented custom event. Native change / input events originate from inside the shadow DOM and do not bubble out reliably.

<!-- INCORRECT -->
<mds-input-date-range id="range">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>
<script>
  document.querySelector('#range').addEventListener('change', handler);
</script>

<!-- CORRECT -->
<mds-input-date-range id="range">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>
<script>
  document.querySelector('#range').addEventListener('mdsInputDateRangeValueChange', handler);
</script>

Do Not Set delay="false" to Disable Auto-Close

delay is a numeric prop, not a boolean. The string "false" is parsed as NaN, which is not 0: the dropdown then closes at once instead of staying open. Use delay="0" to keep the calendar open after selection.

<!-- INCORRECT -->
<mds-input-date-range delay="false">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>

<!-- CORRECT -->
<mds-input-date-range delay="0">
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>

Do Not Slot Preselection Elements Without the Component’s Calendar

mds-input-date-range-preselection children must be direct children of <mds-input-date-range>. Outside the component a click finds no range to apply (the preset looks for its closest mds-input-date-range); inside a wrapper div the preset is not slotted into the calendar dropdown and never shows.

<!-- INCORRECT -->
<mds-input-date-range>
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
</mds-input-date-range>
<mds-input-date-range-preselection start="2026-06-01" end="2026-06-30">
  Questo mese
</mds-input-date-range-preselection>

<!-- CORRECT -->
<mds-input-date-range>
  <mds-input-date slot="start"></mds-input-date>
  <mds-input-date slot="end"></mds-input-date>
  <mds-input-date-range-preselection start="2026-06-01" end="2026-06-30">
    Questo mese
  </mds-input-date-range-preselection>
</mds-input-date-range>

Do Not Omit name When Inside a Form

Without name the component is form-associated but submits no named field, so the date range is invisible to the server and to FormData.

<!-- INCORRECT -->
<form action="/filtra" method="get">
  <mds-input-date-range>
    <mds-input-date slot="start"></mds-input-date>
    <mds-input-date slot="end"></mds-input-date>
  </mds-input-date-range>
</form>

<!-- CORRECT -->
<form action="/filtra" method="get">
  <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>
</form>