Skip to content
quartiledocsv0.1
GitHub

DateRangePicker

Preview

A trigger that shows the range and its length, opening presets and a month grid.

Example

// The sample data ends on Oct 6, 2026, so presets are relative to that day.
const TODAY = new Date(2026, 9, 6);

const [range, setRange] = useState<DateRange | null>({
  start: new Date(2026, 8, 7),
  end: new Date(2026, 9, 6),
});

<DateRangePicker label="Period" value={range} onChange={setRange} today={TODAY} />

Usage

A DateRange is { start, end }, both Dates, inclusive; times of day are ignored. Picking a preset or completing a range applies it and closes. The default presets are Last 7 days, Last 30 days, Last quarter and Year to date, relative to today (now, by default). Pass your own:

const presets: DatePreset[] = [
  { label: 'Last 14 days', range: (today) => ({ start: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 13), end: today }) },
  { label: 'September', range: { start: new Date(2026, 8, 1), end: new Date(2026, 8, 30) } },
];

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

formatRange and rangeLength format a range and count its days. Calendar is the month grid on its own.

Props

DateRangePicker

PropTypeDefaultDescription
valueDateRange | null——
defaultValueDateRange | nullnull—
onChange(range: DateRange) => void——
presetsDatePreset[]DEFAULT_DATE_PRESETSQuick ranges listed beside the calendar, followed by "Custom". Defaults to Last 7 days, Last 30 days, Last quarter and Year to date relative to today. Pass [] to hide the list.
minDate——
maxDate——
todayDate—Reference day for relative presets and the calendar's today mark. Defaults to now.
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 61—
placeholderstring'Select dates'—
showDurationbooleantrueShow the day count ("30 days") at the right of the trigger. Default true.
labelReactNode——
hintReactNode——
errorReactNode——
size'sm' | 'md' | 'lg'InputSize'md'—
disabledboolean——
openboolean——
defaultOpenbooleanfalse—
onOpenChange(open: boolean) => void——
placement'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'left-start'Placement'bottom-start'—
classNamestring——
styleCSSProperties——
aria-labelstring—Accessible name when there is no visible label.

DatePreset

PropTypeDefaultDescription
labelrequiredstring——
rangerequiredDateRange | ((today: Date) => DateRange)—A fixed range, or a function of "today" so presets stay current.

DateRange

PropTypeDefaultDescription
startrequiredDate——
endrequiredDate——

Accessibility

  • The trigger is a button that announces the current range; name it with label or aria-label.
  • In the month grid, arrow keys move by day and week, Home and End go to the ends of the week, Page Up and Page Down move by month (Shift: by year), and Escape closes.
Report an issueBuilt Oct 21, 2026