DateRangePicker

Field for picking a start/end date range, with quick presets and min/max bounds.

DateRangePicker picks a start and end date as a DateRange ({ from, to }). It is controlled via value/onChange. Offer one-click ranges with presets (each { label, range }), constrain selection with minDate/maxDate, localize labels with a date-fns locale, and render the calendar inline instead of in a popover.

Example

Preview

import { DateRangePicker, type DateRange } from '@officina/ui';
import { useState } from 'react';

function ReportRange() {
  const [range, setRange] = useState<DateRange>({ from: undefined, to: undefined });
  return (
    <DateRangePicker
      value={range}
      onChange={setRange}
      placeholder="Select a range"
      presets={[{ label: 'Last 7 days', range: { from: new Date(), to: new Date() } }]}
    />
  );
}

API

Prop	Type	Default	Description
onChange*	(value: DateRange) => void	—	Called with the new range on selection.
value*	DateRange	—	Selected range ({ from, to }).
inline	boolean	false	Render the calendar inline instead of in a popover.
locale	Locale	—	date-fns locale for labels and formatting.
maxDate	Date	—	Latest selectable date.
minDate	Date	—	Earliest selectable date.
placeholder	string	—	Placeholder for the trigger input when empty.
presets	{ label: string; range: DateRange; }[]	[]	Quick-select preset ranges shown beside the calendar.

Example

API

On this page