# 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: basic**

#### React

```tsx
import { DatePicker } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'

export const Basic = () => {
  return (
    <DatePicker.Root>
      <DatePicker.Label>Label</DatePicker.Label>
      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
        <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
      </DatePicker.Control>
      <Portal>
        <DatePicker.Positioner>
          <DatePicker.Content>
            <DatePicker.YearSelect />
            <DatePicker.MonthSelect />
            <DatePicker.View view="day">
              <DatePicker.Context>
                {(datePicker) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>
                    <DatePicker.Table>
                      <DatePicker.TableHead>
                        <DatePicker.TableRow>
                          {datePicker.weekDays.map((weekDay, id) => (
                            <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
                          ))}
                        </DatePicker.TableRow>
                      </DatePicker.TableHead>
                      <DatePicker.TableBody>
                        {datePicker.weeks.map((week, id) => (
                          <DatePicker.TableRow key={id}>
                            {week.map((day, id) => (
                              <DatePicker.TableCell key={id} value={day}>
                                <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                              </DatePicker.TableCell>
                            ))}
                          </DatePicker.TableRow>
                        ))}
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>
            <DatePicker.View view="month">
              <DatePicker.Context>
                {(datePicker) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>
                    <DatePicker.Table>
                      <DatePicker.TableBody>
                        {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
                          <DatePicker.TableRow key={id}>
                            {months.map((month, id) => (
                              <DatePicker.TableCell key={id} value={month.value}>
                                <DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
                              </DatePicker.TableCell>
                            ))}
                          </DatePicker.TableRow>
                        ))}
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>
            <DatePicker.View view="year">
              <DatePicker.Context>
                {(datePicker) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>
                    <DatePicker.Table>
                      <DatePicker.TableBody>
                        {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
                          <DatePicker.TableRow key={id}>
                            {years.map((year, id) => (
                              <DatePicker.TableCell key={id} value={year.value}>
                                <DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
                              </DatePicker.TableCell>
                            ))}
                          </DatePicker.TableRow>
                        ))}
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>
          </DatePicker.Content>
        </DatePicker.Positioner>
      </Portal>
    </DatePicker.Root>
  )
}

```

#### Solid

```tsx
import { DatePicker } from '@ark-ui/solid/date-picker'
import { Index, Portal } from 'solid-js/web'

export const Basic = () => {
  return (
    <DatePicker.Root>
      <DatePicker.Label>Label</DatePicker.Label>

      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
        <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
      </DatePicker.Control>

      <Portal>
        <DatePicker.Positioner>
          <DatePicker.Content>
            <DatePicker.YearSelect />
            <DatePicker.MonthSelect />
            <DatePicker.View view="day">
              <DatePicker.Context>
                {(context) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>

                    <DatePicker.Table>
                      <DatePicker.TableHead>
                        <DatePicker.TableRow>
                          <Index each={context().weekDays}>
                            {(weekDay) => <DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>}
                          </Index>
                        </DatePicker.TableRow>
                      </DatePicker.TableHead>

                      <DatePicker.TableBody>
                        <Index each={context().weeks}>
                          {(week) => (
                            <DatePicker.TableRow>
                              <Index each={week()}>
                                {(day) => (
                                  <DatePicker.TableCell value={day()}>
                                    <DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                )}
                              </Index>
                            </DatePicker.TableRow>
                          )}
                        </Index>
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>

            <DatePicker.View view="month">
              <DatePicker.Context>
                {(context) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>

                    <DatePicker.Table>
                      <DatePicker.TableBody>
                        <Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
                          {(months) => (
                            <DatePicker.TableRow>
                              <Index each={months()}>
                                {(month) => (
                                  <DatePicker.TableCell value={month().value}>
                                    <DatePicker.TableCellTrigger>{month().label}</DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                )}
                              </Index>
                            </DatePicker.TableRow>
                          )}
                        </Index>
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>

            <DatePicker.View view="year">
              <DatePicker.Context>
                {(context) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>

                    <DatePicker.Table>
                      <DatePicker.TableBody>
                        <Index each={context().getYearsGrid({ columns: 4 })}>
                          {(years) => (
                            <DatePicker.TableRow>
                              <Index each={years()}>
                                {(year) => (
                                  <DatePicker.TableCell value={year().value}>
                                    <DatePicker.TableCellTrigger>{year().label}</DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                )}
                              </Index>
                            </DatePicker.TableRow>
                          )}
                        </Index>
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>
          </DatePicker.Content>
        </DatePicker.Positioner>
      </Portal>
    </DatePicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue/date-picker'
</script>

<template>
  <DatePicker.Root>
    <DatePicker.Label>Label</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input />
      <DatePicker.Trigger>📅</DatePicker.Trigger>
      <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
    </DatePicker.Control>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.YearSelect />
        <DatePicker.MonthSelect />
        <DatePicker.View view="day">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  <DatePicker.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
                    {{ weekDay.short }}
                  </DatePicker.TableHeader>
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id">
                  <DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
                    <DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
        <DatePicker.View view="month">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableBody>
                <DatePicker.TableRow
                  v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
                  :key="id"
                >
                  <DatePicker.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
                    <DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
        <DatePicker.View view="year">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
                  <DatePicker.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
                    <DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </DatePicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DatePicker } from '@ark-ui/svelte/date-picker'
  import { Portal } from '@ark-ui/svelte/portal'
</script>

<DatePicker.Root>
  <DatePicker.Label>Label</DatePicker.Label>
  <DatePicker.Control>
    <DatePicker.Input />
    <DatePicker.Trigger>📅</DatePicker.Trigger>
    <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
  </DatePicker.Control>
  <Portal>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.YearSelect />
        <DatePicker.MonthSelect />
        <DatePicker.View view="day">
          <DatePicker.Context>
            {#snippet render(datePicker)}
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableHead>
                  <DatePicker.TableRow>
                    {#each datePicker().weekDays as weekDay}
                      <DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
                    {/each}
                  </DatePicker.TableRow>
                </DatePicker.TableHead>
                <DatePicker.TableBody>
                  {#each datePicker().weeks as week}
                    <DatePicker.TableRow>
                      {#each week as day}
                        <DatePicker.TableCell value={day}>
                          <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                        </DatePicker.TableCell>
                      {/each}
                    </DatePicker.TableRow>
                  {/each}
                </DatePicker.TableBody>
              </DatePicker.Table>
            {/snippet}
          </DatePicker.Context>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </Portal>
</DatePicker.Root>

```

### Controlled

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

**Example: controlled**

#### React

