)
}
```
### 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.
```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 (
LabelClear
)
}
```
### 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.
```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 (
LabelClear
{(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.
```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 (
LabelClear
{(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}
))}
))}
)}
)
}
```
### 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.
```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 (
LabelClear
{(datePicker) => (
<>
{datePicker.getDecade().start} - {datePicker.getDecade().end}
{datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (
{years.map((year, id) => (
{year.label}
))}
))}
)}
)
}
```
### Select Today
Use the `selectToday` method from the date picker context to add a "Today" button that quickly selects the current date.
```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 SelectToday = () => {
return (
LabelClear
{(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}
))}
))}
)}
)
}
```
### Fixed Weeks
Use the `fixedWeeks` prop to always display 6 weeks in the calendar, preventing layout shifts when navigating between
months.
```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 FixedWeeks = () => {
return (
LabelClear
{(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}
))}
))}
)}
)
}
```
### Form
Use the `name` prop to integrate the date picker with native HTML forms. The selected date value will be submitted as
form data. This example also uses `isDateUnavailable` to disable weekends.
```tsx
import { DatePicker } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'
import { isWeekend } 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'
export const Form = () => {
return (
)
}
```
### 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.
```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}
))}
))}
)}
)
}
```
## API Reference
### Props
### Root
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
**`closeOnSelect`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether the calendar should close after the date selection is complete.
This is ignored when the selection mode is `multiple`.
**`createCalendar`**
Type: `(identifier: CalendarIdentifier) => Calendar`
Required: false
Default Value: `undefined`
Description: A function that creates a Calendar object for a given calendar identifier.
Enables non-Gregorian calendar support (Persian, Buddhist, Islamic, etc.)
without bundling all calendars by default.
**`defaultFocusedValue`**
Type: `DateValue`
Required: false
Default Value: `undefined`
Description: The initial focused date when rendered.
Use when you don't need to control the focused date of the date picker.
**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: 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`**
Type: `DateValue[]`
Required: false
Default Value: `undefined`
Description: The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s) of the date picker.
**`defaultView`**
Type: `DateView`
Required: false
Default Value: `"day"`
Description: The default view of the calendar
**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the calendar is disabled.
**`fixedWeeks`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6.
**`focusedValue`**
Type: `DateValue`
Required: false
Default Value: `undefined`
Description: The controlled focused date.
**`format`**
Type: `(date: DateValue, details: LocaleDetails) => string`
Required: false
Default Value: `undefined`
Description: The format of the date to display in the input.
**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 ``. Effects pause. Requires React 19+.
**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.
**`ids`**
Type: `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; }>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the date picker. Useful for composition.
**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame
**`inline`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to render the date picker inline
**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the date picker is invalid
**`isDateUnavailable`**
Type: `(date: DateValue, locale: string) => boolean`
Required: false
Default Value: `undefined`
Description: Returns whether a date of the calendar is available.
**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting
**`locale`**
Type: `string`
Required: false
Default Value: `"en-US"`
Description: The locale (BCP 47 language tag) to use when formatting the date.
**`max`**
Type: `DateValue`
Required: false
Default Value: `undefined`
Description: The maximum date that can be selected.
**`maxSelectedDates`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The maximum number of dates that can be selected.
This is only applicable when `selectionMode` is `multiple`.
**`maxView`**
Type: `DateView`
Required: false
Default Value: `"year"`
Description: The maximum view of the calendar
**`min`**
Type: `DateValue`
Required: false
Default Value: `undefined`
Description: The minimum date that can be selected.
**`minView`**
Type: `DateView`
Required: false
Default Value: `"day"`
Description: The minimum view of the calendar
**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The `name` attribute of the input element.
**`numOfMonths`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The number of months to display.
**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state
**`onFocusChange`**
Type: `(details: FocusChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the focused date changes.
**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the calendar opens or closes.
**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the value changes.
**`onViewChange`**
Type: `(details: ViewChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the view changes.
**`onVisibleRangeChange`**
Type: `(details: VisibleRangeChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the visible range changes.
**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The controlled open state of the date picker
**`openOnClick`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to open the calendar when the input is clicked.
**`outsideDaySelectable`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether day outside the visible range can be selected.
**`parse`**
Type: `(value: string, details: LocaleDetails) => DateValue | undefined`
Required: false
Default Value: `undefined`
Description: Function to parse the date from the input back to a DateValue.
**`placeholder`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The placeholder text to display in the input.
**`positioning`**
Type: `PositioningOptions`
Required: false
Default Value: `undefined`
Description: The user provided options used to position the date picker content
**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)
**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the calendar is read-only.
**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the date picker is required
**`selectionMode`**
Type: `SelectionMode`
Required: false
Default Value: `"single"`
Description: 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
**`showWeekNumbers`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to show the week number column in the day view.
**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.
**`startOfWeek`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The first day of the week.
`0` - Sunday
`1` - Monday
`2` - Tuesday
`3` - Wednesday
`4` - Thursday
`5` - Friday
`6` - Saturday
**`timeZone`**
Type: `string`
Required: false
Default Value: `"UTC"`
Description: The time zone to use
**`translations`**
Type: `Partial`
Required: false
Default Value: `undefined`
Description: The localized messages to use.
**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.
**`value`**
Type: `DateValue[]`
Required: false
Default Value: `undefined`
Description: The controlled selected date(s).
**`view`**
Type: `DateView`
Required: false
Default Value: `undefined`
Description: The view of the calendar
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: root
**`data-state`**: "open" | "closed"
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-empty`**: Present when the content is empty
### ClearTrigger
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
### Content
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`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-side`**: The side of the trigger that the content is positioned on
**`data-inline`**: Present when the content is inline
### Control
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: control
**`data-disabled`**: Present when disabled
**`data-placeholder-shown`**: Present when placeholder is shown
### Input
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
**`fixOnBlur`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to fix the input value on blur.
**`index`**
Type: `number`
Required: false
Default Value: `undefined`
Description: The index of the input to focus.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: input
**`data-index`**: The index of the item
**`data-state`**: "open" | "closed"
**`data-placeholder-shown`**: Present when placeholder is shown
**`data-invalid`**: Present when invalid
### Label
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`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
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
### NextTrigger
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: next-trigger
**`data-disabled`**: Present when disabled
### Positioner
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
### PresetTrigger
#### Props
**`value`**
Type: `PresetTriggerValue`
Required: true
Default Value: `undefined`
Description: undefined
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
### PrevTrigger
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: prev-trigger
**`data-disabled`**: Present when disabled
### RangeText
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
### RootProvider
#### Props
**`value`**
Type: `UseDatePickerReturn`
Required: true
Default Value: `undefined`
Description: undefined
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 ``. Effects pause. Requires React 19+.
**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame
**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting
**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state
**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)
**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.
**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.
### TableBody
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: table-body
**`data-view`**: The view of the tablebody
**`data-disabled`**: Present when disabled
### TableCell
#### Props
**`value`**
Type: `number | DateValue`
Required: true
Default Value: `undefined`
Description: undefined
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
**`columns`**
Type: `number`
Required: false
Default Value: `undefined`
Description: undefined
**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: undefined
**`visibleRange`**
Type: `VisibleRange`
Required: false
Default Value: `undefined`
Description: undefined
### TableCellTrigger
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
### TableHead
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: table-head
**`data-view`**: The view of the tablehead
**`data-disabled`**: Present when disabled
### TableHeader
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: table-header
**`data-view`**: The view of the tableheader
**`data-disabled`**: Present when disabled
### Table
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
**`columns`**
Type: `number`
Required: false
Default Value: `undefined`
Description: undefined
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: table
**`data-columns`**:
**`data-view`**: The view of the table
### TableRow
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: table-row
**`data-disabled`**: Present when disabled
**`data-view`**: The view of the tablerow
### Trigger
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: trigger
**`data-placement`**: The placement of the trigger
**`data-side`**: The side of the trigger that the trigger is positioned on
**`data-state`**: "open" | "closed"
**`data-placeholder-shown`**: Present when placeholder is shown
### ValueText
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
**`placeholder`**
Type: `string`
Required: false
Default Value: `undefined`
Description: Text to display when no date is selected.
**`separator`**
Type: `string`
Required: false
Default Value: `", "`
Description: The separator to use between multiple date values when using default rendering.
### ValueTextRender
#### Props
**`index`**
Type: `number`
Required: true
Default Value: `undefined`
Description: undefined
**`remove`**
Type: `() => void`
Required: true
Default Value: `undefined`
Description: undefined
**`value`**
Type: `DateValue`
Required: true
Default Value: `undefined`
Description: undefined
**`valueAsString`**
Type: `string`
Required: true
Default Value: `undefined`
Description: undefined
### ViewControl
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: view-control
**`data-view`**: The view of the viewcontrol
### View
#### Props
**`view`**
Type: `DateView`
Required: true
Default Value: `undefined`
Description: undefined
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: view
**`data-view`**: The view of the view
### ViewTrigger
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: view-trigger
**`data-view`**: The view of the viewtrigger
**`data-disabled`**: Present when disabled
### WeekNumberCell
#### Props
**`week`**
Type: `DateValue[]`
Required: true
Default Value: `undefined`
Description: undefined
**`weekIndex`**
Type: `number`
Required: true
Default Value: `undefined`
Description: undefined
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: week-number-cell
**`data-view`**: The view of the weeknumbercell
**`data-week-index`**:
**`data-type`**: The type of the item
**`data-disabled`**: Present when disabled
### WeekNumberHeaderCell
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
#### Data Attributes
**`data-scope`**: date-picker
**`data-part`**: week-number-header-cell
**`data-view`**: The view of the weeknumberheadercell
**`data-type`**: The type of the item
**`data-disabled`**: Present when disabled
### YearSelect
#### Props
**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.
### 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 |
| `readOnly` | `boolean` | Whether the date picker is read-only |
| `inline` | `boolean` | Whether the date picker is rendered inline |
| `numOfMonths` | `number` | The number of months to display |
| `showWeekNumbers` | `boolean` | Whether the week number column is shown in the day view |
| `selectionMode` | `SelectionMode` | The selection mode (single, multiple, or range) |
| `maxSelectedDates` | `number | undefined` | The maximum number of dates that can be selected (only for multiple selection mode). |
| `isMaxSelected` | `boolean` | Whether the maximum number of selected dates has been reached. |
| `view` | `DateView` | The current view of the date picker |
| `getWeekNumber` | `(week: DateValue[]) => number` | Returns the ISO 8601 week number (1-53) for the given week (array of dates). |
| `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. |
| `setTime` | `(time: Time, index?: number) => void` | Sets the time for a specific date value.
Converts CalendarDate to CalendarDateTime if needed. |
| `setFocusedValue` | `(value: DateValue) => void` | Sets the focused date to the given date. |
| `clearValue` | `(options?: { focus?: boolean }) => void` | 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
**`ArrowLeft`**
Description: Moves focus to the previous day within the current week.
**`ArrowRight`**
Description: Moves focus to the next day within the current week.
**`ArrowUp`**
Description: Moves focus to the same day of the week in the previous week.
**`ArrowDown`**
Description: Moves focus to the same day of the week in the next week.
**`Home`**
Description: Moves focus to the first day of the current month.
**`End`**
Description: Moves focus to the last day of the current month.
**`PageUp`**
Description: Moves focus to the same day of the month in the previous month.
**`PageDown`**
Description: Moves focus to the same day of the month in the next month.
**`Enter`**
Description: Selects the focused date and closes the date picker.
**`Esc`**
Description: Closes the date picker without selecting any date.