DateRangePicker

Molecule

Two-month popover for picking a start → end date range. Shares the same Calendar core as DatePicker; locale-aware, fully keyboard navigable, with min/max/disabledDates. Pixel-identical EJS sibling at modules/ui/DatePicker/DateRangePicker.ejs.

Preview

Select date range

Code

function Demo() {
  const [range, setRange] = useState<DateRange>({ start: null, end: null });
  return <DateRangePicker id="dr" label="Date range" value={range} onChange={setRange} />;
}

Preview

Booking window

Code

<DateRangePicker id="dr" label="Booking window"
  value={{ start: new Date('2026-06-01'), end: new Date('2026-06-15') }}
  onChange={setRange} locale="en" />

Preview

Meeting time

24-hour format

Code

function Demo() {
  const [t, setT] = useState('09:00');
  return <TimePicker id="tp" label="Meeting time" value={t} onChange={setT} />;
}

DateRangePicker

Date range

With value (EN locale)

Time picker