```tsx
import { DatePicker, parseDate } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'
import { useState } from 'react'

export const Controlled = () => {
  const [value, setValue] = useState([parseDate('2022-01-01')])

  return (
    <DatePicker.Root value={value} onValueChange={(e) => setValue(e.value)}>
      <DatePicker.Label>Label</DatePicker.Label>
      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
        <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
      </DatePicker.Control>
      <Portal>
        <DatePicker.Positioner>
          <DatePicker.Content>
            <DatePicker.YearSelect />
            <DatePicker.MonthSelect />
            <DatePicker.View view="day">
              <DatePicker.Context>
                {(datePicker) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>
                    <DatePicker.Table>
                      <DatePicker.TableHead>
                        <DatePicker.TableRow>
                          {datePicker.weekDays.map((weekDay, id) => (
                            <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
                          ))}
                        </DatePicker.TableRow>
                      </DatePicker.TableHead>
                      <DatePicker.TableBody>
                        {datePicker.weeks.map((week, id) => (
                          <DatePicker.TableRow key={id}>
                            {week.map((day, id) => (
                              <DatePicker.TableCell key={id} value={day}>
                                <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                              </DatePicker.TableCell>
                            ))}
                          </DatePicker.TableRow>
                        ))}
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>
            <DatePicker.View view="month">
              <DatePicker.Context>
                {(datePicker) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>
                    <DatePicker.Table>
                      <DatePicker.TableBody>
                        {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
                          <DatePicker.TableRow key={id}>
                            {months.map((month, id) => (
                              <DatePicker.TableCell key={id} value={month.value}>
                                <DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
                              </DatePicker.TableCell>
                            ))}
                          </DatePicker.TableRow>
                        ))}
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>
            <DatePicker.View view="year">
              <DatePicker.Context>
                {(datePicker) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>
                    <DatePicker.Table>
                      <DatePicker.TableBody>
                        {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
                          <DatePicker.TableRow key={id}>
                            {years.map((year, id) => (
                              <DatePicker.TableCell key={id} value={year.value}>
                                <DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
                              </DatePicker.TableCell>
                            ))}
                          </DatePicker.TableRow>
                        ))}
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>
          </DatePicker.Content>
        </DatePicker.Positioner>
      </Portal>
    </DatePicker.Root>
  )
}

```

#### Solid

```tsx
import { DatePicker, parseDate } from '@ark-ui/solid/date-picker'
import { createSignal } from 'solid-js'
import { Index, Portal } from 'solid-js/web'

export const Controlled = () => {
  const [value, setValue] = createSignal<DatePicker.DateValue[]>([parseDate('2022-01-01')])

  return (
    <DatePicker.Root value={value()} onValueChange={(e) => setValue(e.value)}>
      <DatePicker.Label>Label</DatePicker.Label>

      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
        <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
      </DatePicker.Control>

      <Portal>
        <DatePicker.Positioner>
          <DatePicker.Content>
            <DatePicker.YearSelect />
            <DatePicker.MonthSelect />
            <DatePicker.View view="day">
              <DatePicker.Context>
                {(context) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>

                    <DatePicker.Table>
                      <DatePicker.TableHead>
                        <DatePicker.TableRow>
                          <Index each={context().weekDays}>
                            {(weekDay) => <DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>}
                          </Index>
                        </DatePicker.TableRow>
                      </DatePicker.TableHead>

                      <DatePicker.TableBody>
                        <Index each={context().weeks}>
                          {(week) => (
                            <DatePicker.TableRow>
                              <Index each={week()}>
                                {(day) => (
                                  <DatePicker.TableCell value={day()}>
                                    <DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                )}
                              </Index>
                            </DatePicker.TableRow>
                          )}
                        </Index>
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>

            <DatePicker.View view="month">
              <DatePicker.Context>
                {(context) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>

                    <DatePicker.Table>
                      <DatePicker.TableBody>
                        <Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
                          {(months) => (
                            <DatePicker.TableRow>
                              <Index each={months()}>
                                {(month) => (
                                  <DatePicker.TableCell value={month().value}>
                                    <DatePicker.TableCellTrigger>{month().label}</DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                )}
                              </Index>
                            </DatePicker.TableRow>
                          )}
                        </Index>
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>

            <DatePicker.View view="year">
              <DatePicker.Context>
                {(context) => (
                  <>
                    <DatePicker.ViewControl>
                      <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                      <DatePicker.ViewTrigger>
                        <DatePicker.RangeText />
                      </DatePicker.ViewTrigger>
                      <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                    </DatePicker.ViewControl>

                    <DatePicker.Table>
                      <DatePicker.TableBody>
                        <Index each={context().getYearsGrid({ columns: 4 })}>
                          {(years) => (
                            <DatePicker.TableRow>
                              <Index each={years()}>
                                {(year) => (
                                  <DatePicker.TableCell value={year().value}>
                                    <DatePicker.TableCellTrigger>{year().label}</DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                )}
                              </Index>
                            </DatePicker.TableRow>
                          )}
                        </Index>
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  </>
                )}
              </DatePicker.Context>
            </DatePicker.View>
          </DatePicker.Content>
        </DatePicker.Positioner>
      </Portal>
    </DatePicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DatePicker, type DateValue, parseDate } from '@ark-ui/vue/date-picker'
import { type Ref, ref } from 'vue'

const value = ref([parseDate('2022-01-01')]) as Ref<DateValue[]>
</script>

<template>
  <DatePicker.Root v-model="value">
    <DatePicker.Label>Label</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input />
      <DatePicker.Trigger>📅</DatePicker.Trigger>
      <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
    </DatePicker.Control>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.YearSelect />
        <DatePicker.MonthSelect />
        <DatePicker.View view="day">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  <DatePicker.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
                    {{ weekDay.short }}
                  </DatePicker.TableHeader>
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id">
                  <DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
                    <DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
        <DatePicker.View view="month">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableBody>
                <DatePicker.TableRow
                  v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
                  :key="id"
                >
                  <DatePicker.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
                    <DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
        <DatePicker.View view="year">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
                  <DatePicker.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
                    <DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </DatePicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DatePicker, parseDate } from '@ark-ui/svelte/date-picker'
  import { Portal } from '@ark-ui/svelte/portal'

  let value = $state([parseDate('2022-01-01')])
</script>

<DatePicker.Root bind:value>
  <DatePicker.Label>Label</DatePicker.Label>
  <DatePicker.Control>
    <DatePicker.Input />
    <DatePicker.Trigger>📅</DatePicker.Trigger>
    <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
  </DatePicker.Control>
  <Portal>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.YearSelect />
        <DatePicker.MonthSelect />
        <DatePicker.View view="day">
          <DatePicker.Context>
            {#snippet render(datePicker)}
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableHead>
                  <DatePicker.TableRow>
                    {#each datePicker().weekDays as weekDay}
                      <DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
                    {/each}
                  </DatePicker.TableRow>
                </DatePicker.TableHead>
                <DatePicker.TableBody>
                  {#each datePicker().weeks as week}
                    <DatePicker.TableRow>
                      {#each week as day}
                        <DatePicker.TableCell value={day}>
                          <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                        </DatePicker.TableCell>
                      {/each}
                    </DatePicker.TableRow>
                  {/each}
                </DatePicker.TableBody>
              </DatePicker.Table>
            {/snippet}
          </DatePicker.Context>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </Portal>
</DatePicker.Root>

```

