1# Date Picker
2 
3Date picker with calendar (alpha)
4 
5**Parts:** `DatePickerRoot`, `DatePickerField`, `DatePickerInput`, `DatePickerTrigger`, `DatePickerContent`, `DatePickerCalendar`, `DatePickerHeader`, `DatePickerHeading`, `DatePickerGrid`, `DatePickerCell`, `DatePickerCellTrigger`, `DatePickerNext`, `DatePickerPrev`, `DatePickerAnchor`, `DatePickerArrow`, `DatePickerClose`
6 
7## DatePickerRoot
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` | `DateValue` | - |
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` | `DateValue` | - |
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: DateValue]` |
46| `update:open` | `[value: boolean]` |
47| `update:placeholder` | `[date: DateValue]` |
48 
49## DatePickerField
50 
51### Slots
52| Slot | Type |
53|------|------|
54| `segments` | `{ part: SegmentPart; value: string; }[]` |
55| `modelValue` | `DateValue \| undefined` |
56 
57## DatePickerInput
58 
59### Props
60| Prop | Type | Default |
61|------|------|---------|
62| `as` | `AsTag \| Component` | `"div"` |
63| `asChild` | `boolean` | - |
64| `part`* | `"day" \| "month" \| "year" \| "hour" \| "minute" \| ...` | - |
65 
66## DatePickerTrigger
67 
68### Props
69| Prop | Type | Default |
70|------|------|---------|
71| `as` | `AsTag \| Component` | `"div"` |
72| `asChild` | `boolean` | - |
73 
74## DatePickerContent
75 
76### Props
77| Prop | Type | Default |
78|------|------|---------|
79| `align` | `"start" \| "center" \| "end"` | - |
80| `alignOffset` | `number` | - |
81| `arrowPadding` | `number` | - |
82| `as` | `AsTag \| Component` | `"div"` |
83| `asChild` | `boolean` | - |
84| `avoidCollisions` | `boolean` | - |
85| `collisionBoundary` | `Element \| (Element \| null)[] \| null` | - |
86| `collisionPadding` | `number \| Partial<Record<"top" \| "right" \| "bott...` | - |
87| `disableOutsidePointerEvents` | `boolean` | - |
88| `forceMount` | `boolean` | - |
89| `hideWhenDetached` | `boolean` | - |
90| `prioritizePosition` | `boolean` | - |
91| `side` | `"top" \| "right" \| "bottom" \| "left"` | - |
92| `sideOffset` | `number` | - |
93| `sticky` | `"partial" \| "always"` | - |
94| `trapFocus` | `boolean` | - |
95| `updatePositionStrategy` | `"always" \| "optimized"` | - |
96 
97### Emits
98| Event | Payload |
99|-------|---------|
100| `closeAutoFocus` | `[event: Event]` |
101| `escapeKeyDown` | `[event: KeyboardEvent]` |
102| `focusOutside` | `[event: FocusOutsideEvent]` |
103| `interactOutside` | `[event: PointerDownOutsideEvent \| FocusOutsideE...` |
104| `openAutoFocus` | `[event: Event]` |
105| `pointerDownOutside` | `[event: PointerDownOutsideEvent]` |
106 
107## DatePickerCalendar
108 
109### Slots
110| Slot | Type |
111|------|------|
112| `date` | `DateValue` |
113| `grid` | `Grid<DateValue>[]` |
114| `weekDays` | `string[]` |
115| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` |
116| `locale` | `string` |
117| `fixedWeeks` | `boolean` |
118 
119## DatePickerHeader
120 
121### Props
122| Prop | Type | Default |
123|------|------|---------|
124| `as` | `AsTag \| Component` | `"div"` |
125| `asChild` | `boolean` | - |
126 
127## DatePickerHeading
128 
129### Props
130| Prop | Type | Default |
131|------|------|---------|
132| `as` | `AsTag \| Component` | `"div"` |
133| `asChild` | `boolean` | - |
134 
135### Slots
136| Slot | Type |
137|------|------|
138| `headingValue` | `string` |
139 
140## DatePickerGrid
141 
142### Props
143| Prop | Type | Default |
144|------|------|---------|
145| `as` | `AsTag \| Component` | `"div"` |
146| `asChild` | `boolean` | - |
147 
148## DatePickerCell
149 
150### Props
151| Prop | Type | Default |
152|------|------|---------|
153| `as` | `AsTag \| Component` | `"div"` |
154| `asChild` | `boolean` | - |
155| `date`* | `DateValue` | - |
156 
157## DatePickerCellTrigger
158 
159### Props
160| Prop | Type | Default |
161|------|------|---------|
162| `as` | `AsTag \| Component` | `"div"` |
163| `asChild` | `boolean` | - |
164| `day`* | `DateValue` | - |
165| `month`* | `DateValue` | - |
166 
167## DatePickerNext
168 
169### Props
170| Prop | Type | Default |
171|------|------|---------|
172| `as` | `AsTag \| Component` | `"div"` |
173| `asChild` | `boolean` | - |
174| `nextPage` | `((placeholder: DateValue) => DateValue)` | - |
175| `step` | `"month" \| "year"` | - |
176 
177## DatePickerPrev
178 
179### Props
180| Prop | Type | Default |
181|------|------|---------|
182| `as` | `AsTag \| Component` | `"div"` |
183| `asChild` | `boolean` | - |
184| `prevPage` | `((placeholder: DateValue) => DateValue)` | - |
185| `step` | `"month" \| "year"` | - |
186 
187## DatePickerAnchor
188 
189### Props
190| Prop | Type | Default |
191|------|------|---------|
192| `as` | `AsTag \| Component` | `"div"` |
193| `asChild` | `boolean` | - |
194| `element` | `Measurable` | - |
195 
196## DatePickerArrow
197 
198### Props
199| Prop | Type | Default |
200|------|------|---------|
201| `as` | `AsTag \| Component` | `"div"` |
202| `asChild` | `boolean` | - |
203| `height` | `number` | - |
204| `width` | `number` | - |
205 
206## DatePickerClose
207 
208### Props
209| Prop | Type | Default |
210|------|------|---------|
211| `as` | `AsTag \| Component` | `"div"` |
212| `asChild` | `boolean` | - |
213