Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

lgmdsmsizeenumSpecifies the height of the field, the same as mds-button: sm 28px, md 36px, lg 48px

disableddisabledbooleanDisables the range, like a disabled native input: the dates cannot be changed, from the fields or from the calendar, and are left out of the form. It disables the two slotted fields too. A disabled <fieldset> around the component does the same.

dualCalendardualCalendarbooleanEnables the linked dual-calendar range picker behavior.

hideTodayhideTodaybooleanHides the highlight on today's date in the calendar.

accessibleNamestringThe accessible name of the range: each of the two fields is named after it and after the end of the range it covers, the visible "from" and "to" labels living in this shadow root, where no IDREF of the slotted fields could reach them.

endDatestringSpecifies the end date of the range

maxstringSpecifies the max date of the range, user cannot set dates after this date

minstringSpecifies the min date of the range, user cannot set dates before this date

namestringIs needed to reference the form data after the form is submitted

startDatestringSpecifies the start date of the range

delaynumberSpecifies the delay in milliseconds before closing the calendar dropdown, if the value is 0 the dropdown will not close

Panoramica

The <mds-input-date-range> web component is the Magma Design System control for capturing a start/end date pair, composing two slotted <mds-input-date> fields with a shared pop-up mds-calendar (in range mode) and optional quick-pick presets. It is a form-associated compound parent that orchestrates its children rather than rendering its own native inputs.

Semantic Behavior

Compound parent: Expects exactly two <mds-input-date> children assigned to the start and end named slots; the host keeps both in sync as a single range - it is not meant to be used with a default (text) slot.Form association: The submitted value is a JSON string { startDate, endDate }; an empty range submits no value. On form reset it restores the start/end dates present at first load.Disabled fieldset: A disabled <fieldset> around the component disables its calendar button as disabled does, while the slotted fields, being inside the fieldset too, follow it themselves: the range cannot be changed and is left out of the form, until the fieldset is enabled.Range coercion: When both dates are valid and the end falls before the start, the end is snapped to equal the start, also for a preselection that ends before it starts, so the committed range is never inverted.Min/max guard: If max is earlier than min at load, max is clamped up to min; both bounds are forwarded to the calendar to block out-of-range selection, and to the slotted fields, which flag a date typed outside them and stop the submit; such a range is not emitted.Commit on blur: Leaving the component validates the range, syncs the form value, and - when both dates are valid - emits selection.Calendar selection: Picking a complete range in the pop-up calendar emits selection and, unless delay is 0, auto-closes the dropdown after the delay.Preselection sync: Slotted mds-input-date-range-preselection children act as quick-picks; activating one applies its range, and any external/calendar change re-evaluates which preset (if any) is marked selected; a preset matching the dates of load is marked selected from the start.Emitted events: mdsInputDateRangeValueChange fires when a full, valid range is committed (calendar pick, preset, or focus-out with two valid dates) and either bound actually changed since the last emit.Focus management: Clicking the host or either field label focuses the corresponding date input; a built-in calendar icon button, named in the page language (the lang of <html>) (“Open calendar”), toggles the calendar dropdown.Localization: The “from”/“to” field labels and the calendar honor the resolved language (el/en/es/it).

Properties & Visual Configurations

startDate / endDate are the controlled range bounds in ISO YYYY-MM-DD form; changing them externally re-syncs the slotted inputs and the calendar.min / max define the selectable window: the calendar blocks the dates outside it, and the host passes both bounds to the slotted fields, which check a typed date against them. A bound the range does not set leaves the one written on a field alone; one changed after load reaches both fields.disabled disables the range, like a disabled native input: the calendar button is disabled, a calendar left open closes, and the dates are left out of the form. It disables the two slotted fields too: at load only when it is set, so a field disabled on its own stays disabled; a change after load reaches both fields.size sets the height of the field, the same as <mds-button>: sm 28px, md 36px, lg 48px (default). Match it to the buttons next to the field, or go smaller in dense layouts (filter bars, table toolbars); the text style stays the same, the padding and the inner calendar button scale with it.delay is the auto-close grace period (ms) after a complete selection; set it to 0 to keep the calendar open until the user dismisses it manually.

Dipendenze

Usa: mds-calendar, mds-text, mds-button, mds-dropdown