### 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: range**

#### React

```tsx
import { DatePicker } from '@ark-ui/react/date-picker'

export const Range = () => {
  return (
    <DatePicker.Root selectionMode="range">
      <DatePicker.Label>Label</DatePicker.Label>
      <DatePicker.Control>
        <DatePicker.Input index={0} />
        <DatePicker.Input index={1} />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
        <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
      </DatePicker.Control>
      <DatePicker.PresetTrigger value="last7Days">Last 7 days</DatePicker.PresetTrigger>
      <DatePicker.Positioner>
        <DatePicker.Content>
          <DatePicker.YearSelect />
          <DatePicker.MonthSelect />
          <DatePicker.View view="day">
            <DatePicker.Context>
              {(datePicker) => (
                <>
                  <DatePicker.ViewControl>
                    <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                    <DatePicker.ViewTrigger>
                      <DatePicker.RangeText />
                    </DatePicker.ViewTrigger>
                    <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                  </DatePicker.ViewControl>
                  <DatePicker.Table>
                    <DatePicker.TableHead>
                      <DatePicker.TableRow>
                        {datePicker.weekDays.map((weekDay, id) => (
                          <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
                        ))}
                      </DatePicker.TableRow>
                    </DatePicker.TableHead>
                    <DatePicker.TableBody>
                      {datePicker.weeks.map((week, id) => (
                        <DatePicker.TableRow key={id}>
                          {week.map((day, id) => (
                            <DatePicker.TableCell key={id} value={day}>
                              <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          ))}
                        </DatePicker.TableRow>
                      ))}
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                </>
              )}
            </DatePicker.Context>
          </DatePicker.View>
          <DatePicker.View view="month">
            <DatePicker.Context>
              {(datePicker) => (
                <>
                  <DatePicker.ViewControl>
                    <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                    <DatePicker.ViewTrigger>
                      <DatePicker.RangeText />
                    </DatePicker.ViewTrigger>
                    <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                  </DatePicker.ViewControl>
                  <DatePicker.Table>
                    <DatePicker.TableBody>
                      {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
                        <DatePicker.TableRow key={id}>
                          {months.map((month, id) => (
                            <DatePicker.TableCell key={id} value={month.value}>
                              <DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          ))}
                        </DatePicker.TableRow>
                      ))}
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                </>
              )}
            </DatePicker.Context>
          </DatePicker.View>
          <DatePicker.View view="year">
            <DatePicker.Context>
              {(datePicker) => (
                <>
                  <DatePicker.ViewControl>
                    <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                    <DatePicker.ViewTrigger>
                      <DatePicker.RangeText />
                    </DatePicker.ViewTrigger>
                    <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                  </DatePicker.ViewControl>
                  <DatePicker.Table>
                    <DatePicker.TableBody>
                      {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
                        <DatePicker.TableRow key={id}>
                          {years.map((year, id) => (
                            <DatePicker.TableCell key={id} value={year.value}>
                              <DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          ))}
                        </DatePicker.TableRow>
                      ))}
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                </>
              )}
            </DatePicker.Context>
          </DatePicker.View>
        </DatePicker.Content>
      </DatePicker.Positioner>
    </DatePicker.Root>
  )
}

```

#### Solid

