/// Inputs
DateRangePicker
Sunken field that opens a two-month Calendar for picking a start/end range, with live hover preview and auto-close.
import { DateRangePicker } from "@protocore/pds";Basics
The trigger shows the formatted range; clicking opens two months side by side. The first click sets the start, hovering previews the range, and the second click sets the end and closes the overlay. Value is { start, end }.
In a Field, bounded & clearable
Wrap it in a Field for a label. Constrain the window with min / max, and set clearable to reset the range. The range is always emitted ordered (start ≤ end).
Start and end are inclusive.
No period selected
When to use it
Use DateRangePicker for a start/end window — a report period, a booking stay, a campaign flight. The two-month view makes cross-month ranges (e.g. a week spanning the 28th to the 3rd) selectable without paging. For a single date use DatePicker; for a keyboard-first typed entry use DateInput; when the grid should stay inline, use Calendar with the range prop directly.
Usage
Do
- Give the trigger an accessible name via a `Field` label or `aria-label`.
- Keep the default two-month layout for ranges that commonly cross a month boundary.
- Set `min` / `max` to the bookable window so invalid ranges can't be formed.
- Read the ordered `{ start, end }` from `onValueChange` rather than tracking clicks yourself.
Don't
- Don't use it for a single date — a DatePicker reads as one value, not a window.
- Don't assume the first click is always the earlier date; the component orders the range for you.
- Don't leave the trigger unlabelled when no visible field label wraps it.
- Don't shrink to one month if your ranges routinely span a boundary — paging hurts.
Accessibility
| Keys | Action |
|---|---|
| Enter / Space | Open the calendar from the focused trigger. |
| Arrow keys | Move between days across both months once open. |
| Enter | Set the start, then the end; the second selection closes the overlay. |
| Esc | Close the overlay without changing the range. |
- The overlay is a Radix Popover — portalled, dismissed on outside-click and Escape, and it restores focus to the trigger on close.
- Each month is its own `role="grid"` with a caption; the range endpoints carry `aria-selected`.
- Hover preview is a pointer nicety layered on top of full keyboard selection — it is never the only way to see the pending range.