Date Picker · Elements

ClearTrigger · Content · Control · Input · Label · MonthSelect · NextTrigger · Positioner · PresetTrigger · PrevTrigger · RangeText · Root · Table · TableBody · TableCell · TableCellTrigger · TableHead · TableHeader · TableRow · Trigger · View · ViewControl · ViewTrigger · YearSelect

#ClearTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#Input

Prop	Type	Default	Description
`fixOnBlur`	`boolean \| undefined`	`true`	Whether to fix the input value on blur.
`index`	`number \| undefined`		The index of the input to focus.

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#MonthSelect

A styled part — no props of its own; it takes the anatomy's shared styling.

#NextTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#PresetTrigger

Prop	Type	Default	Description
`value`	`PresetTriggerValue`		—

#PrevTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#RangeText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the field row.
`closeOnSelect`	`boolean`	`true`	Whether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`.
`createCalendar`	`(identifier: datePicker.CalendarIdentifier) => datePicker.Calendar`		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. @example import { createCalendar } from "@internationalized/date" { locale: "fa-IR", createCalendar }
`defaultFocusedValue`	`datePicker.DateValue`		The initial focused date when rendered. Use when you don't need to control the focused date of the date picker.
`defaultOpen`	`boolean`		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`	`datePicker.DateValue[]`		The initial selected date(s) when rendered. Use when you don't need to control the selected date(s) of the date picker.
`defaultView`	`datePicker.DateView`	`"day"`	The default view of the calendar
`disabled`	`boolean`		Whether the calendar is disabled.
`fixedWeeks`	`boolean`		Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.
`focusedValue`	`datePicker.DateValue`		The controlled focused date.
`format`	`(date: datePicker.DateValue, details: datePicker.LocaleDetails) => string`		The format of the date to display in the input.
`id`	`string`		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; cellTrigger(id: string): string; prevTrigger(view: datePicker.DateView): string; nextTrigger(view: datePicker.DateView): string; viewTrigger(view: datePicker.DateView): string; clearTrigger: string; control: string; input(index: number): string; trigger: string; monthSelect: string; yearSelect: string; positioner: string; }>		The ids of the elements in the date picker. Useful for composition.
`inline`	`boolean`		Whether the date picker is inline
`invalid`	`boolean`		Whether the date picker is in an invalid state
`isDateUnavailable`	`(date: datePicker.DateValue, locale: string) => boolean`		Returns whether a date of the calendar is available.
`locale`	`string`	`"en-US"`	The locale (BCP 47 language tag) to use when formatting the date.
`max`	`datePicker.DateValue`		The maximum date that can be selected.
`maxSelectedDates`	`number`		The maximum number of dates that can be selected. This is only applicable when `selectionMode` is `multiple`.
`maxView`	`datePicker.DateView`	`"year"`	The maximum view of the calendar
`min`	`datePicker.DateValue`		The minimum date that can be selected.
`minView`	`datePicker.DateView`	`"day"`	The minimum view of the calendar
`modelValue`	`datePicker.DateValue[]`		The v-model value of the date picker
`name`	`string`		The `name` attribute of the input element.
`numOfMonths`	`number`		The number of months to display.
`open`	`boolean`		The controlled open state of the date picker
`openOnClick`	`boolean`	`false`	Whether to open the calendar when the input is clicked.
`outsideDaySelectable`	`boolean`	`false`	Whether day outside the visible range can be selected.
`parse`	`(value: string, details: datePicker.LocaleDetails) => datePicker.DateValue \| undefined`		Function to parse the date from the input back to a DateValue.
`placeholder`	`string`		The placeholder text to display in the input.
`positioning`	`datePicker.PositioningOptions`		The user provided options used to position the date picker content
`readOnly`	`boolean`		Whether the calendar is read-only.
`required`	`boolean`		Whether the date picker is required
`selectionMode`	`datePicker.SelectionMode`	`"single"`	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`	`boolean`		Whether to show the week number column in the day view.
`startOfWeek`	`number`		The first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday
`timeZone`	`string`	`"UTC"`	The time zone to use
`translations`	`datePicker.IntlTranslations`		The localized messages to use.
`view`	`datePicker.DateView`		The view of the calendar

Event	Payload
`exitComplete`	`—`
`focusChange`	`details: FocusChangeDetails`
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: DateValue[]`
`openChange`	`details: OpenChangeDetails`
`update:open`	`open: boolean`
`viewChange`	`details: ViewChangeDetails`
`visibleRangeChange`	`details: VisibleRangeChangeDetails`
`update:view`	`view: DateView`
`update:focusedValue`	`focusedValue: DateValue`

#TableBody

A styled part — no props of its own; it takes the anatomy's shared styling.

#TableCellTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#TableCell

Prop	Type	Default	Description
`value`	`Reactive<number \| DateValue>`		—

#TableHead

A styled part — no props of its own; it takes the anatomy's shared styling.

#TableHeader

A styled part — no props of its own; it takes the anatomy's shared styling.

#TableRow

A styled part — no props of its own; it takes the anatomy's shared styling.

#Table

Prop	Type	Default	Description
`columns`	`number \| undefined`		—
`id`	`string \| undefined`		—
`view`	`DateView \| undefined`		—

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ValueText

Prop	Type	Default	Description
`placeholder`	`string \| undefined`		Text to display when no date is selected.
`separator`	`string \| undefined`	`", "`	The separator to use between multiple date values when using default rendering.

#ViewControl

A styled part — no props of its own; it takes the anatomy's shared styling.

#ViewTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#View

Prop	Type	Default	Description
`view`	`DateView`		—

#WeekNumberCell

Prop	Type	Default	Description
`week`	`DateValue[]`		—
`weekIndex`	`number`		—

#WeekNumberHeaderCell

A styled part — no props of its own; it takes the anatomy's shared styling.

#YearSelect

A styled part — no props of its own; it takes the anatomy's shared styling.