Date Range Picker
Calendar-based range selection.
Usage
Two segmented fields plus a range calendar, sharing one value. Put the Trigger in the end Input, after its segments.
Stay dates
01102026
01142026
Show two months
Set numberOfMonths=2 for most range pickers. A stay that crosses a month
boundary is the common case, and one month forces the user to page back and forth just to see both
ends of their own selection.
Name the Root
Like the range field, the range picker's group carries no accessible name of its own.
Pass aria-labelledby pointing at your Label's id, or aria-label. Without it the field announces as an anonymous group.
Almost entirely reused
Only Root, Trigger and Calendar are specific to this picker. The rest comes from components you
already have:
Label,Input→ Date Range Field (Input takes the requiredtype)Segment→ Date FieldContent→ Date Picker — literally the same panel- the calendar chrome → Calendar
Cell,Day→ Range Calendar, since they carry the range states
Props
DateRangePicker.Root — value, placeholder and open are bindable.
| Prop | Type | Default |
|---|---|---|
value The selected range. Bindable. | { start: DateValue | undefined; end: DateValue | undefined } | — |
onValueChange Called when the range changes. | (value: DateRange) => void | — |
open Whether the calendar popover is open. Bindable. | boolean | false |
onOpenChange | (open: boolean) => void | — |
placeholder The month on screen. Bindable. | DateValue | — |
minValue | DateValue | — |
maxValue | DateValue | — |
minDays Smallest number of days the range may span. | number | — |
maxDays Largest number of days the range may span. | number | — |
excludeDisabled Refuse a range that would straddle an unavailable date. | boolean | — |
isDateUnavailable | (date: DateValue) => boolean | — |
isDateDisabled | (date: DateValue) => boolean | — |
granularity | 'day' | 'hour' | 'minute' | 'second' | 'day' |
locale BCP-47 locale. Drives the fields' segment order and the calendar's month names and first day of week. | string | 'en' |
calendarLabel What this picker is FOR. Bits defaults it to the literal word "Event", so leaving it unset announces "Event January 2026". | string | 'Event' |
numberOfMonths | number | 1 — two is usually right for a range, so both ends are visible. |
name | string | — |
required | boolean | false |
disabled | boolean | false |
readonly | boolean | false |
class Extra classes merged onto the root. | string | — |
children | Snippet | — |