Date Picker

A component that allows users to select a date from a calendar.

Anatomy

To set up the date picker correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the DatePicker component in your project. Let’s take a look at the most basic example

Standalone Date Picker

In some cases, you might want to display a non-dismissable date picker. This can be achieved by setting the open prop to true and closeOnSelect prop to false.

Important to note that standalone date picker doesn’t use the Portal, Positioner and Content components.

API Reference

Root

PropTypeDefault
asChild
boolean
closeOnSelect
booleantrue
defaultValue
string[]
dir
'ltr' | 'rtl'"ltr"
disabled
boolean
fixedWeeks
boolean
focusedValue
string
format
(date: DateValue) => string
getRootNode
() => ShadowRoot | Node | Document
id
string
ids
Partial<{ root: string; table(id: string): string; tableHeader(id: string): string; tableBody(id: string): string; tableRow(id: string): string; content: string; cellTrigger(id: string): string; ... 9 more ...; positioner: string; }>
isDateUnavailable
(date: DateValue, locale: string) => boolean
lazyMount
booleanfalse
locale
string
max
DateValue
min
DateValue
modal
boolean
name
string
numOfMonths
number
onExitComplete
() => void
onFocusChange
(details: FocusChangeDetails) => void
onOpenChange
(details: OpenChangeDetails) => void
onValueChange
(details: ValueChangeDetails) => void
onViewChange
(details: ViewChangeDetails) => void
open
boolean
parse
(value: string) => DateValue
positioning
PositioningOptions
present
boolean
readOnly
boolean
selectionMode
SelectionMode
startOfWeek
number
timeZone
string
translations
IntlTranslations
unmountOnExit
booleanfalse
value
string[]
view
DateView"day"

View

PropTypeDefault
view
DateView
asChild
boolean

Input

PropTypeDefault
asChild
boolean
index
number

Label

PropTypeDefault
asChild
boolean

Table

PropTypeDefault
asChild
boolean
columns
number

Content

PropTypeDefault
asChild
boolean

Control

PropTypeDefault
asChild
boolean

Trigger

PropTypeDefault
asChild
boolean

TableRow

PropTypeDefault
asChild
boolean

RangeText

PropTypeDefault
asChild
boolean

TableBody

PropTypeDefault
asChild
boolean

TableCell

PropTypeDefault
value
number | DateValue
asChild
boolean
columns
number
disabled
boolean
visibleRange
VisibleRange

TableHead

PropTypeDefault
asChild
boolean

Positioner

PropTypeDefault
asChild
boolean

YearSelect

PropTypeDefault
asChild
boolean

MonthSelect

PropTypeDefault
asChild
boolean

NextTrigger

PropTypeDefault
asChild
boolean

PrevTrigger

PropTypeDefault
asChild
boolean

TableHeader

PropTypeDefault
asChild
boolean

ViewControl

PropTypeDefault
asChild
boolean

ViewTrigger

PropTypeDefault
asChild
boolean

ClearTrigger

PropTypeDefault
asChild
boolean

PresetTrigger

PropTypeDefault
value
DateValue[] | DateRangePreset
asChild
boolean

TableCellTrigger

PropTypeDefault
asChild
boolean