Date Range Picker
Selects a start and an end date from a calendar popover.
Configurations
Supported configurations for this component.
States
Interaction states covered by the API and the style contract.
Configurations
4 examplesLive
With preset
JULY 2026
MTWTFSS
Single day
Open
JULY 2026
MTWTFSS
States
3 examplesTrigger hover
Rest
Trigger hover
Trigger focus visible
Rest
Trigger focus visible
Trigger open
Rest
JULY 2026
MTWTFSS
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | { start: Date, end: Date } | - | Selected date range; controlled. |
| onChange | (range: { start: Date, end: Date }, presetLabel?: string) => void | - | Called with the new range and, for preset picks, the label that produced it. |
| presetLabel | string | - | Label for the active preset shown in the trigger (for example "Last month"). |
| presets | { label: string, range: { start: Date, end: Date } }[] | - | Deterministic preset ranges shown below the day grid. |
| defaultOpen | boolean | false | Whether the calendar panel starts open (uncontrolled). |
| staticOpen | boolean | false | Pins the panel open and disables the dismissers; for a page that documents the calendar. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas