Date Range Picker
Two-month range calendar popover with hover preview, presets, min/max bounds and full keyboard navigation.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
DateRangePickerProps
Also accepts all props of Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">
| Prop | Type | Default | Description |
|---|---|---|---|
| value | DateRange | — | — |
| defaultValue | DateRange | — | — |
| onValueChange | (range: DateRange) => void | — | — |
| today | string | DEFAULT_TODAY | ISO date treated as "today" (highlighted and used by presets). |
| min | string | — | Earliest selectable ISO date |
| max | string | — | Latest selectable ISO date |
| presets | boolean | true | Show the quick-range presets |
| placeholder | string | "Pick a date range" | — |
| align | "start" | "end" | "start" | Which edge of the trigger the popover aligns to |
| disabled | boolean | false | — |
| defaultOpen | boolean | false | Opens on first render without moving focus, handy for static previews |
Install
$ npx shadcn@latest add https://chromotion.dev/r/date-range-picker.json