1# Date Range Field
2 
3Date range input (alpha)
4 
5**Parts:** `DateRangeFieldRoot`, `DateRangeFieldInput`
6 
7## DateRangeFieldRoot
8 
9### Props
10| Prop | Type | Default |
11|------|------|---------|
12| `as` | `AsTag \| Component` | `"div"` |
13| `asChild` | `boolean` | - |
14| `defaultPlaceholder` | `DateValue` | - |
15| `defaultValue` | `DateRange` | - |
16| `dir` | `"ltr" \| "rtl"` | - |
17| `disabled` | `boolean` | `false` |
18| `granularity` | `"day" \| "hour" \| "minute" \| "second"` | - |
19| `hideTimeZone` | `boolean` | - |
20| `hourCycle` | `12 \| 24` | - |
21| `id` | `string` | - |
22| `isDateUnavailable` | `Matcher` | - |
23| `locale` | `string` | `"en"` |
24| `maxValue` | `DateValue` | - |
25| `minValue` | `DateValue` | - |
26| `modelValue` | `DateRange` | - |
27| `name` | `string` | - |
28| `placeholder` | `DateValue` | - |
29| `readonly` | `boolean` | `false` |
30| `required` | `boolean` | - |
31 
32### Emits
33| Event | Payload |
34|-------|---------|
35| `update:modelValue` | `[DateRange]` |
36| `update:placeholder` | `[date: DateValue]` |
37 
38### Slots
39| Slot | Type |
40|------|------|
41| `modelValue` | `DateRange` |
42| `segments` | `{ start: { part: SegmentPart; value: string; }[...` |
43 
44## DateRangeFieldInput
45 
46### Props
47| Prop | Type | Default |
48|------|------|---------|
49| `as` | `AsTag \| Component` | `"div"` |
50| `asChild` | `boolean` | - |
51| `part`* | `"day" \| "month" \| "year" \| "hour" \| "minute" \| ...` | - |
52| `type`* | `"start" \| "end"` | - |
53