Date & time
DateRangePicker
Two linked date inputs plus a shaded range Calendar — for booking windows, report ranges, and similar.
DateRangePickerPreview
Usage
tsx
import { DateRangePicker } from "@vesture/react";
<DateRangePicker value={range} onChange={setRange} locale="en-US" />Behavior
- Start and end inputs validate against each other — start can't exceed end and vice versa.
- First calendar click sets the range start (clearing a prior end), the second sets the end, auto-swapping if it precedes the current start.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | { start: Date | null; end: Date | null } | — | Controlled / uncontrolled range. |
| onChange | (range) => void | — | Fires on range change. |
| minDate / maxDate / isDateDisabled | mixed | — | Same as Calendar. |
| locale | string | "en-US" | Drives both inputs and the Calendar. |
| startPlaceholder / endPlaceholder | string | — | Defaults derived from locale. |