DateRangePicker

Report period with presets

Report period

2026-10-06 to 2026-11-04; at most 366 days.

import { useState } from 'react';
import { Field, FieldLabel, FieldDescription } from '@rookcom/monarch-react';
import { DateRangePicker, type DateRange } from '@rookcom/monarch-react/scheduling';

const TODAY = '2026-11-04';

function ReportRange() {
  const [value, setValue] = useState<DateRange | null>({ start: '2026-10-06', end: '2026-11-04' });
  return (
    <Field>
      <FieldLabel>Report period</FieldLabel>
      <DateRangePicker
        locale="en-GB"
        today={TODAY}
        max={TODAY}
        maxDays={366}
        presets={[
          { label: 'Last 7 days', lastDays: 7 },
          { label: 'Last 30 days', lastDays: 30 },
          { label: 'Last 90 days', lastDays: 90 },
          { label: 'This month', months: 0 },
          { label: 'Last month', months: -1 },
        ]}
        value={value}
        onValueChange={setValue}
      />
      <FieldDescription>
        {value ? `${value.start} to ${value.end}` : 'No period'}; at most 366 days.
      </FieldDescription>
    </Field>
  );
}

<ReportRange />

Usage examples

Leave with a minimum length

import { Field, FieldLabel } from '@rookcom/monarch-react';
import { DateRangePicker } from '@rookcom/monarch-react/scheduling';

const TODAY = '2026-11-04';

<Field>
  <FieldLabel>Leave</FieldLabel>
  <DateRangePicker
    locale="en-GB"
    today={TODAY}
    min={TODAY}
    minDays={2}
    defaultValue={{ start: '2026-11-12', end: '2026-11-12' }}
  />
</Field>

Compact filter

import { DateRangePicker } from '@rookcom/monarch-react/scheduling';

const TODAY = '2026-11-04';

<DateRangePicker
  aria-label="Created"
  size="sm"
  locale="en-US"
  today={TODAY}
  defaultValue={{ start: '2026-11-01', end: '2026-11-30' }}
/>

Purpose

Picks a period such as a report range, a sprint, leave or a filter on created and due dates. Both ends can be typed in the locale’s format or picked on a calendar that previews the range as the pointer or focus moves; presets cover common periods. The value is { start, end }, inclusive ISO dates. Import from @rookcom/monarch-react/scheduling.

Use when

Report and analytics periods with presets (Last 7 days, Last month).
Filtering lists by a created, due or updated date range.
Booking a span of days (leave, sprints, campaigns) with a minimum or maximum length.

Avoid when

Only a few fixed periods and no custom range: use SegmentedControl.
Two unrelated dates (a start date and a separate review date): use two DatePickers.

Design principles

One control for one period: a single box with two inputs, one calendar, one error.
The range is only committed when it is complete and valid, so filters never run on half a range.
The calendar previews the range before the second click, and blocks days that would break the length limits.
Two months where there is room, one on phones.

API reference

import { DateRangePicker } from '@rookcom/monarch-react/scheduling';

Export	Kind	Rendering	Root class
`DateRangePicker`	component	client	`.mn-date-range-picker`

The ref goes to the root role="group" element.

startName and endName add hidden inputs for form submission.

Generated from the TypeScript declarations of packages/react/src/components/search/date-range-picker.

Properties

value/onValueChange (controlled) or defaultValue; onValueChange receives a complete { start, end } or null.

Presets: { lastDays } (ending today), { nextDays } (starting today), { months } (0 = this calendar month, -1 = last), or a fixed { range }. Presets are clipped to min and max (with max today, “This month” is month to date) and disabled when what is left breaks the limits.

minDays/maxDays count both ends: Monday to Sunday is 7 days.

onValidationChange reports a date error, end-before-start, too-short, too-long or null.