Date Range Picker

Pick a start and end day on a two-month calendar, or from shortcuts like “Last 7 days”.

$ pnpm dlx shadcn@latest add https://dashral.com/r/date-range-picker.json

Report period

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/date-range-picker.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/date-range-picker

Usage

example.tsx

1import { DateRangePicker } from "@/components/dashral/date-range-picker"
2
3<DateRangePicker label="Period" defaultValue={{ from: new Date(2026, 9, 1), to: new Date(2026, 9, 24) }} />

Examples

One month, another language

presets={[]} hides the shortcuts; locale formats the label.

Hotel stay

Two months, past days off, presets for common stays, and the price worked out from the nights.

Deluxe room, garden view

$128 a night

Check-in – check-out

$128 × 3 nights: $384
Taxes and fees: $42
Total: $426

API reference

DateRangePicker

Prop	Type	Default
`value / defaultValue`	`DateRange` { from, to }, controlled or initial.	—
`onValueChange`	`(value: DateRange \| undefined) => void` Called with the new value.	—
`presets`	`{ label: string; range: () => DateRange }[]` Shortcuts beside the calendar; [] hides them.	`defaultDateRangePresets`
`numberOfMonths`	`number` Months side by side.	`2`
`locale / formatOptions`	`string / Intl.DateTimeFormatOptions` How the range is written on the button.	`LocaleProvider's`
`disabledDays`	`Matcher` Days that can't be picked.	—
`disabled`	`boolean` The whole picker can't be used.	`false`
`placeholder`	`string`	`"Pick a date range"`
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, trigger, content }` Classes for each part.	—

defaultDateRangePresets

Today, Yesterday, Last 7 days, Last 30 days, This month, Last month — worked out when picked.

Keyboard

Keys	Action
`Enter`or`Space`	Open
`Tab`	Move between the shortcuts and the calendar
`Enter`	Pick a day: the first sets the start, the second the end
`Escape`	Close

Accessibility

The shortcuts are a labelled group of buttons; the calendar announces the range as it's picked.

Motion

Opens with a fade, a scale from 95%, a 2px blur clearing and a 4px slide from its trigger's side, on the spring (--duration-standard); closes faster (--duration-fast, --ease-exit). No blur with reduced motion.