# 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. --- ## Anatomy ```tsx ``` ## Examples **Example: basic** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const Basic = () => { return ( Label Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const Basic = () => { return ( Label Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Default Value Use the `defaultValue` prop with `parseDate` to set the initial date value. **Example: default-value** #### React ```tsx import { DatePicker, parseDate } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const DefaultValue = () => { return ( Label Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker, parseDate } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const DefaultValue = () => { return ( Label Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Controlled Use the `value` and `onValueChange` props to control the date picker's value programmatically. **Example: controlled** #### React ```tsx import { DatePicker, parseDate } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import { useState } from 'react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const Controlled = () => { const [value, setValue] = useState([parseDate('2022-01-01')]) return ( setValue(e.value)}> Label Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker, parseDate } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index, createSignal } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const Controlled = () => { const [value, setValue] = createSignal([parseDate('2022-01-01')]) return ( setValue(e.value)}> Label Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Root Provider An alternative way to control the date picker is to use the `RootProvider` component and the `useDatePicker` hook. This way you can access the state and methods from outside the component. **Example: root-provider** #### React ```tsx import { DatePicker, useDatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const RootProvider = () => { const datePicker = useDatePicker() return (

Label Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )}

) } ``` #### Solid ```tsx import { DatePicker, useDatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const RootProvider = () => { const datePicker = useDatePicker() return ( <> Label Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Default View Use the `defaultView` prop to set which view (day, month, or year) the calendar opens to initially. **Example: default-view** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const DefaultView = () => { return ( Label Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const DefaultView = () => { return ( Label Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Month and Year Select Use `MonthSelect` and `YearSelect` components to create a header with dropdown selects for quick month/year navigation, alongside the prev/next triggers. **Example: month-year-select** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import styles from 'styles/date-picker.module.css' export const MonthYearSelect = () => { return ( Label {(datePicker) => ( <>

{datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import styles from 'styles/date-picker.module.css' export const MonthYearSelect = () => { return ( Label {(context) => ( <>

{(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label {#snippet render(datePicker)}

{#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} ``` ### Range 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-selection** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const RangeSelection = () => { return ( Label Clear Last 7 days {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon } from 'lucide-solid' import { Index, createMemo } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const RangeSelection = () => { return ( Label Clear Last 7 days

{(context) => ( {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => { const offset = createMemo(() => context().getOffset({ months: 1 })) return ( {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} ) }}

) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear Last 7 days {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Multiple Use the `selectionMode="multiple"` prop to allow selecting multiple dates. This example also shows how to display selected dates as removable tags. **Example: multi-selection** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import type { DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const formatWithDay = (date: DateValue) => { const jsDate = date.toDate('UTC') return jsDate.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', }) } export const MultiSelection = () => { return ( Label {(datePicker) => (

{datePicker.value.length === 0 ? ( Select dates... ) : ( datePicker.value.map((date, index) => ( {formatWithDay(date)} )) )}

)} Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { For, Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const MultiSelection = () => { return ( Label {(context) => (

{context().value.length === 0 ? ( Select dates... ) : ( {(date, index) => ( {date.toDate('UTC').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric', })} )} )}

)} Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Multiple Months To create a date picker that displays multiple months side by side: - Set the `numOfMonths` prop to the number of months you want to display. - Use the `datePicker.getOffset({ months: 1 })` to get data for the next month. **Example: multiple-months** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const MultipleMonths = () => { return ( Label Clear

{(datePicker) => ( {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => { const offset = datePicker.getOffset({ months: 1 }) return ( {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {offset.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} ) }}

) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index, createMemo } from 'solid-js' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const MultipleMonths = () => { return ( Label Clear

{(datePicker) => ( {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(datePicker) => { const offset = createMemo(() => datePicker().getOffset({ months: 1 })) return ( {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} ) }}

) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear

{#snippet render(datePicker)} {#each datePicker().weekDays as weekDay, id (id)} {weekDay.short} {/each} {#each datePicker().weeks as week, id} {#each week as day, id (id)} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {@const offset = datePicker().getOffset({ months: 1 })} {#each datePicker().weekDays as weekDay, id (id)} {weekDay.short} {/each} {#each offset.weeks as week, id (id)} {#each week as day, id (id)} {day.day} {/each} {/each} {/snippet}

``` ### Presets Use the `DatePicker.PresetTrigger` component to add quick-select preset options like "Last 7 days" or "This month". **Example: presets** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const Presets = () => { return ( Label Clear

Last 7 days Last 30 days This month Last month

{(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const Presets = () => { return ( Label Clear

Last 7 days Last 30 days This month

{(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear

Last 7 days Last 30 days This month

{#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Min and Max Use the `min` and `max` props with `parseDate` to restrict the selectable date range. Dates outside this range will be disabled. **Example: min-max** #### React ```tsx import { DatePicker, parseDate } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const MinMax = () => { return ( Label Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker, parseDate } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const MinMax = () => { return ( Label Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Unavailable Use the `isDateUnavailable` prop to mark specific dates as unavailable. This example disables weekends. **Example: unavailable** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import type { DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const isWeekend = (date: DateValue) => { const dayOfWeek = date.toDate('UTC').getDay() return dayOfWeek === 0 || dayOfWeek === 6 } export const Unavailable = () => { return ( Label Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import type { DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const isWeekend = (date: DateValue) => { const dayOfWeek = date.toDate('UTC').getDay() return dayOfWeek === 0 || dayOfWeek === 6 } export const Unavailable = () => { return ( Label Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Locale Use the `locale` prop to set the language and formatting, and `startOfWeek` to set the first day of the week (0 = Sunday, 1 = Monday, etc.). **Example: locale** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const Locale = () => { return ( Datum auswählen Löschen {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' export const Locale = () => { return ( Label Clear {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Month Picker Create a month-only picker by setting `defaultView="month"` and `minView="month"`. Use custom `format` and `parse` functions to handle month/year input format. **Example: month-picker** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarDate, type DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const format = (date: DateValue) => { const month = date.month.toString().padStart(2, '0') const year = date.year.toString() return `${month}/${year}` } const parse = (string: string) => { const fullRegex = /^(\d{1,2})\/(\d{4})$/ const fullMatch = string.match(fullRegex) if (fullMatch) { const [_, month, year] = fullMatch.map(Number) return new CalendarDate(year, month, 1) } } export const MonthPicker = () => { return ( Label Clear {(datePicker) => ( {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarDate, type DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const format = (date: DateValue) => { const month = date.month.toString().padStart(2, '0') const year = date.year.toString() return `${month}/${year}` } const parse = (string: string) => { const fullRegex = /^(\d{1,2})\/(\d{4})$/ const fullMatch = string.match(fullRegex) if (fullMatch) { const [_, month, year] = fullMatch.map(Number) return new CalendarDate(year, month, 1) } } export const MonthPicker = () => { return ( Label Clear {(context) => ( {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Year Picker Create a year-only picker by setting `defaultView="year"` and `minView="year"`. Use custom `format` and `parse` functions to handle year-only input format. **Example: year-picker** #### React ```tsx import { DatePicker, parseDate } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import type { DateValue } from '@internationalized/date' import { CalendarIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const format = (date: DateValue) => date.year.toString() const parse = (string: string | undefined) => { if (string === '' || !string) return const year = Number(string) if (year < 100) { const currentYear = new Date().getFullYear() const currentCentury = Math.floor(currentYear / 100) * 100 return parseDate(new Date(currentCentury + year, 0)) } return parseDate(new Date(Number(string), 0)) } export const YearPicker = () => { return ( Label Clear {(datePicker) => ( {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker, parseDate } from '@ark-ui/solid/date-picker' import type { DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const format = (date: DateValue) => date.year.toString() const parse = (string: string | undefined) => { if (string === '' || !string) return const year = Number(string) if (year < 100) { const currentYear = new Date().getFullYear() const currentCentury = Math.floor(currentYear / 100) * 100 return parseDate(new Date(currentCentury + year, 0)) } return parseDate(new Date(Number(string), 0)) } export const YearPicker = () => { return ( Label Clear {(context) => ( {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### 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' import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import styles from 'styles/date-picker.module.css' export const Inline = () => { return (

) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import styles from 'styles/date-picker.module.css' export const Inline = () => { return ( {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} {(context) => ( <> {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( <> {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Custom Parsing Use the `parse` prop to implement custom date parsing logic. This allows users to enter dates in flexible formats like "25/12" or "25/12/24" which are automatically converted to valid dates. **Example: format-parse** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarDate, type DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const parse = (value: string) => { const fullRegex = /^(\d{1,2})\/(\d{1,2})\/(\d{2})$/ const fullMatch = value.match(fullRegex) if (fullMatch) { const [_, day, month, year] = fullMatch.map(Number) try { return new CalendarDate(year + 2000, month, day) } catch { return undefined } } const partialRegex = /^(\d{1,2})\/(\d{1,2})$/ const partialMatch = value.match(partialRegex) if (partialMatch) { const [_, day, month] = partialMatch.map(Number) const currentYear = new Date().getFullYear() try { return new CalendarDate(currentYear, month, day) } catch { return undefined } } const dayRegex = /^(\d{1,2})$/ const dayMatch = value.match(dayRegex) if (dayMatch) { const [_, day] = dayMatch.map(Number) const currentYear = new Date().getFullYear() return new CalendarDate(currentYear, 1, day) } return undefined } const format = (date: DateValue) => { const day = date.day.toString().padStart(2, '0') const month = date.month.toString().padStart(2, '0') const year = (date.year % 100).toString().padStart(2, '0') return `${day}/${month}/${year}` } export const FormatParse = () => { return ( Label Clear {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} {(datePicker) => ( <> {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( <> {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` ### Month Picker Range Create a month range picker by combining `selectionMode="range"` with `defaultView="month"` and `minView="month"`. This is useful for selecting billing periods or date ranges by month. **Example: month-picker-range** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarDate, type DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const format = (date: DateValue) => { const month = date.month.toString().padStart(2, '0') const year = date.year.toString() return `${month}/${year}` } const parse = (string: string) => { const fullRegex = /^(\d{1,2})\/(\d{4})$/ const fullMatch = string.match(fullRegex) if (fullMatch) { const [_, month, year] = fullMatch.map(Number) return new CalendarDate(year, month, 1) } } export const MonthPickerRange = () => { return ( Label Clear {(datePicker) => ( {datePicker.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => ( {months.map((month, id) => ( {month.label} ))} ))} )} {(datePicker) => ( {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarDate, type DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const format = (date: DateValue) => { const month = date.month.toString().padStart(2, '0') const year = date.year.toString() return `${month}/${year}` } const parse = (string: string) => { const fullRegex = /^(\d{1,2})\/(\d{4})$/ const fullMatch = string.match(fullRegex) if (fullMatch) { const [_, month, year] = fullMatch.map(Number) return new CalendarDate(year, month, 1) } } export const MonthPickerRange = () => { return ( Label Clear {(context) => ( {(months) => ( {(month) => ( {month().label} )} )} )} {(context) => ( {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {#each datePicker().getMonthsGrid({ columns: 4, format: 'short' }) as months} {#each months as month} {month.label} {/each} {/each} {/snippet} {#snippet render(datePicker)} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### Year Range Create a year range picker by combining `selectionMode="range"` with `defaultView="year"` and `minView="year"`. This is useful for selecting multi-year periods. **Example: year-picker-range** #### React ```tsx import { DatePicker } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarDate, type DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const format = (date: DateValue) => date.year.toString() const parse = (string: string) => { const fullRegex = /^(\d{4})$/ const fullMatch = string.match(fullRegex) if (fullMatch) { const [_, year] = fullMatch.map(Number) return new CalendarDate(year, 1, 1) } } export const YearPickerRange = () => { return ( Label Clear {(datePicker) => ( <> {datePicker.getDecade().start} - {datePicker.getDecade().end} {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => ( {years.map((year, id) => ( {year.label} ))} ))} )} ) } ``` #### Solid ```tsx import { DatePicker } from '@ark-ui/solid/date-picker' import { CalendarDate, type DateValue } from '@internationalized/date' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const format = (date: DateValue) => date.year.toString() const parse = (string: string | undefined) => { if (!string) return const fullRegex = /^(\d{4})$/ const fullMatch = string.match(fullRegex) if (fullMatch) { const [_, year] = fullMatch.map(Number) return new CalendarDate(year, 1, 1) } } export const YearPickerRange = () => { return ( Label Clear {(context) => ( <> {context().getDecade().start} - {context().getDecade().end} {(years) => ( {(year) => ( {year().label} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Label Clear {#snippet render(datePicker)} {datePicker().getDecade().start} - {datePicker().getDecade().end} {#each datePicker().getYearsGrid({ columns: 4 }) as years} {#each years as year} {year.label} {/each} {/each} {/snippet} ``` ### With Time Integrate a time input with the date picker using `CalendarDateTime` from `@internationalized/date`. The time input updates the hour and minute of the selected date value. **Example: with-time** #### React ```tsx import { CalendarDateTime, DateFormatter, getLocalTimeZone } from '@internationalized/date' import { DatePicker, type DatePickerValueChangeDetails } from '@ark-ui/react/date-picker' import { Portal } from '@ark-ui/react/portal' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react' import { useState } from 'react' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const formatter = new DateFormatter('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', }) export const WithTime = () => { const [value, setValue] = useState([new CalendarDateTime(2025, 1, 29, 14, 30)]) const timeValue = value[0] ? `${String(value[0].hour).padStart(2, '0')}:${String(value[0].minute).padStart(2, '0')}` : '' const onTimeChange = (e: React.ChangeEvent) => { const [hours, minutes] = e.currentTarget.value.split(':').map(Number) setValue((prev) => { const current = prev[0] ?? new CalendarDateTime(2025, 1, 1, 0, 0) return [current.set({ hour: hours, minute: minutes })] }) } const onDateChange = (details: DatePickerValueChangeDetails) => { const newDate = details.value[0] if (!newDate) return setValue([]) const prevTime = value[0] ?? { hour: 0, minute: 0 } setValue([new CalendarDateTime(newDate.year, newDate.month, newDate.day, prevTime.hour, prevTime.minute)]) } return ( Date and time {value[0] ? formatter.format(value[0].toDate(getLocalTimeZone())) : 'Select date and time'} {(datePicker) => ( <> {datePicker.weekDays.map((weekDay, id) => ( {weekDay.short} ))} {datePicker.weeks.map((week, id) => ( {week.map((day, id) => ( {day.day} ))} ))} )} ) } ``` #### Solid ```tsx import { CalendarDateTime, DateFormatter, getLocalTimeZone } from '@internationalized/date' import { DatePicker, type DatePickerValueChangeDetails } from '@ark-ui/solid/date-picker' import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-solid' import { Index, createSignal } from 'solid-js' import { Portal } from 'solid-js/web' import button from 'styles/button.module.css' import styles from 'styles/date-picker.module.css' const formatter = new DateFormatter('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', }) export const WithTime = () => { const [value, setValue] = createSignal([new CalendarDateTime(2025, 1, 29, 14, 30)]) const timeValue = () => { const v = value()[0] return v ? `${String(v.hour).padStart(2, '0')}:${String(v.minute).padStart(2, '0')}` : '' } const onTimeChange = (e: Event & { currentTarget: HTMLInputElement }) => { const [hours, minutes] = e.currentTarget.value.split(':').map(Number) setValue((prev) => { const current = prev[0] ?? new CalendarDateTime(2025, 1, 1, 0, 0) return [current.set({ hour: hours, minute: minutes })] }) } const onDateChange = (details: DatePickerValueChangeDetails) => { const newDate = details.value[0] if (!newDate) return setValue([]) const prevTime = value()[0] ?? { hour: 0, minute: 0 } setValue([new CalendarDateTime(newDate.year, newDate.month, newDate.day, prevTime.hour, prevTime.minute)]) } return ( Date and time {value()[0] ? formatter.format(value()[0].toDate(getLocalTimeZone())) : 'Select date and time'} {(context) => ( <> {(weekDay) => ( {weekDay().short} )} {(week) => ( {(day) => ( {day().day} )} )} )} ) } ``` #### Vue ```vue ``` #### Svelte ```svelte Date and time {value[0] ? formatter.format(value[0].toDate(getLocalTimeZone())) : 'Select date and time'} {#snippet render(datePicker)} {#each datePicker().weekDays as weekDay} {weekDay.short} {/each} {#each datePicker().weeks as week} {#each week as day} {day.day} {/each} {/each} {/snippet} ``` ## 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 | **Content CSS Variables:** | Variable | Description | |----------|-------------| | `--layer-index` | The index of the dismissable in the layer stack | | `--nested-layer-count` | The number of nested date-pickers | **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. | **Positioner CSS Variables:** | Variable | Description | |----------|-------------| | `--reference-width` | The width of the reference element | | `--reference-height` | The height of the root | | `--available-width` | The available width in viewport | | `--available-height` | The available height in viewport | | `--x` | The x position for transform | | `--y` | The y position for transform | | `--z-index` | The z-index value | | `--transform-origin` | The transform origin for animations | **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 | **Content CSS Variables:** | Variable | Description | |----------|-------------| | `--layer-index` | The index of the dismissable in the layer stack | | `--nested-layer-count` | The number of nested date-pickers | **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. | **Positioner CSS Variables:** | Variable | Description | |----------|-------------| | `--reference-width` | The width of the reference element | | `--reference-height` | The height of the root | | `--available-width` | The available width in viewport | | `--available-height` | The available height in viewport | | `--x` | The x position for transform | | `--y` | The y position for transform | | `--z-index` | The z-index value | | `--transform-origin` | The transform origin for animations | **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 | **Content CSS Variables:** | Variable | Description | |----------|-------------| | `--layer-index` | The index of the dismissable in the layer stack | | `--nested-layer-count` | The number of nested date-pickers | **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. | **Positioner CSS Variables:** | Variable | Description | |----------|-------------| | `--reference-width` | The width of the reference element | | `--reference-height` | The height of the root | | `--available-width` | The available width in viewport | | `--available-height` | The available height in viewport | | `--x` | The x position for transform | | `--y` | The y position for transform | | `--z-index` | The z-index value | | `--transform-origin` | The transform origin for animations | **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` | 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` | 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 | **Content CSS Variables:** | Variable | Description | |----------|-------------| | `--layer-index` | The index of the dismissable in the layer stack | | `--nested-layer-count` | The number of nested date-pickers | **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 | | **Positioner CSS Variables:** | Variable | Description | |----------|-------------| | `--reference-width` | The width of the reference element | | `--reference-height` | The height of the root | | `--available-width` | The available width in viewport | | `--available-height` | The available height in viewport | | `--x` | The x position for transform | | `--y` | The y position for transform | | `--z-index` | The z-index value | | `--transform-origin` | The transform origin for animations | **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 **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` | 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