Input date range preselection<mds-input-date-range-preselection>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
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à
selectedselectedbooleanSets the preselection date range
endstringSets the end date of the preselection
startstringSets the start date of the preselection
Panoramica
The <mds-input-date-range-preselection> web component is a compound child of <mds-input-date-range>. It renders a clickable shortcut button (a quick range like “Last 7 days” or “This month”) that, when activated, fills the parent’s date range with a predefined start/end pair instead of requiring the user to pick dates manually on the calendar.
Semantic Behavior
Compound child only: Must be placed as a direct child of <mds-input-date-range>; it auto-assigns itself to the parent’s calendar-preselection slot and is not used standalone or mixed with other child types.Click drives the parent: On click it applies its start/end range to the parent, which populates and validates the range, syncs the form value, emits the parent’s mdsInputDateRangeValueChange if the range changed, and closes the dropdown after the parent’s delay (unless it is 0).Selection is parent-managed: Choosing one preselection clears the active state on its siblings and marks the active one; the parent also re-marks a preselection as selected when the range changes to match its dates (including single-day matches where end is undefined); a range set at first load is not matched until it changes or the user leaves the component.
Properties & Visual Configurations
start (required) and end: Define the ISO date range this shortcut applies. Provide both for a true range; omit end to express a single-day preselection.selected: Reflects whether this preselection is currently the active one. Treat it as read-only in normal use - the parent sets it; do not hand-toggle it to drive selection.The default slot holds the human-readable label. Visual states (default, hover, selected) are themed through the --mds-date-range-preselection-* CSS custom properties listed in AGENTS.md; the component does not expose variant/tone props of its own.