<DateRangePicker
onStartDateChange={(date) => console.log("Start:", date)}
onEndDateChange={(date) => console.log("End:", date)}
/>Installation
Barrel
import { DateRangePicker } from "@cloudflare/kumo";Granular
import { DateRangePicker } from "@cloudflare/kumo/components/date-range-picker";Usage
DateRangePicker displays two side-by-side calendars for selecting a date range. Click a date to set the start, then click another date to set the end. The component automatically handles hover states to preview the selection.
import { DateRangePicker } from "@cloudflare/kumo";
import { useState } from "react";
export default function Example() {
const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);
return (
<DateRangePicker
onStartDateChange={setStartDate}
onEndDateChange={setEndDate}
/>
);
}Examples
Sizes
Three sizes available: sm (compact), base (default), lg (large).
Small
Base (default)
Large
<>
<DateRangePicker size="sm" onStartDateChange={...} onEndDateChange={...} />
<DateRangePicker size="base" onStartDateChange={...} onEndDateChange={...} />
<DateRangePicker size="lg" onStartDateChange={...} onEndDateChange={...} />
</>Variants
Two visual variants: default with overlay background and subtle with minimal background.
Default variant
Subtle variant
<>
<DateRangePicker variant="default" onStartDateChange={...} onEndDateChange={...} />
<DateRangePicker variant="subtle" onStartDateChange={...} onEndDateChange={...} />
</>Custom Timezone
Display a custom timezone in the footer using the timezone prop. This is display-only and does not affect date calculations.
<DateRangePicker
timezone="London, UK (GMT+0)"
onStartDateChange={...}
onEndDateChange={...}
/>Controlled with State Display
Track and display the selected date range using the callback props.
const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);
<DateRangePicker
onStartDateChange={setStartDate}
onEndDateChange={setEndDate}
/>
<div>
{startDate && endDate
? `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`
: "Select a date range"}
</div>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onStartDateChange | (date: Date | null) => void | Required | Callback fired when start date changes |
| onEndDateChange | (date: Date | null) => void | Required | Callback fired when end date changes |
| size | "sm" | "base" | "lg" | "base" | Size of the calendar |
| variant | "default" | "subtle" | "default" | Visual style variant |
| timezone | string | "New York, NY, USA (GMT-4)" | Display timezone (display only, does not affect dates) |
| className | string | - | Additional CSS classes |
Size Variants
| Size | Description |
|---|---|
| sm | Compact calendar for tight spaces |
| base | Default calendar size |
| lg | Large calendar for prominent date selection |
Behavior
Date Selection
- Click any date to set the start date
- Click another date after the start to set the end date
- Clicking a date before the current start date resets the selection
- Hover shows a preview of the potential range
Navigation
- Use arrow buttons to navigate between months
- Edit the month/year header directly by clicking and typing (e.g., "March 2025")
- Two calendars show consecutive months for easier range selection
Reset
Click "Reset Dates" in the footer to clear both start and end dates.
Accessibility
Keyboard Navigation
Day cells are focusable buttons with descriptive aria-labels including the full date and selection state.
Screen Reader Support
- Navigation buttons have aria-labels ("Previous month", "Next month")
- Day cells announce full date format (e.g., "Monday, January 15, 2024")
- Selected dates announce their role (e.g., "selected as start date", "within selected range")