# Date Picker

URL: https://ark-ui.com/docs/components/date-picker
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/date-picker.mdx

A component that allows users to select a date from a calendar.

---

<ComponentPreview id="DatePicker" />

## Anatomy

To set up the date picker correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="date-picker" />

## Examples

Learn how to use the `DatePicker` component in your project. Let's take a look at the most basic example

<Example id="basic" />

### Controlled

Use the `value` and `onValueChange` prop to control the date picker's value.

<Example id="controlled" />

### Range Selection

To create a date picker that allows a range selection, you need to:

- Set the `selectionMode` prop to `range`.
- Render multiple inputs with the `index` prop set to `0` and `1`.

<Example id="range" />

### Multiple Months

To create a date picker that allows multiple months, you need to:

- Set the `numOfMonths` prop to the number of months you want to display.
- Use the `datePicker.getOffset({ months: 1 })` prop to offset the date picker to the next month.
- Render a `DatePicker.RangeText` component to display the range text.

<Example id="multiple-months" />

### Inline

Use the `inline` prop to display the date picker directly on the page, without a popup.

> When using the `inline` prop, omit the `Portal`, `Positioner`, and `Content` components to render the calendar inline
> within your layout.

<Example id="inline" />

### Root Provider

Use the `useDatePicker` hook to create the date picker store and pass it to the `DatePicker.RootProvider` component.
This allows you to have maximum control over the date picker programmatically.

<Example id="root-provider" />

> If you're using the `DatePicker.RootProvider` component, you don't need to use the `DatePicker.Root` component.

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether the calendar should close after the date selection is complete.
This is ignored when the selection mode is `multiple`. |
| `defaultFocusedValue` | `DateValue` | No | The initial focused date when rendered.
Use when you don't need to control the focused date of the date picker. |
| `defaultOpen` | `boolean` | No | The initial open state of the date picker when rendered.
Use when you don't need to control the open state of the date picker. |
| `defaultValue` | `DateValue[]` | No | The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s) of the date picker. |
| `defaultView` | `DateView` | No | The default view of the calendar |
| `disabled` | `boolean` | No | Whether the calendar is disabled. |
| `fixedWeeks` | `boolean` | No | Whether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6. |
| `focusedValue` | `DateValue` | No | The controlled focused date. |
| `format` | `(date: DateValue, details: LocaleDetails) => string` | No | The format of the date to display in the input. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; content: string; ... 10 more ...; positioner: string; }>` | No | The ids of the elements in the date picker. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `inline` | `boolean` | No | Whether to render the date picker inline |
| `isDateUnavailable` | `(date: DateValue, locale: string) => boolean` | No | Returns whether a date of the calendar is available. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `locale` | `string` | No | The locale (BCP 47 language tag) to use when formatting the date. |
| `max` | `DateValue` | No | The maximum date that can be selected. |
| `maxView` | `DateView` | No | The maximum view of the calendar |
| `min` | `DateValue` | No | The minimum date that can be selected. |
| `minView` | `DateView` | No | The minimum view of the calendar |
| `name` | `string` | No | The `name` attribute of the input element. |
| `numOfMonths` | `number` | No | The number of months to display. |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Function called when the focused date changes. |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the calendar opens or closes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called when the value changes. |
| `onViewChange` | `(details: ViewChangeDetails) => void` | No | Function called when the view changes. |
| `open` | `boolean` | No | The controlled open state of the date picker |
| `outsideDaySelectable` | `boolean` | No | Whether day outside the visible range can be selected. |
| `parse` | `(value: string, details: LocaleDetails) => DateValue | undefined` | No | Function to parse the date from the input back to a DateValue. |
| `placeholder` | `string` | No | The placeholder text to display in the input. |
| `positioning` | `PositioningOptions` | No | The user provided options used to position the date picker content |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `readOnly` | `boolean` | No | Whether the calendar is read-only. |
| `selectionMode` | `SelectionMode` | No | The selection mode of the calendar.
- `single` - only one date can be selected
- `multiple` - multiple dates can be selected
- `range` - a range of dates can be selected |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `startOfWeek` | `number` | No | The first day of the week.
 `0` - Sunday
 `1` - Monday
 `2` - Tuesday
 `3` - Wednesday
 `4` - Thursday
 `5` - Friday
 `6` - Saturday |
| `timeZone` | `string` | No | The time zone to use |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `DateValue[]` | No | The controlled selected date(s). |
| `view` | `DateView` | No | The view of the calendar |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | root |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | content |
| `[data-state]` | "open" | "closed" |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-placement]` | The placement of the content |
| `[data-inline]` | Present when the content is inline |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fixOnBlur` | `boolean` | No | Whether to fix the input value on blur. |
| `index` | `number` | No | The index of the input to focus. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | input |
| `[data-index]` | The index of the item |
| `[data-state]` | "open" | "closed" |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | label |
| `[data-state]` | "open" | "closed" |
| `[data-index]` | The index of the item |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**MonthSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | next-trigger |
| `[data-disabled]` | Present when disabled |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PresetTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `PresetTriggerValue` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | prev-trigger |
| `[data-disabled]` | Present when disabled |


**RangeText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseDatePickerReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**TableBody Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableBody Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-body |
| `[data-view]` | The view of the tablebody |
| `[data-disabled]` | Present when disabled |


**TableCell Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number | DateValue` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `columns` | `number` | No |  |
| `disabled` | `boolean` | No |  |
| `visibleRange` | `VisibleRange` | No |  |


**TableCellTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHead Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHead Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-head |
| `[data-view]` | The view of the tablehead |
| `[data-disabled]` | Present when disabled |


**TableHeader Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHeader Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-header |
| `[data-view]` | The view of the tableheader |
| `[data-disabled]` | Present when disabled |


**Table Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `columns` | `number` | No |  |


**Table Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table |
| `[data-columns]` |  |
| `[data-view]` | The view of the table |


**TableRow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableRow Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-row |
| `[data-disabled]` | Present when disabled |
| `[data-view]` | The view of the tablerow |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | trigger |
| `[data-placement]` | The placement of the trigger |
| `[data-state]` | "open" | "closed" |


**ViewControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ViewControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view-control |
| `[data-view]` | The view of the viewcontrol |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `view` | `DateView` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view |
| `[data-view]` | The view of the view |


**ViewTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ViewTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view-trigger |
| `[data-view]` | The view of the viewtrigger |


**YearSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether the calendar should close after the date selection is complete.
This is ignored when the selection mode is `multiple`. |
| `defaultFocusedValue` | `DateValue` | No | The initial focused date when rendered.
Use when you don't need to control the focused date of the date picker. |
| `defaultOpen` | `boolean` | No | The initial open state of the date picker when rendered.
Use when you don't need to control the open state of the date picker. |
| `defaultValue` | `DateValue[]` | No | The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s) of the date picker. |
| `defaultView` | `DateView` | No | The default view of the calendar |
| `disabled` | `boolean` | No | Whether the calendar is disabled. |
| `fixedWeeks` | `boolean` | No | Whether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6. |
| `focusedValue` | `DateValue` | No | The controlled focused date. |
| `format` | `(date: DateValue, details: LocaleDetails) => string` | No | The format of the date to display in the input. |
| `ids` | `Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; content: string; ... 10 more ...; positioner: string; }>` | No | The ids of the elements in the date picker. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `inline` | `boolean` | No | Whether to render the date picker inline |
| `isDateUnavailable` | `(date: DateValue, locale: string) => boolean` | No | Returns whether a date of the calendar is available. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `locale` | `string` | No | The locale (BCP 47 language tag) to use when formatting the date. |
| `max` | `DateValue` | No | The maximum date that can be selected. |
| `maxView` | `DateView` | No | The maximum view of the calendar |
| `min` | `DateValue` | No | The minimum date that can be selected. |
| `minView` | `DateView` | No | The minimum view of the calendar |
| `name` | `string` | No | The `name` attribute of the input element. |
| `numOfMonths` | `number` | No | The number of months to display. |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Function called when the focused date changes. |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the calendar opens or closes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called when the value changes. |
| `onViewChange` | `(details: ViewChangeDetails) => void` | No | Function called when the view changes. |
| `open` | `boolean` | No | The controlled open state of the date picker |
| `outsideDaySelectable` | `boolean` | No | Whether day outside the visible range can be selected. |
| `parse` | `(value: string, details: LocaleDetails) => DateValue | undefined` | No | Function to parse the date from the input back to a DateValue. |
| `placeholder` | `string` | No | The placeholder text to display in the input. |
| `positioning` | `PositioningOptions` | No | The user provided options used to position the date picker content |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `readOnly` | `boolean` | No | Whether the calendar is read-only. |
| `selectionMode` | `SelectionMode` | No | The selection mode of the calendar.
- `single` - only one date can be selected
- `multiple` - multiple dates can be selected
- `range` - a range of dates can be selected |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `startOfWeek` | `number` | No | The first day of the week.
 `0` - Sunday
 `1` - Monday
 `2` - Tuesday
 `3` - Wednesday
 `4` - Thursday
 `5` - Friday
 `6` - Saturday |