```tsx
import { DatePicker } from '@ark-ui/solid/date-picker'
import { Index, createMemo } from 'solid-js'
import { Portal } from 'solid-js/web'

export const Range = () => {
  return (
    <DatePicker.Root selectionMode="range">
      <DatePicker.Label>Label</DatePicker.Label>

      <DatePicker.Control>
        <DatePicker.Input index={0} />
        <DatePicker.Input index={1} />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
        <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
      </DatePicker.Control>

      <DatePicker.PresetTrigger value="last7Days">Last 7 days</DatePicker.PresetTrigger>

      <Portal>
        <DatePicker.Positioner>
          <DatePicker.Content>
            <DatePicker.YearSelect />
            <DatePicker.MonthSelect />

            <div style={{ display: 'flex', gap: '10px' }}>
              <DatePicker.Context>
                {(context) => (
                  <DatePicker.Table>
                    <DatePicker.TableHead>
                      <DatePicker.TableRow>
                        <Index each={context().weekDays}>
                          {(weekDay) => <DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>}
                        </Index>
                      </DatePicker.TableRow>
                    </DatePicker.TableHead>

                    <DatePicker.TableBody>
                      <Index each={context().weeks}>
                        {(week) => (
                          <DatePicker.TableRow>
                            <Index each={week()}>
                              {(day) => (
                                <DatePicker.TableCell value={day()}>
                                  <DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
                                </DatePicker.TableCell>
                              )}
                            </Index>
                          </DatePicker.TableRow>
                        )}
                      </Index>
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                )}
              </DatePicker.Context>

              <DatePicker.Context>
                {(context) => {
                  const offset = createMemo(() => context().getOffset({ months: 1 }))
                  return (
                    <DatePicker.Table>
                      <DatePicker.TableHead>
                        <DatePicker.TableRow>
                          <Index each={context().weekDays}>
                            {(weekDay) => <DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>}
                          </Index>
                        </DatePicker.TableRow>
                      </DatePicker.TableHead>

                      <DatePicker.TableBody>
                        <Index each={offset().weeks}>
                          {(week) => (
                            <DatePicker.TableRow>
                              <Index each={week()}>
                                {(day) => (
                                  <DatePicker.TableCell value={day()} visibleRange={offset().visibleRange}>
                                    <DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
                                  </DatePicker.TableCell>
                                )}
                              </Index>
                            </DatePicker.TableRow>
                          )}
                        </Index>
                      </DatePicker.TableBody>
                    </DatePicker.Table>
                  )
                }}
              </DatePicker.Context>
            </div>
          </DatePicker.Content>
        </DatePicker.Positioner>
      </Portal>
    </DatePicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue/date-picker'
</script>

<template>
  <DatePicker.Root selectionMode="range">
    <DatePicker.Label>Label</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input :index="0" />
      <DatePicker.Input :index="1" />
      <DatePicker.Trigger>📅</DatePicker.Trigger>
      <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
    </DatePicker.Control>
    <DatePicker.PresetTrigger value="last7Days">Last 7 days</DatePicker.PresetTrigger>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.YearSelect />
        <DatePicker.MonthSelect />
        <DatePicker.View view="day">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  <DatePicker.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
                    {{ weekDay.short }}
                  </DatePicker.TableHeader>
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id">
                  <DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
                    <DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
        <DatePicker.View view="month">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableBody>
                <DatePicker.TableRow
                  v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
                  :key="id"
                >
                  <DatePicker.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
                    <DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
        <DatePicker.View view="year">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
                  <DatePicker.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
                    <DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </DatePicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DatePicker } from '@ark-ui/svelte/date-picker'
  import { Portal } from '@ark-ui/svelte/portal'
</script>

<DatePicker.Root selectionMode="range">
  <DatePicker.Label>Label</DatePicker.Label>
  <DatePicker.Control>
    <DatePicker.Input />
    <DatePicker.Trigger>📅</DatePicker.Trigger>
    <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
  </DatePicker.Control>
  <DatePicker.PresetTrigger value="last7Days">Last 7 days</DatePicker.PresetTrigger>
  <Portal>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.YearSelect />
        <DatePicker.MonthSelect />
        <DatePicker.View view="day">
          <DatePicker.Context>
            {#snippet render(datePicker)}
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableHead>
                  <DatePicker.TableRow>
                    {#each datePicker().weekDays as weekDay}
                      <DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
                    {/each}
                  </DatePicker.TableRow>
                </DatePicker.TableHead>
                <DatePicker.TableBody>
                  {#each datePicker().weeks as week}
                    <DatePicker.TableRow>
                      {#each week as day}
                        <DatePicker.TableCell value={day}>
                          <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                        </DatePicker.TableCell>
                      {/each}
                    </DatePicker.TableRow>
                  {/each}
                </DatePicker.TableBody>
              </DatePicker.Table>
            {/snippet}
          </DatePicker.Context>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </Portal>
</DatePicker.Root>

```

### 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: multiple-months**

#### React

```tsx
import { DatePicker } from '@ark-ui/react/date-picker'

export const MultipleMonths = () => {
  return (
    <DatePicker.Root numOfMonths={2}>
      <DatePicker.Label>Label</DatePicker.Label>

      <DatePicker.Control>
        <DatePicker.Input index={0} />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
        <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
      </DatePicker.Control>

      <DatePicker.Positioner>
        <DatePicker.Content>
          <DatePicker.YearSelect />
          <DatePicker.MonthSelect />
          <DatePicker.ViewControl>
            <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
            <DatePicker.RangeText />
            <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
          </DatePicker.ViewControl>

          <div style={{ display: 'flex', gap: '10px' }}>
            {/* First month */}
            <DatePicker.Context>
              {(datePicker) => (
                <DatePicker.Table>
                  <DatePicker.TableHead>
                    <DatePicker.TableRow>
                      {datePicker.weekDays.map((weekDay, id) => (
                        <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
                      ))}
                    </DatePicker.TableRow>
                  </DatePicker.TableHead>
                  <DatePicker.TableBody>
                    {datePicker.weeks.map((week, id) => (
                      <DatePicker.TableRow key={id}>
                        {week.map((day, id) => (
                          <DatePicker.TableCell key={id} value={day}>
                            <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                          </DatePicker.TableCell>
                        ))}
                      </DatePicker.TableRow>
                    ))}
                  </DatePicker.TableBody>
                </DatePicker.Table>
              )}
            </DatePicker.Context>

            {/* Second month */}
            <DatePicker.Context>
              {(datePicker) => {
                const offset = datePicker.getOffset({ months: 1 })
                return (
                  <DatePicker.Table>
                    <DatePicker.TableHead>
                      <DatePicker.TableRow>
                        {datePicker.weekDays.map((weekDay, id) => (
                          <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
                        ))}
                      </DatePicker.TableRow>
                    </DatePicker.TableHead>
                    <DatePicker.TableBody>
                      {offset.weeks.map((week, id) => (
                        <DatePicker.TableRow key={id}>
                          {week.map((day, id) => (
                            <DatePicker.TableCell key={id} value={day} visibleRange={offset.visibleRange}>
                              <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          ))}
                        </DatePicker.TableRow>
                      ))}
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                )
              }}
            </DatePicker.Context>
          </div>
        </DatePicker.Content>
      </DatePicker.Positioner>
    </DatePicker.Root>
  )
}

```

#### Solid

