Date Range Picker

Two-month range selection on overlay glass. Same capsule as Input and Date Picker; the day grid is the shared Calendar in range mode.

Basic

Committed value: {"from":"2026-07-01","to":"2026-07-31"}

const [range, setRange] = React.useState<DateRange>({
  from: '2026-07-01',
  to: '2026-07-31',
});

<DateRangePicker value={range} onChange={setRange} />

With a label

<DateRangePicker label="Reporting period" value={range} onChange={setRange} />

Empty

With no range set the trigger reads “Select range”. Apply is enabled for a complete range, or for an empty draft after Clear when there is a committed value to clear — a half-picked range leaves it disabled, and so does opening a picker that was already empty.

<DateRangePicker value={{ from: '', to: '' }} onChange={setRange} />

Draft, then apply

Selection is held as a draft and only committed on Apply, so onChange never fires with a half-built range. A range is only meaningful once both ends exist — committing on every click would send the consumer a range whose end is missing and refetch mid-selection. Cancel discards the draft, and reopening always restarts from the committed value.

Values are YYYY-MM-DD strings in and out, parsed and serialised as local calendar days rather than UTC. The same conversion is exported for your own code as parseLocalDate and formatWireDate — see Date utilities on the Date Picker page.