DateRangePicker

Molecule

Date range picker with start/end fields and end ≥ start validation. Also ships a TimePicker.

Preview

Select date range

Code

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

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

Time picker

Navigation