```tsx
import { DatePicker } from '@ark-ui/solid/date-picker'
import { Index, createMemo } from 'solid-js'

export const MultipleMonths = () => {
  return (
    <DatePicker.Root numOfMonths={2}>
      <DatePicker.Label>Label</DatePicker.Label>

      <DatePicker.Control>
        <DatePicker.Input index={0} />
        <DatePicker.Trigger>📅</DatePicker.Trigger>
        <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
      </DatePicker.Control>

      <DatePicker.Positioner>
        <DatePicker.Content>
          <DatePicker.YearSelect />
          <DatePicker.MonthSelect />
          <DatePicker.ViewControl>
            <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
            <DatePicker.RangeText />
            <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
          </DatePicker.ViewControl>

          <div style={{ display: 'flex', gap: '10px' }}>
            {/* First month */}
            <DatePicker.Context>
              {(datePicker) => (
                <DatePicker.Table>
                  <DatePicker.TableHead>
                    <DatePicker.TableRow>
                      <Index each={datePicker().weekDays}>
                        {(weekDay) => <DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>}
                      </Index>
                    </DatePicker.TableRow>
                  </DatePicker.TableHead>
                  <DatePicker.TableBody>
                    <Index each={datePicker().weeks}>
                      {(week) => (
                        <DatePicker.TableRow>
                          <Index each={week()}>
                            {(day) => (
                              <DatePicker.TableCell value={day()}>
                                <DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
                              </DatePicker.TableCell>
                            )}
                          </Index>
                        </DatePicker.TableRow>
                      )}
                    </Index>
                  </DatePicker.TableBody>
                </DatePicker.Table>
              )}
            </DatePicker.Context>

            {/* Second month */}
            <DatePicker.Context>
              {(datePicker) => {
                const offset = createMemo(() => datePicker().getOffset({ months: 1 }))
                return (
                  <DatePicker.Table>
                    <DatePicker.TableHead>
                      <DatePicker.TableRow>
                        <Index each={datePicker().weekDays}>
                          {(weekDay) => <DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>}
                        </Index>
                      </DatePicker.TableRow>
                    </DatePicker.TableHead>
                    <DatePicker.TableBody>
                      <Index each={offset().weeks}>
                        {(week) => (
                          <DatePicker.TableRow>
                            <Index each={week()}>
                              {(day) => (
                                <DatePicker.TableCell value={day()} visibleRange={offset().visibleRange}>
                                  <DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
                                </DatePicker.TableCell>
                              )}
                            </Index>
                          </DatePicker.TableRow>
                        )}
                      </Index>
                    </DatePicker.TableBody>
                  </DatePicker.Table>
                )
              }}
            </DatePicker.Context>
          </div>
        </DatePicker.Content>
      </DatePicker.Positioner>
    </DatePicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue/date-picker'
</script>

<template>
  <DatePicker.Root :numOfMonths="2">
    <DatePicker.Label>Label</DatePicker.Label>

    <DatePicker.Control>
      <DatePicker.Input :index="0" />
      <DatePicker.Trigger>📅</DatePicker.Trigger>
      <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
    </DatePicker.Control>

    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.YearSelect />
        <DatePicker.MonthSelect />
        <DatePicker.ViewControl>
          <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
          <DatePicker.RangeText />
          <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
        </DatePicker.ViewControl>

        <div style="display: flex; gap: 10px">
          <!-- First month -->
          <DatePicker.Context v-slot="datePicker">
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  <DatePicker.TableHeader v-for="(weekDay, id) in datePicker.weekDays" :key="id">
                    {{ weekDay.short }}
                  </DatePicker.TableHeader>
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(week, id) in datePicker.weeks" :key="id">
                  <DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
                    <DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>

          <!-- Second month -->
          <DatePicker.Context v-slot="datePicker">
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  <DatePicker.TableHeader v-for="(weekDay, id) in datePicker.weekDays" :key="id">
                    {{ weekDay.short }}
                  </DatePicker.TableHeader>
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(week, id) in datePicker.getOffset({ months: 1 }).weeks" :key="id">
                  <DatePicker.TableCell
                    v-for="(day, id) in week"
                    :key="id"
                    :value="day"
                    :visibleRange="datePicker.getOffset({ months: 1 }).visibleRange"
                  >
                    <DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </div>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </DatePicker.Root>
</template>

```

#### Svelte

```svelte
<script>
  import { DatePicker } from '@ark-ui/svelte/date-picker'
</script>

<DatePicker.Root numOfMonths={2}>
  <DatePicker.Label>Label</DatePicker.Label>

  <DatePicker.Control>
    <DatePicker.Input index={0} />
    <DatePicker.Trigger>📅</DatePicker.Trigger>
    <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
  </DatePicker.Control>

  <DatePicker.Positioner>
    <DatePicker.Content>
      <DatePicker.YearSelect />
      <DatePicker.MonthSelect />
      <DatePicker.ViewControl>
        <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
        <DatePicker.RangeText />
        <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
      </DatePicker.ViewControl>

      <div style="display: flex; gap: 10px">
        <!-- First month -->
        <DatePicker.Context>
          {#snippet render(datePicker)}
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  {#each datePicker().weekDays as weekDay, id (id)}
                    <DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
                  {/each}
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                {#each datePicker().weeks as week, id}
                  <DatePicker.TableRow>
                    {#each week as day, id (id)}
                      <DatePicker.TableCell value={day}>
                        <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                      </DatePicker.TableCell>
                    {/each}
                  </DatePicker.TableRow>
                {/each}
              </DatePicker.TableBody>
            </DatePicker.Table>
          {/snippet}
        </DatePicker.Context>

        <!-- Second month -->
        <DatePicker.Context>
          {#snippet render(datePicker)}
            {@const offset = datePicker().getOffset({ months: 1 })}
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  {#each datePicker().weekDays as weekDay, id (id)}
                    <DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
                  {/each}
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                {#each offset.weeks as week, id (id)}
                  <DatePicker.TableRow>
                    {#each week as day, id (id)}
                      <DatePicker.TableCell value={day} visibleRange={offset.visibleRange}>
                        <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                      </DatePicker.TableCell>
                    {/each}
                  </DatePicker.TableRow>
                {/each}
              </DatePicker.TableBody>
            </DatePicker.Table>
          {/snippet}
        </DatePicker.Context>
      </div>
    </DatePicker.Content>
  </DatePicker.Positioner>
</DatePicker.Root>

```

### 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: inline**

#### React

```tsx
import { DatePicker } from '@ark-ui/react/date-picker'

export const Inline = () => {
  return (
    <DatePicker.Root inline>
      <DatePicker.Input />
      <DatePicker.View view="day">
        <DatePicker.Context>
          {(datePicker) => (
            <>
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableHead>
                  <DatePicker.TableRow>
                    {datePicker.weekDays.map((weekDay, id) => (
                      <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
                    ))}
                  </DatePicker.TableRow>
                </DatePicker.TableHead>
                <DatePicker.TableBody>
                  {datePicker.weeks.map((week, id) => (
                    <DatePicker.TableRow key={id}>
                      {week.map((day, id) => (
                        <DatePicker.TableCell key={id} value={day}>
                          <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                        </DatePicker.TableCell>
                      ))}
                    </DatePicker.TableRow>
                  ))}
                </DatePicker.TableBody>
              </DatePicker.Table>
            </>
          )}
        </DatePicker.Context>
      </DatePicker.View>
      <DatePicker.View view="month">
        <DatePicker.Context>
          {(datePicker) => (
            <>
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableBody>
                  {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
                    <DatePicker.TableRow key={id}>
                      {months.map((month, id) => (
                        <DatePicker.TableCell key={id} value={month.value}>
                          <DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
                        </DatePicker.TableCell>
                      ))}
                    </DatePicker.TableRow>
                  ))}
                </DatePicker.TableBody>
              </DatePicker.Table>
            </>
          )}
        </DatePicker.Context>
      </DatePicker.View>
      <DatePicker.View view="year">
        <DatePicker.Context>
          {(datePicker) => (
            <>
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableBody>
                  {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
                    <DatePicker.TableRow key={id}>
                      {years.map((year, id) => (
                        <DatePicker.TableCell key={id} value={year.value}>
                          <DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
                        </DatePicker.TableCell>
                      ))}
                    </DatePicker.TableRow>
                  ))}
                </DatePicker.TableBody>
              </DatePicker.Table>
            </>
          )}
        </DatePicker.Context>
      </DatePicker.View>
    </DatePicker.Root>
  )
}

```

