Date Range Picker
Accommodation booking date-range picker. Two-step check-in/checkout flow with 2-month calendar, blocked-date fencing, min/max nights, hover preview, and auto-close on completion. Composes Calendar, Popover, and Button. Exports formatDateRangeSummary — a pure helper that produces "Dec 15 – Dec 20 · 5 nights" strings for use in trigger summaries.
core/date-range-pickerInstallation
1 · Add registry to components.json
2 · Install component
Examples
Default
Booking picker with blocked dates, 2-night minimum, and 14-night maximum.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
valuereq | DateRange | — | Controlled { from?, to? } range. |
onChangereq | (value: DateRange) => void | — | Called when the range changes. |
blockedDates | (Date | BlockedDateRange)[] | — | Dates or date ranges that are unavailable for booking. |
minNights | number | 1 | Minimum stay in nights. |
maxNights | number | — | Maximum stay in nights. |
numberOfMonths | number | 2 | Number of calendar months displayed. |
minDate | Date | today | Earliest selectable date. |
maxDate | Date | — | Latest selectable date. |
checkInPlaceholder | string | "Check-in" | Trigger placeholder for check-in. |
checkOutPlaceholder | string | "Checkout" | Trigger placeholder for checkout. |
disabled | boolean | — | Disables the entire control. |
open | boolean | — | Controlled popover open state. |
onOpenChange | (open: boolean) => void | — | Called when popover open state changes. |