Date range picker

Picks a relative or absolute time range.

<mm-date-range-picker name="window" label="Run window" time-zone="UTC"
  value='{"kind":"relative","preset":"last-7-days"}'></mm-date-range-picker>
<!-- Submits window=last-7-days, or window-start and window-end as ISO strings -->

Guidance

The date range picker sets the time window for run history, query audit and Insights. The trigger reads as a sentence ("Last 7 days", or "12 Oct 2026, 09:00 to 27 Oct 2026, 17:30 UTC") with the zone always shown. The popover holds relative presets on one side, which apply at once, and a custom range on the other: a calendar grid, start and end times, then Apply or Cancel. The range is marked with the selection tint, the endpoints with an ink fill and today with an underline, so nothing relies on colour alone.

Keyboard follows the WAI-ARIA date picker dialog pattern (https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/): arrows move by day and week, Page Up and Page Down by month (with Shift, by year), Home and End to the start and end of the week, Enter or Space picks the start and then the end. Arrow keys move through the presets. Escape closes without applying. Tab cycles within the open popover.

Submits ${name} with the preset key for relative ranges, or ${name}-start and ${name}-end as ISO 8601 strings for absolute ranges.

Properties

Property	Attribute	Type	Default	Description
value	value	DateRangeValue | null	null	The current range, or null for none. As an attribute, JSON such as {"kind":"relative","preset":"last-7-days"}.
presets		DateRangePreset[] | undefined		The relative presets offered. Defaults to Last 15 minutes through Last 90 days.
timeZone	time-zone	'UTC' | 'local'	'UTC'	UTC (default) or local. Times are entered and shown in this zone, and the zone is always printed.
locale	locale	string	'en-GB'	BCP 47 locale for month, weekday and date names. Weeks always start on Monday.
placeholder	placeholder	string	''	Trigger text when there is no value.
now		Date | undefined		Reference time for presets and the today marker. Defaults to the current time.
displayText		string		The trigger text: the preset label, or both instants and the zone.
label	label	string	''	Field label. Rendered above the control unless hide-label, and always the accessible name.
help	help	string	''	Help text under the control.
error	error	string	''	Error text: a sentence saying what to fix. Shows the crimson border, an icon and sets aria-invalid.
hideLabel	hide-label	boolean	false	Hides the label visually; it stays the accessible name.
optional	optional	boolean	false	Marks the field as optional, in words.
name	name	string	''	Name submitted with the form.
disabled	disabled	boolean	false	Disables the control and excludes it from submission.
required	required	boolean	false	Requires a value before the form submits.
form		HTMLFormElement | null
validity		ValidityState
validationMessage		string
willValidate		boolean
isDisabled		boolean		True when disabled directly or by a disabled ancestor fieldset.

Methods

Method	Description
show()	Opens the popover.
hide()	Closes the popover without applying the draft.
formResetCallback()	Restore the initial value when the owning form resets.

Events

Event	Detail	Description
mm-change	CustomEvent<{ value: DateRangeValue }>	The range was applied, from a preset or the Apply button.
mm-input	CustomEvent<{ start: string | null; end: string | null }>	The draft custom range changed inside the popover.
change	Event	Native change event, re-dispatched after mm-change for bind: style code.
input	InputEvent

CSS parts

Part	Description
trigger	The button that opens the popover.
popover	The popover dialog.
presets	The relative preset list.
calendar	The calendar grid.
label	The field label.
help	The helper text.
error	The error message.

Examples

Every state of mm-date-range-picker in Storybook, with keyboard and screen reader tests.