#### Solid

```tsx
import { DatePicker } from '@ark-ui/solid/date-picker'
import { Index } from 'solid-js'

export const Inline = () => {
  return (
    <DatePicker.Root inline>
      <DatePicker.Input />
      <DatePicker.View view="day">
        <DatePicker.Context>
          {(context) => (
            <>
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableHead>
                  <DatePicker.TableRow>
                    <Index each={context().weekDays}>
                      {(weekDay) => <DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>}
                    </Index>
                  </DatePicker.TableRow>
                </DatePicker.TableHead>
                <DatePicker.TableBody>
                  <Index each={context().weeks}>
                    {(week) => (
                      <DatePicker.TableRow>
                        <Index each={week()}>
                          {(day) => (
                            <DatePicker.TableCell value={day()}>
                              <DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          )}
                        </Index>
                      </DatePicker.TableRow>
                    )}
                  </Index>
                </DatePicker.TableBody>
              </DatePicker.Table>
            </>
          )}
        </DatePicker.Context>
      </DatePicker.View>
      <DatePicker.View view="month">
        <DatePicker.Context>
          {(context) => (
            <>
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableBody>
                  <Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
                    {(months) => (
                      <DatePicker.TableRow>
                        <Index each={months()}>
                          {(month) => (
                            <DatePicker.TableCell value={month().value}>
                              <DatePicker.TableCellTrigger>{month().label}</DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          )}
                        </Index>
                      </DatePicker.TableRow>
                    )}
                  </Index>
                </DatePicker.TableBody>
              </DatePicker.Table>
            </>
          )}
        </DatePicker.Context>
      </DatePicker.View>
      <DatePicker.View view="year">
        <DatePicker.Context>
          {(context) => (
            <>
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>
                  <DatePicker.RangeText />
                </DatePicker.ViewTrigger>
                <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
              </DatePicker.ViewControl>
              <DatePicker.Table>
                <DatePicker.TableBody>
                  <Index each={context().getYearsGrid({ columns: 4 })}>
                    {(years) => (
                      <DatePicker.TableRow>
                        <Index each={years()}>
                          {(year) => (
                            <DatePicker.TableCell value={year().value}>
                              <DatePicker.TableCellTrigger>{year().label}</DatePicker.TableCellTrigger>
                            </DatePicker.TableCell>
                          )}
                        </Index>
                      </DatePicker.TableRow>
                    )}
                  </Index>
                </DatePicker.TableBody>
              </DatePicker.Table>
            </>
          )}
        </DatePicker.Context>
      </DatePicker.View>
    </DatePicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DatePicker } from '@ark-ui/vue/date-picker'
</script>

<template>
  <DatePicker.Root inline>
    <DatePicker.Input />
    <DatePicker.View view="day">
      <DatePicker.Context v-slot="api">
        <DatePicker.ViewControl>
          <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
          <DatePicker.ViewTrigger>
            <DatePicker.RangeText />
          </DatePicker.ViewTrigger>
          <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
        </DatePicker.ViewControl>
        <DatePicker.Table>
          <DatePicker.TableHead>
            <DatePicker.TableRow>
              <DatePicker.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
                {{ weekDay.short }}
              </DatePicker.TableHeader>
            </DatePicker.TableRow>
          </DatePicker.TableHead>
          <DatePicker.TableBody>
            <DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id">
              <DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
                <DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
              </DatePicker.TableCell>
            </DatePicker.TableRow>
          </DatePicker.TableBody>
        </DatePicker.Table>
      </DatePicker.Context>
    </DatePicker.View>
    <DatePicker.View view="month">
      <DatePicker.Context v-slot="api">
        <DatePicker.ViewControl>
          <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
          <DatePicker.ViewTrigger>
            <DatePicker.RangeText />
          </DatePicker.ViewTrigger>
          <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
        </DatePicker.ViewControl>
        <DatePicker.Table>
          <DatePicker.TableBody>
            <DatePicker.TableRow v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })" :key="id">
              <DatePicker.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
                <DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
              </DatePicker.TableCell>
            </DatePicker.TableRow>
          </DatePicker.TableBody>
        </DatePicker.Table>
      </DatePicker.Context>
    </DatePicker.View>
    <DatePicker.View view="year">
      <DatePicker.Context v-slot="api">
        <DatePicker.ViewControl>
          <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
          <DatePicker.ViewTrigger>
            <DatePicker.RangeText />
          </DatePicker.ViewTrigger>
          <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
        </DatePicker.ViewControl>
        <DatePicker.Table>
          <DatePicker.TableBody>
            <DatePicker.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
              <DatePicker.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
                <DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
              </DatePicker.TableCell>
            </DatePicker.TableRow>
          </DatePicker.TableBody>
        </DatePicker.Table>
      </DatePicker.Context>
    </DatePicker.View>
  </DatePicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DatePicker } from '@ark-ui/svelte/date-picker'
</script>

<DatePicker.Root inline>
  <DatePicker.Input />
  <DatePicker.View view="day">
    <DatePicker.Context>
      {#snippet render(datePicker)}
        <DatePicker.ViewControl>
          <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
          <DatePicker.ViewTrigger>
            <DatePicker.RangeText />
          </DatePicker.ViewTrigger>
          <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
        </DatePicker.ViewControl>
        <DatePicker.Table>
          <DatePicker.TableHead>
            <DatePicker.TableRow>
              {#each datePicker().weekDays as weekDay}
                <DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
              {/each}
            </DatePicker.TableRow>
          </DatePicker.TableHead>
          <DatePicker.TableBody>
            {#each datePicker().weeks as week}
              <DatePicker.TableRow>
                {#each week as day}
                  <DatePicker.TableCell value={day}>
                    <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                {/each}
              </DatePicker.TableRow>
            {/each}
          </DatePicker.TableBody>
        </DatePicker.Table>
      {/snippet}
    </DatePicker.Context>
  </DatePicker.View>
  <DatePicker.View view="month">
    <DatePicker.Context>
      {#snippet render(datePicker)}
        <DatePicker.ViewControl>
          <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
          <DatePicker.ViewTrigger>
            <DatePicker.RangeText />
          </DatePicker.ViewTrigger>
          <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
        </DatePicker.ViewControl>
        <DatePicker.Table>
          <DatePicker.TableBody>
            {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months}
              <DatePicker.TableRow>
                {#each months as month}
                  <DatePicker.TableCell value={month.value}>
                    <DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                {/each}
              </DatePicker.TableRow>
            {/each}
          </DatePicker.TableBody>
        </DatePicker.Table>
      {/snippet}
    </DatePicker.Context>
  </DatePicker.View>
  <DatePicker.View view="year">
    <DatePicker.Context>
      {#snippet render(datePicker)}
        <DatePicker.ViewControl>
          <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
          <DatePicker.ViewTrigger>
            <DatePicker.RangeText />
          </DatePicker.ViewTrigger>
          <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
        </DatePicker.ViewControl>
        <DatePicker.Table>
          <DatePicker.TableBody>
            {#each datePicker().getYearsGrid({ columns: 4 }) as years}
              <DatePicker.TableRow>
                {#each years as year}
                  <DatePicker.TableCell value={year.value}>
                    <DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                {/each}
              </DatePicker.TableRow>
            {/each}
          </DatePicker.TableBody>
        </DatePicker.Table>
      {/snippet}
    </DatePicker.Context>
  </DatePicker.View>
</DatePicker.Root>

```

