Date Range Picker
Date Range Picker
A "From — to" picker: a button trigger showing the formatted range, opening a Popover with a two-month Calendar in range mode.
import { DateRangePicker } from "@pompeitech/vesuvius-ui";Default
With a default range
Single month
Note: the first click sets only the start date and keeps the popover open; the second click completes the range, but the popover remains open until the confirmation button is pressed. (react-day-picker's own range selection resolves a single click straight to a one-day range by default — DateRangePicker passes min={1} internally specifically to prevent that.)
API
DateRangePicker
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | { from?: Date; to?: Date } | Controlled/uncontrolled selected range. | |
onChange | (range: DateRange | undefined) => void | ||
placeholder | string | "Pick a date range" | Shown on the trigger when nothing's selected. |
dateFormat | string | "LLL d, y" | A date-fns format string, applied to each end of the range on the trigger. |
numberOfMonths | number | 2 | |
disabled | boolean | false | |
fromYear / toYear | number | Bounds for the year dropdown. | |
confirmLabel | string | "Apply" | Label for the button that confirms the selected range. |
Plus every native prop of the underlying trigger button.
Accessibility
Same keyboard model as Calendar's range mode — arrow keys move the focused day, Enter/Space commits it as the range's start or end. The selection and onChange are committed only after the confirmation button is activated.