| `timeZone` | `string` | No | The time zone to use |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `DateValue[]` | No | The controlled selected date(s). |
| `view` | `DateView` | No | The view of the calendar |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | root |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | content |
| `[data-state]` | "open" | "closed" |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-placement]` | The placement of the content |
| `[data-inline]` | Present when the content is inline |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fixOnBlur` | `boolean` | No | Whether to fix the input value on blur. |
| `index` | `number` | No | The index of the input to focus. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | input |
| `[data-index]` | The index of the item |
| `[data-state]` | "open" | "closed" |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | label |
| `[data-state]` | "open" | "closed" |
| `[data-index]` | The index of the item |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**MonthSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'select'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | next-trigger |
| `[data-disabled]` | Present when disabled |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PresetTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `PresetTriggerValue` | Yes |  |
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | prev-trigger |
| `[data-disabled]` | Present when disabled |


**RangeText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseDatePickerReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**TableBody Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'tbody'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableBody Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-body |
| `[data-view]` | The view of the tablebody |
| `[data-disabled]` | Present when disabled |


**TableCell Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number | DateValue` | Yes |  |
| `asChild` | `(props: ParentProps<'td'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `columns` | `number` | No |  |
| `disabled` | `boolean` | No |  |
| `visibleRange` | `VisibleRange` | No |  |


**TableCellTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHead Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'thead'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHead Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-head |
| `[data-view]` | The view of the tablehead |
| `[data-disabled]` | Present when disabled |


**TableHeader Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'th'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHeader Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-header |
| `[data-view]` | The view of the tableheader |
| `[data-disabled]` | Present when disabled |


**Table Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'table'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `columns` | `number` | No |  |


**Table Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table |
| `[data-columns]` |  |
| `[data-view]` | The view of the table |


**TableRow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'tr'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableRow Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-row |
| `[data-disabled]` | Present when disabled |
| `[data-view]` | The view of the tablerow |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | trigger |
| `[data-placement]` | The placement of the trigger |
| `[data-state]` | "open" | "closed" |


**ViewControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ViewControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view-control |
| `[data-view]` | The view of the viewcontrol |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `view` | `DateView` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view |
| `[data-view]` | The view of the view |


**ViewTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ViewTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view-trigger |
| `[data-view]` | The view of the viewtrigger |


**YearSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'select'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether the calendar should close after the date selection is complete.
This is ignored when the selection mode is `multiple`. |
| `defaultFocusedValue` | `DateValue` | No | The initial focused date when rendered.
Use when you don't need to control the focused date of the date picker. |
| `defaultOpen` | `boolean` | No | The initial open state of the date picker when rendered.
Use when you don't need to control the open state of the date picker. |
| `defaultValue` | `DateValue[]` | No | The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s) of the date picker. |
| `defaultView` | `DateView` | No | The default view of the calendar |
| `disabled` | `boolean` | No | Whether the calendar is disabled. |
| `fixedWeeks` | `boolean` | No | Whether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6. |
| `focusedValue` | `DateValue` | No | The controlled focused date. |
| `format` | `(date: DateValue, details: LocaleDetails) => string` | No | The format of the date to display in the input. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; label(index: number): string; table(id: string): string; tableHeader(id: string): string; tableBody(id: string): string; tableRow(id: string): string; content: string; ... 10 more ...; positioner: string; }>` | No | The ids of the elements in the date picker. Useful for composition. |
| `inline` | `boolean` | No | Whether the date picker is inline |
| `isDateUnavailable` | `(date: DateValue, locale: string) => boolean` | No | Returns whether a date of the calendar is available. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `locale` | `string` | No | The locale (BCP 47 language tag) to use when formatting the date. |
| `max` | `DateValue` | No | The maximum date that can be selected. |
| `maxView` | `DateView` | No | The maximum view of the calendar |
| `min` | `DateValue` | No | The minimum date that can be selected. |
| `minView` | `DateView` | No | The minimum view of the calendar |
| `modelValue` | `DateValue[]` | No | The v-model value of the date picker |
| `name` | `string` | No | The `name` attribute of the input element. |
| `numOfMonths` | `number` | No | The number of months to display. |
| `open` | `boolean` | No | The controlled open state of the date picker |
| `outsideDaySelectable` | `boolean` | No | Whether day outside the visible range can be selected. |
| `parse` | `(value: string, details: LocaleDetails) => DateValue | undefined` | No | Function to parse the date from the input back to a DateValue. |
| `placeholder` | `string` | No | The placeholder text to display in the input. |
| `positioning` | `PositioningOptions` | No | The user provided options used to position the date picker content |
| `readOnly` | `boolean` | No | Whether the calendar is read-only. |
| `selectionMode` | `SelectionMode` | No | The selection mode of the calendar.
- `single` - only one date can be selected
- `multiple` - multiple dates can be selected
- `range` - a range of dates can be selected |
| `startOfWeek` | `number` | No | The first day of the week.
 `0` - Sunday
 `1` - Monday
 `2` - Tuesday
 `3` - Wednesday
 `4` - Thursday
 `5` - Friday
 `6` - Saturday |
| `timeZone` | `string` | No | The time zone to use |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `view` | `DateView` | No | The view of the calendar |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | root |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | content |
| `[data-state]` | "open" | "closed" |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-placement]` | The placement of the content |
| `[data-inline]` | Present when the content is inline |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fixOnBlur` | `boolean` | No | Whether to fix the input value on blur. |
| `index` | `number` | No | The index of the input to focus. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | input |
| `[data-index]` | The index of the item |
| `[data-state]` | "open" | "closed" |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | label |
| `[data-state]` | "open" | "closed" |
| `[data-index]` | The index of the item |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**MonthSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**NextTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | next-trigger |
| `[data-disabled]` | Present when disabled |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PresetTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `PresetTriggerValue` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**PrevTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | prev-trigger |
| `[data-disabled]` | Present when disabled |


**RangeText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `DatePickerApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**TableBody Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableBody Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-body |
| `[data-view]` | The view of the tablebody |
| `[data-disabled]` | Present when disabled |


