Range PickerPro

A date button that widens into its range panel: presets beside one or two months, a range that glides to its new days, and Apply.

Installation

When to use

The dates of a report or a dashboard: a preset in one click (Last 7 days, This quarter), any range in two.
Where the range matters at a glance: the band shows its length across the weeks while you pick.

When not to use

One date: a Date Picker picks it with less.
A date in a form among other fields: the kit's Date Range Picker sits in a form more quietly.

Usage

Range Picker with your own data: a whole component you can paste as a page.

example.tsx

1"use client"
2
3import { RangePicker } from "@/components/dashral/pro/range-picker"
4
5import { useState } from "react"
6
7export default function ReportDates() {
8  const [range, setRange] = useState<{ from: Date; to: Date } | null>(null)
9  return <RangePicker value={range} onValueChange={setRange} />
10}

API reference

RangePicker

A date button that widens into a range panel: presets, one or two months with a range that glides to its new days, and Apply. Arrows move by day and week, Page Up and Page Down by month, Enter picks, Escape cancels.

Prop	Type	Default
`value`	`DateRange \| null`	—
`defaultValue`	`DateRange \| null`	`null`
`onValueChange`	`(range: DateRange \| null) => void`	—
`presets`	`RangePreset[]` Ranges one click away; the usual ones by default (Today, Last 7 days…). An empty list hides them.	`sample`
`placeholder`	`string` The button's words while nothing is picked; "Pick dates" by default.	`"Pick dates"`
`min`	`Date` No day before / after these.	—
`max`	`Date`	—
`weekStartsOn`	`number` 0 Sunday (default) to 6 Saturday.	`0`
`locale`	`string` For the dates' names and format; the page's language by default.	—
`side`	`"bottom" \| "top"`	`"bottom"`
`align`	`"start" \| "end"`	`"start"`
`className`	`string`	—
`classNames`	`RangePickerClassNames`	—

type DateRange

Prop	Type	Default
`from`	`Date`	—
`to`	`Date`	—

type RangePreset

Prop	Type	Default
`label`	`string`	—
`range`	`(today: Date) => DateRange` The range it picks, from today.	—

type RangePickerClassNames

Prop	Type	Default
`root`	`string`	—
`button`	`string`	—
`panel`	`string`	—

Keyboard

Keys	Action
`Tab`	Reach the button, then the presets, the days and Apply
`Enter`or`Space`	Open it; on a day, pick it (first day, then last)
`←`or`→`	The day before or after
`↑`or`↓`	The same day a week before or after; in the presets, the one above or below
`Home`or`End`	The start or end of the week
`Page Up`or`Page Down`	The month before or after (with Shift, the year)
`Esc`	Cancel and close; the focus returns to the button

Accessibility

The button says it opens a dialog and whether it's open; the panel is a dialog named Pick dates.
Each month is a grid named by its month; each day is a button named in full ("Monday, November 3, 2026") with one tab stop, today marked aria-current and days in the range aria-selected.
The months' names and the range's length are live regions; nothing outside changes until Apply.

Motion

As Command Button opens: the button widens into the panel (0.42 s) and shrinks back onto it, the two crossfading as its words change to the new dates.
The range is a band in each week that glides to its new first and last day (0.32 s) as a preset or a pick changes it; months slide the way you go.
Smooth tweens on [0.4, 0, 0.2, 1], never springs, except the small press on Apply. With reduced motion it only fades.