### 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: root-provider**

#### React

```tsx
import { DatePicker, useDatePicker } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'

export const RootProvider = () => {
  const datePicker = useDatePicker()

  return (
    <>
      <button onClick={() => datePicker.clearValue()}>Clear</button>

      <DatePicker.RootProvider value={datePicker}>
        <DatePicker.Label>Label</DatePicker.Label>
        <DatePicker.Control>
          <DatePicker.Input />
          <DatePicker.Trigger>📅</DatePicker.Trigger>
          <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
        </DatePicker.Control>
        <Portal>
          <DatePicker.Positioner>
            <DatePicker.Content>
              <DatePicker.YearSelect />
              <DatePicker.MonthSelect />
              <DatePicker.View view="day">
                <DatePicker.Context>
                  {(datePicker) => (
                    <>
                      <DatePicker.ViewControl>
                        <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                        <DatePicker.ViewTrigger>
                          <DatePicker.RangeText />
                        </DatePicker.ViewTrigger>
                        <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                      </DatePicker.ViewControl>
                      <DatePicker.Table>
                        <DatePicker.TableHead>
                          <DatePicker.TableRow>
                            {datePicker.weekDays.map((weekDay, id) => (
                              <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>
                            ))}
                          </DatePicker.TableRow>
                        </DatePicker.TableHead>
                        <DatePicker.TableBody>
                          {datePicker.weeks.map((week, id) => (
                            <DatePicker.TableRow key={id}>
                              {week.map((day, id) => (
                                <DatePicker.TableCell key={id} value={day}>
                                  <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                                </DatePicker.TableCell>
                              ))}
                            </DatePicker.TableRow>
                          ))}
                        </DatePicker.TableBody>
                      </DatePicker.Table>
                    </>
                  )}
                </DatePicker.Context>
              </DatePicker.View>
              <DatePicker.View view="month">
                <DatePicker.Context>
                  {(datePicker) => (
                    <>
                      <DatePicker.ViewControl>
                        <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                        <DatePicker.ViewTrigger>
                          <DatePicker.RangeText />
                        </DatePicker.ViewTrigger>
                        <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                      </DatePicker.ViewControl>
                      <DatePicker.Table>
                        <DatePicker.TableBody>
                          {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
                            <DatePicker.TableRow key={id}>
                              {months.map((month, id) => (
                                <DatePicker.TableCell key={id} value={month.value}>
                                  <DatePicker.TableCellTrigger>{month.label}</DatePicker.TableCellTrigger>
                                </DatePicker.TableCell>
                              ))}
                            </DatePicker.TableRow>
                          ))}
                        </DatePicker.TableBody>
                      </DatePicker.Table>
                    </>
                  )}
                </DatePicker.Context>
              </DatePicker.View>
              <DatePicker.View view="year">
                <DatePicker.Context>
                  {(datePicker) => (
                    <>
                      <DatePicker.ViewControl>
                        <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                        <DatePicker.ViewTrigger>
                          <DatePicker.RangeText />
                        </DatePicker.ViewTrigger>
                        <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                      </DatePicker.ViewControl>
                      <DatePicker.Table>
                        <DatePicker.TableBody>
                          {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
                            <DatePicker.TableRow key={id}>
                              {years.map((year, id) => (
                                <DatePicker.TableCell key={id} value={year.value}>
                                  <DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
                                </DatePicker.TableCell>
                              ))}
                            </DatePicker.TableRow>
                          ))}
                        </DatePicker.TableBody>
                      </DatePicker.Table>
                    </>
                  )}
                </DatePicker.Context>
              </DatePicker.View>
            </DatePicker.Content>
          </DatePicker.Positioner>
        </Portal>
      </DatePicker.RootProvider>
    </>
  )
}

```

#### Solid

