Elements

Components

Date Picker

DatePicker, dressed in the paper-and-ink system: the popup dissolves in on elevation, selected days take the flat ink fill, and range middles run subtle with cut corners. The parts — Root, Label, Control, Input, Trigger, ClearTrigger, Positioner, Content, View, ViewControl, ViewTrigger, RangeText, PrevTrigger, NextTrigger, Table*, MonthSelect, YearSelect, PresetTrigger.

#Basic usage

date-picker/basic Vue React

#Props

#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

PropTypeDefaultDescription
fixOnBlurboolean | undefinedtrueWhether to fix the input value on blur.
indexnumber | undefinedThe 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

PropTypeDefaultDescription
valuePresetTriggerValue—

#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

PropTypeDefaultDescription
sizeString as PropType<"sm" | "md" | "lg">"md"One rung of the control-height ladder for the field row.
closeOnSelectbooleantrueWhether the calendar should close after the date selection is complete. This is ignored when the selection mode is multiple.
createCalendar(identifier: datePicker.CalendarIdentifier) => datePicker.CalendarA 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 }
defaultFocusedValuedatePicker.DateValueThe initial focused date when rendered. Use when you don't need to control the focused date of the date picker.
defaultOpenbooleanThe initial open state of the date picker when rendered. Use when you don't need to control the open state of the date picker.
defaultValuedatePicker.DateValue[]The initial selected date(s) when rendered. Use when you don't need to control the selected date(s) of the date picker.
defaultViewdatePicker.DateView"day"The default view of the calendar
disabledbooleanWhether the calendar is disabled.
fixedWeeksbooleanWhether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.
focusedValuedatePicker.DateValueThe controlled focused date.
format(date: datePicker.DateValue, details: datePicker.LocaleDetails) => stringThe format of the date to display in the input.
idstringThe unique identifier of the machine.
idsPartial<{ 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.
inlinebooleanWhether the date picker is inline
invalidbooleanWhether the date picker is in an invalid state
isDateUnavailable(date: datePicker.DateValue, locale: string) => booleanReturns whether a date of the calendar is available.
localestring"en-US"The locale (BCP 47 language tag) to use when formatting the date.
maxdatePicker.DateValueThe maximum date that can be selected.
maxSelectedDatesnumberThe maximum number of dates that can be selected. This is only applicable when selectionMode is multiple.
maxViewdatePicker.DateView"year"The maximum view of the calendar
mindatePicker.DateValueThe minimum date that can be selected.
minViewdatePicker.DateView"day"The minimum view of the calendar
modelValuedatePicker.DateValue[]The v-model value of the date picker
namestringThe name attribute of the input element.
numOfMonthsnumberThe number of months to display.
openbooleanThe controlled open state of the date picker
openOnClickbooleanfalseWhether to open the calendar when the input is clicked.
outsideDaySelectablebooleanfalseWhether day outside the visible range can be selected.
parse(value: string, details: datePicker.LocaleDetails) => datePicker.DateValue | undefinedFunction to parse the date from the input back to a DateValue.
placeholderstringThe placeholder text to display in the input.
positioningdatePicker.PositioningOptionsThe user provided options used to position the date picker content
readOnlybooleanWhether the calendar is read-only.
requiredbooleanWhether the date picker is required
selectionModedatePicker.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
showWeekNumbersbooleanWhether to show the week number column in the day view.
startOfWeeknumberThe first day of the week. 0 - Sunday 1 - Monday 2 - Tuesday 3 - Wednesday 4 - Thursday 5 - Friday 6 - Saturday
timeZonestring"UTC"The time zone to use
translationsdatePicker.IntlTranslationsThe localized messages to use.
viewdatePicker.DateViewThe view of the calendar

#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

PropTypeDefaultDescription
valueReactive<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

PropTypeDefaultDescription
columnsnumber | undefined—
idstring | undefined—
viewDateView | undefined—

#Trigger

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

#ValueText

PropTypeDefaultDescription
placeholderstring | undefinedText to display when no date is selected.
separatorstring | 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

PropTypeDefaultDescription
viewDateView—

#WeekNumberCell

PropTypeDefaultDescription
weekDateValue[]—
weekIndexnumber—

#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.