**TableCell Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `Reactive<number | DateValue>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `columns` | `number` | No |  |
| `disabled` | `boolean` | No |  |
| `visibleRange` | `VisibleRange` | No |  |


**TableCellTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHead Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHead Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-head |
| `[data-view]` | The view of the tablehead |
| `[data-disabled]` | Present when disabled |


**TableHeader Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableHeader Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-header |
| `[data-view]` | The view of the tableheader |
| `[data-disabled]` | Present when disabled |


**Table Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `columns` | `number` | No |  |
| `id` | `string` | No |  |
| `view` | `DateView` | No |  |


**Table Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table |
| `[data-columns]` |  |
| `[data-view]` | The view of the table |


**TableRow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**TableRow Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-row |
| `[data-disabled]` | Present when disabled |
| `[data-view]` | The view of the tablerow |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | trigger |
| `[data-placement]` | The placement of the trigger |
| `[data-state]` | "open" | "closed" |


**ViewControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ViewControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view-control |
| `[data-view]` | The view of the viewcontrol |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `view` | `DateView` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view |
| `[data-view]` | The view of the view |


**ViewTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ViewTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view-trigger |
| `[data-view]` | The view of the viewtrigger |


**YearSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether the calendar should close after the date selection is complete.
This is ignored when the selection mode is `multiple`. |
| `defaultFocusedValue` | `DateValue` | No | The initial focused date when rendered.
Use when you don't need to control the focused date of the date picker. |
| `defaultOpen` | `boolean` | No | The initial open state of the date picker when rendered.
Use when you don't need to control the open state of the date picker. |
| `defaultValue` | `DateValue[]` | No | The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s) of the date picker. |
| `defaultView` | `DateView` | No | The default view of the calendar |
| `disabled` | `boolean` | No | Whether the calendar is disabled. |
| `fixedWeeks` | `boolean` | No | Whether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6. |
| `focusedValue` | `DateValue` | No | The controlled focused date. |
| `format` | `(date: DateValue, details: LocaleDetails) => string` | No | The format of the date to display in the input. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; content: string; ... 10 more ...; positioner: string; }>` | No | The ids of the elements in the date picker. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `inline` | `boolean` | No | Whether to render the date picker inline |
| `isDateUnavailable` | `(date: DateValue, locale: string) => boolean` | No | Returns whether a date of the calendar is available. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `locale` | `string` | No | The locale (BCP 47 language tag) to use when formatting the date. |
| `max` | `DateValue` | No | The maximum date that can be selected. |
| `maxView` | `DateView` | No | The maximum view of the calendar |
| `min` | `DateValue` | No | The minimum date that can be selected. |
| `minView` | `DateView` | No | The minimum view of the calendar |
| `name` | `string` | No | The `name` attribute of the input element. |
| `numOfMonths` | `number` | No | The number of months to display. |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onFocusChange` | `(details: FocusChangeDetails) => void` | No | Function called when the focused date changes. |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Function called when the calendar opens or closes. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called when the value changes. |
| `onViewChange` | `(details: ViewChangeDetails) => void` | No | Function called when the view changes. |
| `open` | `boolean` | No | The controlled open state of the date picker |
| `outsideDaySelectable` | `boolean` | No | Whether day outside the visible range can be selected. |
| `parse` | `(value: string, details: LocaleDetails) => DateValue | undefined` | No | Function to parse the date from the input back to a DateValue. |
| `placeholder` | `string` | No | The placeholder text to display in the input. |
| `positioning` | `PositioningOptions` | No | The user provided options used to position the date picker content |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `readOnly` | `boolean` | No | Whether the calendar is read-only. |
| `ref` | `Element` | No |  |
| `selectionMode` | `SelectionMode` | No | The selection mode of the calendar.
- `single` - only one date can be selected
- `multiple` - multiple dates can be selected
- `range` - a range of dates can be selected |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `startOfWeek` | `number` | No | The first day of the week.
 `0` - Sunday
 `1` - Monday
 `2` - Tuesday
 `3` - Wednesday
 `4` - Thursday
 `5` - Friday
 `6` - Saturday |
| `timeZone` | `string` | No | The time zone to use |
| `translations` | `IntlTranslations` | No | The localized messages to use. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `DateValue[]` | No | The controlled selected date(s). |
| `view` | `DateView` | No | The view of the calendar |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | root |
| `[data-state]` | "open" | "closed" |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**ClearTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | content |
| `[data-state]` | "open" | "closed" |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-placement]` | The placement of the content |
| `[data-inline]` | Present when the content is inline |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseDatePickerContext]>` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | control |
| `[data-disabled]` | Present when disabled |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `fixOnBlur` | `boolean` | No | Whether to fix the input value on blur. |
| `index` | `number` | No | The index of the input to focus. |
| `ref` | `Element` | No |  |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | input |
| `[data-index]` | The index of the item |
| `[data-state]` | "open" | "closed" |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | label |
| `[data-state]` | "open" | "closed" |
| `[data-index]` | The index of the item |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |


**MonthSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'select'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**NextTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**NextTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | next-trigger |
| `[data-disabled]` | Present when disabled |


**Positioner Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**PresetTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `PresetTriggerValue` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**PrevTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**PrevTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | prev-trigger |
| `[data-disabled]` | Present when disabled |


**RangeText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseDatePickerReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**TableBody Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'tbody'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**TableBody Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-body |
| `[data-view]` | The view of the tablebody |
| `[data-disabled]` | Present when disabled |


**TableCell Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `number | DateValue` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'td'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `columns` | `number` | No |  |
| `disabled` | `boolean` | No |  |
| `ref` | `Element` | No |  |
| `visibleRange` | `VisibleRange` | No |  |


**TableCellTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**TableHead Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'thead'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**TableHead Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-head |
| `[data-view]` | The view of the tablehead |
| `[data-disabled]` | Present when disabled |


**TableHeader Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'th'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**TableHeader Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-header |
| `[data-view]` | The view of the tableheader |
| `[data-disabled]` | Present when disabled |


**Table Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'table'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `columns` | `number` | No |  |


**Table Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table |
| `[data-columns]` |  |
| `[data-view]` | The view of the table |


**TableRow Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'tr'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**TableRow Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | table-row |
| `[data-disabled]` | Present when disabled |
| `[data-view]` | The view of the tablerow |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | trigger |
| `[data-placement]` | The placement of the trigger |
| `[data-state]` | "open" | "closed" |


**ViewControl Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ViewControl Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view-control |
| `[data-view]` | The view of the viewcontrol |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `view` | `DateView` | No |  |


**View Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view |
| `[data-view]` | The view of the view |


**ViewTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ViewTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | date-picker |
| `[data-part]` | view-trigger |
| `[data-view]` | The view of the viewtrigger |


**YearSelect Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'select'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

These are the properties available when using `UdateUpicker.Context`, `useUdateUpickerContext` hook or `useUdateUpicker`
hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `focused` | `boolean` | Whether the input is focused |
| `open` | `boolean` | Whether the date picker is open |
| `inline` | `boolean` | Whether the date picker is rendered inline |
| `view` | `DateView` | The current view of the date picker |
| `getDaysInWeek` | `(week: number, from?: DateValue) => DateValue[]` | Returns an array of days in the week index counted from the provided start date, or the first visible date if not given. |
| `getOffset` | `(duration: DateDuration) => DateValueOffset` | Returns the offset of the month based on the provided number of months. |
| `getRangePresetValue` | `(value: DateRangePreset) => DateValue[]` | Returns the range of dates based on the provided date range preset. |
| `getMonthWeeks` | `(from?: DateValue) => DateValue[][]` | Returns the weeks of the month from the provided date. Represented as an array of arrays of dates. |
| `isUnavailable` | `(date: DateValue) => boolean` | Returns whether the provided date is available (or can be selected) |
| `weeks` | `DateValue[][]` | The weeks of the month. Represented as an array of arrays of dates. |
| `weekDays` | `WeekDay[]` | The days of the week. Represented as an array of strings. |
| `visibleRange` | `VisibleRange` | The visible range of dates. |
| `visibleRangeText` | `VisibleRangeText` | The human readable text for the visible range of dates. |
| `value` | `DateValue[]` | The selected date. |
| `valueAsDate` | `Date[]` | The selected date as a Date object. |
| `valueAsString` | `string[]` | The selected date as a string. |
| `focusedValue` | `DateValue` | The focused date. |
| `focusedValueAsDate` | `Date` | The focused date as a Date object. |
| `focusedValueAsString` | `string` | The focused date as a string. |
| `selectToday` | `VoidFunction` | Sets the selected date to today. |
| `setValue` | `(values: DateValue[]) => void` | Sets the selected date to the given date. |
| `setFocusedValue` | `(value: DateValue) => void` | Sets the focused date to the given date. |
| `clearValue` | `VoidFunction` | Clears the selected date(s). |
| `setOpen` | `(open: boolean) => void` | Function to open or close the calendar. |
| `focusMonth` | `(month: number) => void` | Function to set the selected month. |
| `focusYear` | `(year: number) => void` | Function to set the selected year. |
| `getYears` | `() => Cell[]` | Returns the months of the year |
| `getYearsGrid` | `(props?: YearGridProps) => YearGridValue` | Returns the years of the decade based on the columns.
Represented as an array of arrays of years. |
| `getDecade` | `() => Range<number>` | Returns the start and end years of the decade. |
| `getMonths` | `(props?: MonthFormatOptions) => Cell[]` | Returns the months of the year |
| `getMonthsGrid` | `(props?: MonthGridProps) => MonthGridValue` | Returns the months of the year based on the columns.
Represented as an array of arrays of months. |
| `format` | `(value: DateValue, opts?: Intl.DateTimeFormatOptions) => string` | Formats the given date value based on the provided options. |
| `setView` | `(view: DateView) => void` | Sets the view of the date picker. |
| `goToNext` | `VoidFunction` | Goes to the next month/year/decade. |
| `goToPrev` | `VoidFunction` | Goes to the previous month/year/decade. |
| `getDayTableCellState` | `(props: DayTableCellProps) => DayTableCellState` | Returns the state details for a given cell. |
| `getMonthTableCellState` | `(props: TableCellProps) => TableCellState` | Returns the state details for a given month cell. |
| `getYearTableCellState` | `(props: TableCellProps) => TableCellState` | Returns the state details for a given year cell. |


## Accessibility

### Keyboard Support

<KeyBindingsTable id="date-picker" />