Date & time

DateRangePicker

Two linked date inputs plus a shaded range Calendar — for booking windows, report ranges, and similar.

DateRangePicker

Preview

Booking window (min. today)

tsx

import { DateRangePicker } from "@vesture/react";

<DateRangePicker value={range} onChange={setRange} locale="en-US" />

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.

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.
weekStartsOn	0 \| 1	1	Sunday or Monday, passed through to the popover's Calendar.
locale	string	"en-US"	Drives both inputs and the Calendar.
startPlaceholder / endPlaceholder	string	—	Defaults derived from locale.
disabled	boolean	—	Disables both inputs and the calendar-trigger button.
open / onOpenChange	boolean / fn	—	Controlled popover state.