```tsx
import { DatePicker, useDatePicker } from '@ark-ui/solid/date-picker'
import { Index, Portal } from 'solid-js/web'

export const RootProvider = () => {
  const datePicker = useDatePicker()

  return (
    <>
      <button onClick={() => datePicker().clearValue()}>Clear</button>

      <DatePicker.RootProvider value={datePicker}>
        <DatePicker.Label>Label</DatePicker.Label>

        <DatePicker.Control>
          <DatePicker.Input />
          <DatePicker.Trigger>📅</DatePicker.Trigger>
          <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
        </DatePicker.Control>

        <Portal>
          <DatePicker.Positioner>
            <DatePicker.Content>
              <DatePicker.YearSelect />
              <DatePicker.MonthSelect />
              <DatePicker.View view="day">
                <DatePicker.Context>
                  {(context) => (
                    <>
                      <DatePicker.ViewControl>
                        <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                        <DatePicker.ViewTrigger>
                          <DatePicker.RangeText />
                        </DatePicker.ViewTrigger>
                        <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                      </DatePicker.ViewControl>

                      <DatePicker.Table>
                        <DatePicker.TableHead>
                          <DatePicker.TableRow>
                            <Index each={context().weekDays}>
                              {(weekDay) => <DatePicker.TableHeader>{weekDay().short}</DatePicker.TableHeader>}
                            </Index>
                          </DatePicker.TableRow>
                        </DatePicker.TableHead>

                        <DatePicker.TableBody>
                          <Index each={context().weeks}>
                            {(week) => (
                              <DatePicker.TableRow>
                                <Index each={week()}>
                                  {(day) => (
                                    <DatePicker.TableCell value={day()}>
                                      <DatePicker.TableCellTrigger>{day().day}</DatePicker.TableCellTrigger>
                                    </DatePicker.TableCell>
                                  )}
                                </Index>
                              </DatePicker.TableRow>
                            )}
                          </Index>
                        </DatePicker.TableBody>
                      </DatePicker.Table>
                    </>
                  )}
                </DatePicker.Context>
              </DatePicker.View>

              <DatePicker.View view="month">
                <DatePicker.Context>
                  {(context) => (
                    <>
                      <DatePicker.ViewControl>
                        <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                        <DatePicker.ViewTrigger>
                          <DatePicker.RangeText />
                        </DatePicker.ViewTrigger>
                        <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                      </DatePicker.ViewControl>

                      <DatePicker.Table>
                        <DatePicker.TableBody>
                          <Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
                            {(months) => (
                              <DatePicker.TableRow>
                                <Index each={months()}>
                                  {(month) => (
                                    <DatePicker.TableCell value={month().value}>
                                      <DatePicker.TableCellTrigger>{month().label}</DatePicker.TableCellTrigger>
                                    </DatePicker.TableCell>
                                  )}
                                </Index>
                              </DatePicker.TableRow>
                            )}
                          </Index>
                        </DatePicker.TableBody>
                      </DatePicker.Table>
                    </>
                  )}
                </DatePicker.Context>
              </DatePicker.View>

              <DatePicker.View view="year">
                <DatePicker.Context>
                  {(context) => (
                    <>
                      <DatePicker.ViewControl>
                        <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                        <DatePicker.ViewTrigger>
                          <DatePicker.RangeText />
                        </DatePicker.ViewTrigger>
                        <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                      </DatePicker.ViewControl>

                      <DatePicker.Table>
                        <DatePicker.TableBody>
                          <Index each={context().getYearsGrid({ columns: 4 })}>
                            {(years) => (
                              <DatePicker.TableRow>
                                <Index each={years()}>
                                  {(year) => (
                                    <DatePicker.TableCell value={year().value}>
                                      <DatePicker.TableCellTrigger>{year().label}</DatePicker.TableCellTrigger>
                                    </DatePicker.TableCell>
                                  )}
                                </Index>
                              </DatePicker.TableRow>
                            )}
                          </Index>
                        </DatePicker.TableBody>
                      </DatePicker.Table>
                    </>
                  )}
                </DatePicker.Context>
              </DatePicker.View>
            </DatePicker.Content>
          </DatePicker.Positioner>
        </Portal>
      </DatePicker.RootProvider>
    </>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { DatePicker, useDatePicker } from '@ark-ui/vue/date-picker'

const datePicker = useDatePicker()
</script>

<template>
  <button @click="datePicker.clearValue()">Clear</button>

  <DatePicker.RootProvider :value="datePicker">
    <DatePicker.Label>Label</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input />
      <DatePicker.Trigger>📅</DatePicker.Trigger>
      <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
    </DatePicker.Control>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.YearSelect />
        <DatePicker.MonthSelect />
        <DatePicker.View view="day">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableHead>
                <DatePicker.TableRow>
                  <DatePicker.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
                    {{ weekDay.short }}
                  </DatePicker.TableHeader>
                </DatePicker.TableRow>
              </DatePicker.TableHead>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(week, id) in api.weeks" :key="id">
                  <DatePicker.TableCell v-for="(day, id) in week" :key="id" :value="day">
                    <DatePicker.TableCellTrigger>{{ day.day }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
        <DatePicker.View view="month">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableBody>
                <DatePicker.TableRow
                  v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
                  :key="id"
                >
                  <DatePicker.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
                    <DatePicker.TableCellTrigger>{{ month.label }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
        <DatePicker.View view="year">
          <DatePicker.Context v-slot="api">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>
              <DatePicker.TableBody>
                <DatePicker.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
                  <DatePicker.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
                    <DatePicker.TableCellTrigger>{{ year.label }}</DatePicker.TableCellTrigger>
                  </DatePicker.TableCell>
                </DatePicker.TableRow>
              </DatePicker.TableBody>
            </DatePicker.Table>
          </DatePicker.Context>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </DatePicker.RootProvider>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { DatePicker, useDatePicker } from '@ark-ui/svelte/date-picker'
  import { Portal } from '@ark-ui/svelte/portal'

  const id = $props.id()
  const datePicker = useDatePicker({ id })
</script>

<DatePicker.RootProvider value={datePicker}>
  <DatePicker.Label>Label</DatePicker.Label>
  <DatePicker.Control>
    <DatePicker.Input />
    <DatePicker.Trigger>📅</DatePicker.Trigger>
    <DatePicker.ClearTrigger>Clear</DatePicker.ClearTrigger>
  </DatePicker.Control>
  <Portal>
    <DatePicker.Positioner>
      <DatePicker.Content>
        <DatePicker.View view="day">
          <DatePicker.ViewControl>
            <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
            <DatePicker.ViewTrigger>
              <DatePicker.RangeText />
            </DatePicker.ViewTrigger>
            <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
          </DatePicker.ViewControl>
          <DatePicker.Table>
            <DatePicker.TableHead>
              <DatePicker.TableRow>
                {#each datePicker().weekDays as weekDay}
                  <DatePicker.TableHeader>{weekDay.short}</DatePicker.TableHeader>
                {/each}
              </DatePicker.TableRow>
            </DatePicker.TableHead>
            <DatePicker.TableBody>
              {#each datePicker().weeks as week}
                <DatePicker.TableRow>
                  {#each week as day}
                    <DatePicker.TableCell value={day}>
                      <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
                    </DatePicker.TableCell>
                  {/each}
                </DatePicker.TableRow>
              {/each}
            </DatePicker.TableBody>
          </DatePicker.Table>
        </DatePicker.View>
      </DatePicker.Content>
    </DatePicker.Positioner>
  </Portal>
</DatePicker.RootProvider>

```

> 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" |
| `[data-invalid]` | Present when invalid |


**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" |
| `[data-invalid]` | Present when invalid |


**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" |
| `[data-invalid]` | Present when invalid |


**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" |
| `[data-invalid]` | Present when invalid |


**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 |
| `disabled` | `boolean` | Whether the date picker is disabled |
| `invalid` | `boolean` | Whether the date picker is invalid |
| `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" />