DateRangePicker

molecules

Date range picker — two-month calendar view, range selection, presets (Today, This Weekend, This Month). Keyboard navigation between dates.

ARIA Role: dialog

Demo

Demo for DateRangePicker (molecules)

Date range picker — two-month calendar view, range selection, presets (Today, This Weekend, This Month). Keyboard navigation between dates.

Props

Prop	Type	Required	Default	Description
`onChange`	`(range: DateRange \| null) => void`	Yes	`—`
`ariaLabel`	`string`	Yes	`—`

TypeScript Interface

interface DateRangePickerProps {
  value?: { from: string; to: string };
  onChange: (range: { from: string; to: string } | null) => void;
  minDate?: string;
  maxDate?: string;
  presets?: { id: string; label: string; range: () => { from: string; to: string } }[];
  ariaLabel: string;
}

Assertions (NASA Rule 5)

[type]onChange required; range dates must be ISO 8601 (NASA Rule 7)(NASA Rule 7)
[aria]role='dialog' (popover); grid uses role='grid' with aria-selected(WAI-ARIA Date Picker Dialog Pattern)

Usage

Import

import { Daterangepicker } from '@epasslive/design-system'

Basic

<Daterangepicker />

With Variants

<Daterangepicker variant="primary" size="md" />