The Date Picker is a comprehensive tool for date selection within your application. It supports various view modes (day, month, year), single date selection, and range selection. This component also allows the rendering of multiple grids for a broader date range view.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
'ltr' | 'rtl'
The document's text/writing direction.
boolean
Whether the calendar is disabled.
boolean
Whether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6.
DateValue
The focused date.
(date: DateValue[]) => string
The format of the date to display in the input.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ grid(id: string): string; header: string; content: string; cellTrigger(id: string): string; prevTrigger(view: DateView): string; nextTrigger(view: DateView): string; ... 7 more ...; positioner: string; }>
The ids of the elements in the date picker. Useful for composition.
boolean
Whether the calendar should be displayed inline.
(date: DateValue, locale: string) => boolean
Returns whether a date of the calendar is available.
string
The locale (BCP 47 language tag) to use when formatting the date.
DateValue
The maximum date that can be selected.
IntlMessages
The localized messages to use.
DateValue
The minimum date that can be selected.
boolean
Whether the calendar should be modal. This means that the calendar will block interaction with the rest of the page, and trap focus within it.
string
The `name` attribute of the input element.
number
The number of months to display.
(details: FocusChangeDetails) => void
Function called when the focused date changes.
(details: OpenChangeDetails) => void
Function called when the calendar opens or closes.
(details: ValueChangeDetails) => void
Function called when the value changes.
(details: ViewChangeDetails) => void
Function called when the view changes.
(value: string) => DateValue[]
The format of the date to display in the input.
PositioningOptions
The user provided options used to position the date picker content
boolean
Whether the calendar is read-only.
SelectionMode
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
number
The first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday
string
The time zone to use
DateValue[]
The selected date(s).
DateView
The view of the calendar
Dict<any>
() => void
Clears the selected date(s).
() => void
Function to close the calendar.
Dict<any>
Dict<any>
DateValue
The focused date.
Date
The focused date as a Date object.
string
The focused date as a string.
(month: number) => void
Function to set the selected month.
(year: number) => void
Function to set the selected year.
(value: CalendarDate, opts?: DateTimeFormatOptions | undefined) => string
Formats the given date value based on the provided options.
(props: DayCellProps) => Dict<any>
(props: DayCellProps) => DayCellState
Returns the state details for a given cell.
(props: DayCellProps) => Dict<any>
(weekIndex: number, from?: DateValue | undefined) => DateValue[]
Returns an array of days in the week index counted from the provided start date, or the first visible date if not given.
() => { start: number | undefined; end: number | undefined }
Returns the start and end years of the decade.
(props?: GridProps | undefined) => Dict<any>
(props?: ViewProps | undefined) => Dict<any>
(props: CellProps) => Dict<any>
(props: CellProps) => CellState
Returns the state details for a given month cell.
(props: CellProps) => Dict<any>
(from?: DateValue | undefined) => DateValue[][]
Returns the weeks of the month from the provided date. Represented as an array of arrays of dates.
(props?: { format?: 'short' | 'long' | undefined } | undefined) => GridItem[]
Returns the months of the year
(props?: MonthGridProps | undefined) => MonthGridValue
Returns the months of the year based on the columns. Represented as an array of arrays of months.
(props?: ViewProps | undefined) => Dict<any>
(months: number) => { amount: number visibleRange: { start: CalendarDate | CalendarDateTime | ZonedDateTime end: CalendarDate | CalendarDateTime | ZonedDateTime } weeks: DateValue[][] }
Returns the offset of the month based on the provided number of months.
(props?: ViewProps | undefined) => Dict<any>
(props?: ViewProps | undefined) => Dict<any>
(props: CellProps) => Dict<any>
(props: CellProps) => CellState
(props: CellProps) => Dict<any>
() => GridItem[]
Returns the months of the year
(props?: YearGridProps | undefined) => YearGridValue
Returns the years of the decade based on the columns. Represented as an array of arrays of years.
() => void
Goes to the next month/year/decade.
() => void
Goes to the previous month/year/decade.
Dict<any>
boolean
Whether the input is focused
(date: DateValue) => boolean
Returns whether the provided date is available (or can be selected)
Dict<any>
() => void
Function to open the calendar.
Dict<any>
() => void
Sets the selected date to today.
(value: CalendarDate) => void
Sets the focused date to the given date.
(values: CalendarDate[]) => void
Sets the selected date to the given date.
(view: DateView) => void
Sets the view of the date picker.
Dict<any>
DateValue[]
The selected date.
Date[]
The selected date as a Date object.
string[]
The selected date as a string.
DateView
The current view of the date picker
{ start: DateValue; end: DateValue }
The visible range of dates.
{ start: string; end: string; formatted: string }
The human readable text for the visible range of dates.
{ value: CalendarDate | CalendarDateTime | ZonedDateTime short: string long: string narrow: string }[]
The days of the week. Represented as an array of strings.
DateValue[][]
The weeks of the month. Represented as an array of arrays of dates.
Dict<any>
boolean
Whether the date picker is open
number
string
DateView
number
boolean
DateValue
boolean
Offset
number
boolean
DateValue
boolean
Offset
number
boolean
DateView
DateView