1# Date Range Picker
2 
3Date range picker (alpha)
4 
5**Parts:** `DateRangePickerRoot`, `DateRangePickerField`, `DateRangePickerInput`, `DateRangePickerTrigger`, `DateRangePickerContent`, `DateRangePickerCalendar`, `DateRangePickerHeader`, `DateRangePickerHeading`, `DateRangePickerGrid`, `DateRangePickerCell`, `DateRangePickerCellTrigger`, `DateRangePickerNext`, `DateRangePickerPrev`
6 
7## DateRangePickerRoot
8 
9### Props
10| Prop | Type | Default |
11|------|------|---------|
12| `as` | `AsTag \| Component` | `"div"` |
13| `asChild` | `boolean` | - |
14| `defaultOpen` | `boolean` | `false` |
15| `defaultPlaceholder` | `DateValue` | - |
16| `defaultValue` | `DateRange` | `{ start: undefined, end: undefined }` |
17| `dir` | `"ltr" \| "rtl"` | - |
18| `disabled` | `boolean` | `false` |
19| `fixedWeeks` | `boolean` | `false` |
20| `granularity` | `"day" \| "hour" \| "minute" \| "second"` | - |
21| `hideTimeZone` | `boolean` | - |
22| `hourCycle` | `12 \| 24` | - |
23| `id` | `string` | - |
24| `isDateDisabled` | `Matcher` | - |
25| `isDateUnavailable` | `Matcher` | - |
26| `locale` | `string` | `"en"` |
27| `maxValue` | `DateValue` | - |
28| `minValue` | `DateValue` | - |
29| `modal` | `boolean` | `false` |
30| `modelValue` | `DateRange` | - |
31| `name` | `string` | - |
32| `numberOfMonths` | `number` | `1` |
33| `open` | `boolean` | - |
34| `pagedNavigation` | `boolean` | `false` |
35| `placeholder` | `DateValue` | - |
36| `preventDeselect` | `boolean` | `false` |
37| `readonly` | `boolean` | `false` |
38| `required` | `boolean` | - |
39| `weekdayFormat` | `"narrow" \| "short" \| "long"` | `"narrow"` |
40| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `0` |
41 
42### Emits
43| Event | Payload |
44|-------|---------|
45| `update:modelValue` | `[date: DateRange]` |
46| `update:open` | `[value: boolean]` |
47| `update:placeholder` | `[date: DateValue]` |
48| `update:startValue` | `[date: DateValue]` |
49 
50## DateRangePickerField
51 
52### Slots
53| Slot | Type |
54|------|------|
55| `segments` | `{ start: { part: SegmentPart; value: string; }[...` |
56| `modelValue` | `DateRange` |
57 
58## DateRangePickerInput
59 
60### Props
61| Prop | Type | Default |
62|------|------|---------|
63| `as` | `AsTag \| Component` | `"div"` |
64| `asChild` | `boolean` | - |
65| `part`* | `"day" \| "month" \| "year" \| "hour" \| "minute" \| ...` | - |
66| `type`* | `"start" \| "end"` | - |
67 
68## DateRangePickerTrigger
69 
70### Props
71| Prop | Type | Default |
72|------|------|---------|
73| `as` | `AsTag \| Component` | `"div"` |
74| `asChild` | `boolean` | - |
75 
76## DateRangePickerContent
77 
78### Props
79| Prop | Type | Default |
80|------|------|---------|
81| `align` | `"start" \| "center" \| "end"` | - |
82| `alignOffset` | `number` | - |
83| `arrowPadding` | `number` | - |
84| `as` | `AsTag \| Component` | `"div"` |
85| `asChild` | `boolean` | - |
86| `avoidCollisions` | `boolean` | - |
87| `collisionBoundary` | `Element \| (Element \| null)[] \| null` | - |
88| `collisionPadding` | `number \| Partial<Record<"top" \| "right" \| "bott...` | - |
89| `disableOutsidePointerEvents` | `boolean` | - |
90| `forceMount` | `boolean` | - |
91| `hideWhenDetached` | `boolean` | - |
92| `prioritizePosition` | `boolean` | - |
93| `side` | `"top" \| "right" \| "bottom" \| "left"` | - |
94| `sideOffset` | `number` | - |
95| `sticky` | `"partial" \| "always"` | - |
96| `trapFocus` | `boolean` | - |
97| `updatePositionStrategy` | `"always" \| "optimized"` | - |
98 
99### Emits
100| Event | Payload |
101|-------|---------|
102| `closeAutoFocus` | `[event: Event]` |
103| `escapeKeyDown` | `[event: KeyboardEvent]` |
104| `focusOutside` | `[event: FocusOutsideEvent]` |
105| `interactOutside` | `[event: PointerDownOutsideEvent \| FocusOutsideE...` |
106| `openAutoFocus` | `[event: Event]` |
107| `pointerDownOutside` | `[event: PointerDownOutsideEvent]` |
108 
109## DateRangePickerCalendar
110 
111### Slots
112| Slot | Type |
113|------|------|
114| `date` | `DateValue` |
115| `grid` | `Grid<DateValue>[]` |
116| `weekDays` | `string[]` |
117| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` |
118| `locale` | `string` |
119| `fixedWeeks` | `boolean` |
120 
121## DateRangePickerHeader
122 
123### Props
124| Prop | Type | Default |
125|------|------|---------|
126| `as` | `AsTag \| Component` | `"div"` |
127| `asChild` | `boolean` | - |
128 
129## DateRangePickerHeading
130 
131### Props
132| Prop | Type | Default |
133|------|------|---------|
134| `as` | `AsTag \| Component` | `"div"` |
135| `asChild` | `boolean` | - |
136 
137### Slots
138| Slot | Type |
139|------|------|
140| `headingValue` | `string` |
141 
142## DateRangePickerGrid
143 
144### Props
145| Prop | Type | Default |
146|------|------|---------|
147| `as` | `AsTag \| Component` | `"div"` |
148| `asChild` | `boolean` | - |
149 
150## DateRangePickerCell
151 
152### Props
153| Prop | Type | Default |
154|------|------|---------|
155| `as` | `AsTag \| Component` | `"div"` |
156| `asChild` | `boolean` | - |
157| `date`* | `DateValue` | - |
158 
159## DateRangePickerCellTrigger
160 
161### Props
162| Prop | Type | Default |
163|------|------|---------|
164| `as` | `AsTag \| Component` | `"div"` |
165| `asChild` | `boolean` | - |
166| `day`* | `DateValue` | - |
167| `month`* | `DateValue` | - |
168 
169## DateRangePickerNext
170 
171### Props
172| Prop | Type | Default |
173|------|------|---------|
174| `as` | `AsTag \| Component` | `"div"` |
175| `asChild` | `boolean` | - |
176| `nextPage` | `((placeholder: DateValue) => DateValue)` | - |
177| `step` | `"month" \| "year"` | - |
178 
179## DateRangePickerPrev
180 
181### Props
182| Prop | Type | Default |
183|------|------|---------|
184| `as` | `AsTag \| Component` | `"div"` |
185| `asChild` | `boolean` | - |
186| `prevPage` | `((placeholder: DateValue) => DateValue)` | - |
187| `step` | `"month" \| "year"` | - |
188