Date Time Range Picker
Date Time Range Picker
A range picker for appointments, filters, and reporting periods. It combines a range calendar with independent start and end time columns. Changes are staged locally and committed only with Apply; Cancel discards the draft.
import { DateTimeRangePicker } from "@pompeitech/vesuvius-ui";Default
With a default range
24-hour format with seconds
API
DateTimeRangePicker
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | { from?: Date; to?: Date } | Controlled/uncontrolled selected range, including each endpoint's time. | |
onChange | (range: DateRange | undefined) => void | Called only after Apply. | |
placeholder | string | "Pick a date and time range" | Trigger text when no range is selected. |
dateFormat | string | date-fns format used for both endpoints. | |
hourFormat | "12" | "24" | "12" | Hour column format. |
minuteStep | number | 5 | Minute column granularity. |
showSeconds | boolean | false | Adds seconds to both endpoints. |
numberOfMonths | number | 2 | Number of calendar months shown. |
disabled | boolean | false | Disables the trigger. |
fromYear / toYear | number | Bounds for the year dropdown. | |
confirmLabel / cancelLabel | string | "Apply" / "Cancel" | Footer action labels. |
Accessibility
The trigger is a real button. The calendar keeps the keyboard behavior of react-day-picker, while each time column exposes a labeled listbox with keyboard-focusable options. The committed value does not change until Apply is activated.