Pick <Calendar> for analytics ranges and any picker where day-of-week and month context matter.
For ISO dates pasted whole or relative shorthand like 7d, use a free-form Input.
Provide <Calendar.Presets> for the common ranges (Last 7 Days, Month to Date) so users land on the right window in one click.
Pair a horizontal layout with live results next to the calendar; in narrow surfaces like a sidebar, fall back to the stacked layout.

Set min and max to the data window so users can’t pick outside the retention range.
Default to the user’s locale and timezone; never silently render UTC for a US-Pacific viewer.
Keep the trigger label as the chosen range (Apr 1 – Apr 28, 2026); don’t fall back to Pick a date once a value is committed.
Persist the selected range when the popover closes and re-opens so users can tweak the end date without re-picking the start.

Trap focus inside the popover so Tab cycles day cells and presets instead of the page behind it.
Support arrow-key day navigation, Shift + arrow for week jumps, and Page Up / Page Down for month jumps.
Announce range changes through aria-live="polite" so a screen reader hears From Apr 1 to Apr 28 after the second click.
Each preset is a real button with a Title Case label (Last 30 Days); don’t mark presets as menu items without keyboard handling.

Was this helpful?