Date Picker
The date picker lets users select a single date, multiple dates, or a date range from a calendar, with day, month, and year views.
import {DatePicker} from "@qualcomm-ui/react/date-picker"Overview
- The value is an array of
DateValuefrom @internationalized/date, not a nativeDate. The type is re-exported from@qualcomm-ui/react/date-picker. - Build values with
parseDate("2026-08-14")for fixed dates, ortoday(getLocalTimeZone())for relative ones. Both return aCalendarDate, a date with no time attached. - To keep a time alongside the date, start from a
CalendarDateTimeorZonedDateTimeinstead. Picking a new day preserves the time. - Avoid converting a native
Date. Only its local year, month, and day are read, so a UTC timestamp such asnew Date("2026-08-14T00:00:00Z")becomes August 13 in time zones behind UTC. Pass the ISO date string toparseDateinstead.
Examples
Single Date
The default selectionMode. Type a date into the field in the locale format, or pick one from the calendar.
<DatePicker className="w-64" label="Departure date" />
Composite
Build with the composite API for granular control. The simple API DatePicker renders exactly this tree, including the three DatePicker.View blocks for the day, month, and year views.
Choose a date in mm/dd/yyyy format
A departure date is required
<DatePicker.Root
className="w-64"
invalid={!value.length}
onValueChange={(details) => setValue(details.value)}
required
value={value}
>
<DatePicker.Control>
<DatePicker.InputGroup label="Departure date" />
</DatePicker.Control>
<DatePicker.Hint>Choose a date in mm/dd/yyyy format</DatePicker.Hint>
<DatePicker.ErrorText>A departure date is required</DatePicker.ErrorText>
<Portal>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.View view="day">
<DatePicker.ViewControl>
<DatePicker.ViewTrigger view="month">
<DatePicker.MonthText />
</DatePicker.ViewTrigger>
<DatePicker.ViewTrigger view="year">
<DatePicker.YearText />
</DatePicker.ViewTrigger>
<DatePicker.PrevTrigger />
<DatePicker.NextTrigger />
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.DayGridHeader />
<DatePicker.DayGrid />
</DatePicker.Table>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.ViewControl>
<DatePicker.ViewTrigger disabled view="month">
<DatePicker.MonthText />
</DatePicker.ViewTrigger>
<DatePicker.ViewTrigger disabled view="year">
<DatePicker.YearText />
</DatePicker.ViewTrigger>
<DatePicker.PrevTrigger />
<DatePicker.NextTrigger />
<DatePicker.ViewCloseTrigger />
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.MonthGrid />
</DatePicker.Table>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.ViewControl>
<DatePicker.ViewTrigger disabled view="month">
<DatePicker.MonthText />
</DatePicker.ViewTrigger>
<DatePicker.ViewTrigger disabled view="year">
<DatePicker.YearText />
</DatePicker.ViewTrigger>
<DatePicker.PrevTrigger />
<DatePicker.NextTrigger />
<DatePicker.ViewCloseTrigger />
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.YearGrid />
</DatePicker.Table>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Positioner>
</Portal>
</DatePicker.Root>
Range
Set selectionMode="range" to collect a start and end date. Use the separator prop on DatePicker.InputGroup to change the character between the two inputs; it defaults to -. The calendar shows a band between the two dates.
A range can be partially filled, in which case the missing end is null.
<DatePicker className="w-80" label="Trip dates" selectionMode="range" />
Multiple
Set selectionMode="multiple" to collect several dates, shown as dismissible tags in the field. The field is display-only in this mode, so dates are picked from the calendar rather than typed.
Use maxSelectedDates to cap how many dates can be selected.
The popover always shows action buttons in this mode.
<DatePicker
className="w-80"
label="Maintenance days"
maxSelectedDates={4}
selectionMode="multiple"
/>
Action Buttons
Set closeOnSelect to false to add a footer with Cancel and OK buttons. selectionMode="multiple" always includes it.
Selections apply as they are made. OK keeps them and closes the popover, while Cancel, Escape, and clicking outside all revert to the value the popover opened with. The field's clear button applies immediately and is not affected by Cancel.
<DatePicker className="w-64" closeOnSelect={false} label="Departure date" />
Open on Click
Set openOnClick to automatically open the popover when the user clicks the field. This keeps focus in it so typing continues.
<DatePicker className="w-64" label="Departure date" openOnClick />
Presets
Use the presets prop to offer common selections, such as the last 7 days. A button in the day view header opens the presets panel.
Each preset is a {label, value} pair, where value is either a named range such as "next7Days" or an explicit DateValue[].
import type {ReactElement} from "react"
import {DatePicker, type DatePickerPreset} from "@qualcomm-ui/react/date-picker"
const presets: DatePickerPreset[] = [
{label: "Next 7 days", value: "next7Days"},
{label: "Next 14 days", value: "next14Days"},
{label: "Next 30 days", value: "next30Days"},
{label: "Next 90 days", value: "next90Days"},
{label: "Next week", value: "nextWeek"},
{label: "Next month", value: "nextMonth"},
{label: "Next quarter", value: "nextQuarter"},
{label: "Next year", value: "nextYear"},
]
export function DatePickerPresetsDemo(): ReactElement {
return (
<DatePicker
className="w-80"
label="Date range"
presets={presets}
selectionMode="range"
/>
)
}Sizes
This component supports three size options to accommodate different layout densities.
The available sizes are sm, md, and lg. The default size is md. Size applies to the input field only; the calendar is unaffected.
<DatePicker className="w-64" label="Small" size="sm" />
<DatePicker className="w-64" label="Medium" size="md" />
<DatePicker className="w-64" label="Large" size="lg" />
Hint and Error Text
Add a hint to provide additional context below the field. When invalid is true, the errorText replaces it and the field shows an error indicator icon.
Choose a date in mm/dd/yyyy format
Choose a date in mm/dd/yyyy format
A departure date is required
<DatePicker
className="w-64"
hint="Choose a date in mm/dd/yyyy format"
label="Departure date"
/>
<DatePicker
className="w-64"
errorText="A departure date is required"
hint="Choose a date in mm/dd/yyyy format"
invalid
label="Departure date"
/>
States
The date picker supports disabled, read-only, and invalid states.
Choose a later date
<DatePicker
className="w-64"
defaultValue={departureDate}
disabled
label="Disabled"
/>
<DatePicker
className="w-64"
defaultValue={departureDate}
label="Read only"
readOnly
/>
<DatePicker
className="w-64"
defaultValue={departureDate}
errorText="Choose a later date"
invalid
label="Invalid"
/>
Min and Max Dates
Use the min and max props to bound the selectable dates. Dates outside the bounds are disabled, and typed values are clamped into range.
Within the next 30 days
<DatePicker
className="w-64"
hint="Within the next 30 days"
label="Departure date"
max={now.add({days: 30})}
min={now}
/>
Outside Days
Days from the previous and next month fill the first and last week of the grid. Set hideOutsideDays to leave those cells empty instead.
DateSelect date
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2020 | 2021 | 2022 | 2023 |
2024 | 2025 | 2026 | 2027 |
2028 | 2029 |
<DatePicker hideOutsideDays variant="inline" />
Unavailable Dates
Use the isDateUnavailable prop to block individual dates that min and max cannot express, such as weekends or holidays.
Weekends are not available
<DatePicker
className="w-64"
hint="Weekends are not available"
isDateUnavailable={isWeekend}
label="Delivery date"
/>
Locale
Use the locale prop to change how dates are displayed and parsed. It takes a BCP 47 language tag and defaults to en-US. The month and weekday names, the first day of the week, the placeholder, and the separators the field accepts all follow from it. For example, de-DE gives a dd.mm.yyyy placeholder and accepts . as the separator.
Use the startOfWeek prop to override only the first day of the week.
<DatePicker className="w-64" label="Departure date" locale={locale} />
Controlled State
Set the initial value using the defaultValue prop, or use value and onValueChange to control the value manually. These props follow our controlled state pattern.
The value is always an array, and entries can be null when a range is partially filled.
[]
<DatePicker
className="w-80"
label="Trip dates"
onValueChange={(details) => setValue(details.value)}
selectionMode="range"
value={value}
/>
Inline
Set variant to inline to render an always-visible calendar with no field or popover. This variant never shows action buttons and has no inputs, so it does not submit a value with a native form; read the selection through value and onValueChange.
The inline variant shows a headline with the label and current value. Set headline to false to remove it. Use moreLabel and rangePlaceholder to customize it.
DateSelect date
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2020 | 2021 | 2022 | 2023 |
2024 | 2025 | 2026 | 2027 |
2028 | 2029 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2020 | 2021 | 2022 | 2023 |
2024 | 2025 | 2026 | 2027 |
2028 | 2029 |
<DatePicker variant="inline" />
<DatePicker headline={false} variant="inline" />
Custom Trigger
DatePicker.Context is a render prop that hands you the picker api, so you can drive your own presentation from the picker's state. Use it to read the current value, format your own label, or call actions such as clearValue.
<DatePicker.Context>
{(api) => <span>{api.valueAsString[0] || "No date selected"}</span>}
</DatePicker.Context>DatePicker.Trigger pairs with it to replace the field entirely. Pass render to supply your own element; it renders a plain <button> otherwise. Place it inside DatePicker.Control, which anchors the popover.
<DatePicker.Context>
{(api) => (
<DatePicker.Trigger render={<Button variant="outline" />}>
{api.valueAsString[0] || "Pick a date"}
</DatePicker.Trigger>
)}
</DatePicker.Context>Accessibility attributes, focus restoration, and dismissal behavior come from the picker, so you do not write them yourself.
<DatePicker.Root closeOnSelect={false}>
<DatePicker.Context>
{(api) => (
<DatePicker.Control className="flex gap-2">
<DatePicker.Trigger render={<Button variant="outline" />}>
{api.valueAsString[0] || "Pick a date"}
</DatePicker.Trigger>
{api.value.length ? (
<Button
onClick={() => api.clearValue()}
type="button"
variant="ghost"
>
Clear
</Button>
) : null}
</DatePicker.Control>
)}
</DatePicker.Context>
<Portal>
<DatePicker.Positioner>
<DatePicker.Content>
<DatePicker.Headline>
<DatePicker.HeadlineLabel />
<DatePicker.HeadlineValue />
</DatePicker.Headline>
<DatePicker.View view="day">
<DatePicker.ViewControl>
<DatePicker.ViewTrigger view="month">
<DatePicker.MonthText />
</DatePicker.ViewTrigger>
<DatePicker.ViewTrigger view="year">
<DatePicker.YearText />
</DatePicker.ViewTrigger>
<DatePicker.PrevTrigger />
<DatePicker.NextTrigger />
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.DayGridHeader />
<DatePicker.DayGrid />
</DatePicker.Table>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.ViewControl>
<DatePicker.ViewTrigger disabled view="month">
<DatePicker.MonthText />
</DatePicker.ViewTrigger>
<DatePicker.ViewTrigger disabled view="year">
<DatePicker.YearText />
</DatePicker.ViewTrigger>
<DatePicker.PrevTrigger />
<DatePicker.NextTrigger />
<DatePicker.ViewCloseTrigger />
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.MonthGrid />
</DatePicker.Table>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.ViewControl>
<DatePicker.ViewTrigger disabled view="month">
<DatePicker.MonthText />
</DatePicker.ViewTrigger>
<DatePicker.ViewTrigger disabled view="year">
<DatePicker.YearText />
</DatePicker.ViewTrigger>
<DatePicker.PrevTrigger />
<DatePicker.NextTrigger />
<DatePicker.ViewCloseTrigger />
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.YearGrid />
</DatePicker.Table>
</DatePicker.View>
<DatePicker.Actions>
<DatePicker.CancelTrigger />
<DatePicker.OkTrigger />
</DatePicker.Actions>
</DatePicker.Content>
</DatePicker.Positioner>
</Portal>
</DatePicker.Root>
Within Dialog
Set portalProps to {disabled: true} to render the calendar popover in place rather than at the end of document.body. This is required inside a Dialog or Popover.
import type {ReactElement} from "react"
import {Button} from "@qualcomm-ui/react/button"
import {DatePicker} from "@qualcomm-ui/react/date-picker"
import {Dialog} from "@qualcomm-ui/react/dialog"
export function DatePickerWithinDialogDemo(): ReactElement {
return (
<Dialog.Root>
<Dialog.Trigger>
<Button emphasis="primary" variant="fill">
Open Dialog
</Button>
</Dialog.Trigger>
<Dialog.FloatingPortal>
<Dialog.Body>
<Dialog.Heading>Book a Flight</Dialog.Heading>
<Dialog.CloseButton />
<DatePicker
className="w-64"
label="Departure date"
portalProps={{disabled: true}}
/>
</Dialog.Body>
<Dialog.Footer>
<Dialog.CloseTrigger>
<Button emphasis="primary" size="sm" variant="fill">
Confirm
</Button>
</Dialog.CloseTrigger>
</Dialog.Footer>
</Dialog.FloatingPortal>
</Dialog.Root>
)
}Forms
Choose the form library that fits your needs—we've built examples with React Hook Form and Tanstack Form to get you started.
The selection is submitted under name, and the number of entries follows the selection mode: one for a single date, two for a range, and one per date in multiple mode. Entries arrive in document order, so a range is always start then end.
A range keeps the position of each end, so clearing only the start submits an empty first entry and the end date second. Read a range by position rather than by taking the first non-empty entry.
Resetting the form restores the initial value.
React Hook Form
Use React Hook Form to handle the input state and validation. ArkType works great for schema validation if you need it.
import type {ReactElement} from "react"
import {type} from "arktype"
import {Controller, type SubmitHandler, useForm} from "react-hook-form"
import type {DateValue} from "@qualcomm-ui/core/date-picker"
import {Button} from "@qualcomm-ui/react/button"
import {DatePicker} from "@qualcomm-ui/react/date-picker"
import {createToaster, Toaster} from "@qualcomm-ui/react/toast"
const valueSchema = type({
departureDate: type("unknown[] > 0").configure({
message: "A departure date is required",
}),
})
type ValueSchema = typeof valueSchema.infer
const toaster = createToaster({
overlap: true,
placement: "bottom-end",
})
export function DatePickerHookFormDemo(): ReactElement {
const {
control,
formState: {isSubmitting},
handleSubmit,
setError,
} = useForm<ValueSchema>({
defaultValues: {
departureDate: [],
},
})
const handleFormSubmit: SubmitHandler<ValueSchema> = (data) => {
const validation = valueSchema(data)
if (validation instanceof type.errors) {
for (const error of validation) {
const field = error.path?.[0] as keyof ValueSchema
if (field) {
setError(field, {
message: error.message,
})
}
}
return
}
toaster.create({
label: "Form submitted",
type: "success",
})
}
return (
<>
<Toaster toaster={toaster} />
<form
className="flex w-64 flex-col gap-4"
noValidate
onSubmit={(event) => void handleSubmit(handleFormSubmit)(event)}
>
<Controller
control={control}
name="departureDate"
render={({
field: {onChange, value, ...fieldProps},
fieldState: {error},
}) => (
<DatePicker
errorText={error?.message}
hint="Choose a date in mm/dd/yyyy format"
invalid={!!error}
label="Departure date"
onValueChange={(details) => onChange(details.value)}
required
value={value as DateValue[]}
{...fieldProps}
/>
)}
/>
<div className="flex w-full justify-end">
<Button
disabled={isSubmitting}
emphasis="primary"
type="submit"
variant="fill"
>
Submit
</Button>
</div>
</form>
</>
)
}Tanstack Form
Tanstack Form handles validation with its built-in validators.
import type {ReactElement} from "react"
import {useForm} from "@tanstack/react-form"
import {Button} from "@qualcomm-ui/react/button"
import {DatePicker, type DateValue} from "@qualcomm-ui/react/date-picker"
import {createToaster, Toaster} from "@qualcomm-ui/react/toast"
const toaster = createToaster({
overlap: true,
placement: "bottom-end",
})
export function DatePickerTanstackFormDemo(): ReactElement {
const form = useForm({
defaultValues: {
departureDate: [] as (DateValue | null)[],
},
onSubmit: () => {
toaster.create({
label: "Form submitted",
type: "success",
})
},
})
return (
<>
<Toaster toaster={toaster} />
<form
className="w-64"
noValidate
onSubmit={(event) => {
event.preventDefault()
event.stopPropagation()
void form.handleSubmit()
}}
>
<form.Field
name="departureDate"
validators={{
onChange: ({value}) =>
value.length === 0 ? "A departure date is required" : undefined,
}}
>
{(field) => (
<DatePicker
className="w-full"
errorText={field.state.meta.errors[0]}
hint="Choose a date in mm/dd/yyyy format"
invalid={field.state.meta.errors.length > 0}
label="Departure date"
onValueChange={(details) => field.handleChange(details.value)}
required
value={field.state.value}
/>
)}
</form.Field>
<div className="mt-2 flex w-full justify-end">
<Button
disabled={form.state.isSubmitting}
emphasis="primary"
type="submit"
variant="fill"
>
Submit
</Button>
</div>
</form>
</>
)
}Explorer
Choose a date in mm/dd/yyyy format
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
Jan | Feb | Mar | Apr |
May | Jun | Jul | Aug |
Sep | Oct | Nov | Dec |
2020 | 2021 | 2022 | 2023 |
2024 | 2025 | 2026 | 2027 |
2028 | 2029 |
Component Anatomy
Hover to highlight, click to view API
API
<DatePicker>
The flattened date picker extends the DatePicker.Root component with the following props:
Type
Omit<
DatePickerActionsProps,
'children'
>
Description
Props applied to the actions footer element.
Type
Omit<
DatePickerContentProps,
'children'
>
Description
Props applied to the content element.
Type
Omit<
DatePickerControlProps,
'children'
>
Description
Props applied to the control element.
Description
Props applied to the error text element.
Type
booleanDescription
Whether to render the headline (label and selected value) above the
calendar. Only applies to the
inline variant.Type
Omit<
DatePickerHeadlineProps,
'children'
>
Description
Props applied to the headline element rendered by the
inline variant.Description
Props applied to the headline value element rendered by the
inline
variant.Type
Description
Optional hint describing the element. This element is automatically
associated with the component's input element for accessibility.
Description
Props applied to the hint element.
Description
Props applied to the input group element.
Type
stringDescription
Label text rendered above the field.
Type
PortalPropsDescription
Props applied to the portal element.
Type
Omit<
DatePickerPositionerProps,
'children'
>
Description
Props applied to the positioner element.
Type
Array<{
label: ReactNode
value:
| Array<DateValue>
| 'thisWeek'
| 'lastWeek'
| 'nextWeek'
| 'thisMonth'
| 'lastMonth'
| 'nextMonth'
| 'thisQuarter'
| 'lastQuarter'
| 'nextQuarter'
| 'thisYear'
| 'lastYear'
| 'nextYear'
| 'last3Days'
| 'last7Days'
| 'last14Days'
| 'last30Days'
| 'last90Days'
| 'next3Days'
| 'next7Days'
| 'next14Days'
| 'next30Days'
| 'next90Days'
}>
Description
Quick-select presets shown alongside the calendar. When provided, a toggle
is rendered in the day view to reveal the preset list.
Type
Omit<
DatePickerPresetsProps,
'children'
>
Description
Props applied to the presets element.
Type
| 'input'
| 'inline'
Description
The presentation of the date picker.
-
-
-
input - a labelled field that opens the calendar in a popover.-
inline - an always-visible, flat calendar that commits on selection.Composite API
This section describes the elements of the DatePicker's composite API.
<DatePicker.Root>
Groups all parts of the date picker. Renders a
<div> element by default.Type
booleanDescription
Whether the calendar should close after the date selection is complete.
This is ignored when the selection mode is
multiple.Type
(
identifier: CalendarIdentifier,
) => Calendar
Description
Pass this to support non-Gregorian calendars (Persian, Buddhist, Islamic,
etc.), which keeps every calendar out of the bundle unless you opt in. The
picker calls it with the calendar identifier resolved from
locale.import {createCalendar} from "@internationalized/date"
const props = {createCalendar, locale: "fa-IR"}
Type
DateValueDescription
The initial focused date when rendered.
Use when you don't need to control the focused date of the date picker.
Type
booleanDescription
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.
Type
Array<DateValue>
Description
The initial selected date(s) when rendered.
Use when you don't need to control the selected date(s) of the date picker.
Type
| 'day'
| 'month'
| 'year'
Description
The default view of the calendar
Type
'ltr' | 'rtl'
Description
The document's text/writing direction.
Type
booleanDescription
Whether the calendar is disabled.
Type
booleanDescription
Whether the calendar should have a fixed number of weeks.
This renders the calendar with 6 weeks instead of 5 or 6.
Type
DateValueDescription
The controlled focused date.
Type
(
date: DateValue,
details: {
locale: string
timeZone: string
},
) => string
Description
The format of the date to display in the input.
Type
booleanDescription
Whether to hide days from the previous and next months in the current
month view. By default those days are shown.
Type
booleanDescription
Whether to synchronize the present change immediately or defer it to the next
frame
Type
booleanDescription
Whether to render the date picker inline
Type
booleanDescription
Whether the date picker is invalid
Type
(
date: DateValue,
locale: string,
) => boolean
Description
Returns whether a date of the calendar is available.
Type
booleanDescription
When true, the component will not be rendered in the DOM until it becomes
visible or active.
Type
stringDescription
The locale (BCP 47 language tag) to use when formatting the date.
Type
DateValueDescription
The maximum date that can be selected.
Type
numberDescription
The maximum number of dates that can be selected.
This is only applicable when
selectionMode is multiple.Type
| 'day'
| 'month'
| 'year'
Description
The maximum view of the calendar
Type
DateValueDescription
The minimum date that can be selected.
Type
| 'day'
| 'month'
| 'year'
Description
The minimum view of the calendar
Type
stringDescription
The
name attribute of the input element.Type
VoidFunctionDescription
Function called when the animation ends in the closed state
Type
(details: {
focusedValue: DateValue
value: Array<DateValue>
valueAsString: string[]
view:
| 'day'
| 'month'
| 'year'
}) => void
Description
Function called when the focused date changes.
Type
(details: {
open: boolean
value: Array<DateValue>
}) => void
Description
Function called when the calendar opens or closes.
Type
(details: {
value: Array<DateValue>
valueAsString: string[]
view:
| 'day'
| 'month'
| 'year'
}) => void
Description
Function called when the value changes.
Type
(details: {
view:
| 'day'
| 'month'
| 'year'
}) => void
Description
Function called when the view changes.
Type
(details: {
view:
| 'day'
| 'month'
| 'year'
visibleRange: {
end: DateValue
start: DateValue
}
}) => void
Description
Function called when the visible range changes.
Type
booleanDescription
The controlled open state of the date picker
Type
booleanDescription
Whether to open the calendar when the input is clicked.
Type
booleanDescription
Whether day outside the visible range can be selected.
Type
(
value: string,
details: {
locale: string
timeZone: string
},
) => DateValue
Description
Function to parse the date from the input back to a DateValue.
Type
stringDescription
The placeholder text to display in the input.
Description
The user provided options used to position the date picker content
Type
booleanDescription
Whether the node is present (controlled by the user)
Type
booleanDescription
Whether the calendar is read-only.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
booleanDescription
Whether the date picker is required
Type
| 'single'
| 'multiple'
| 'range'
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 selectedType
| 'sm'
| 'md'
| 'lg'
Description
The size of the input field and its elements. Does not affect the calendar pane.
Type
booleanDescription
Whether to allow the initial presence animation.
Type
numberDescription
The first day of the week.
0 - Sunday
1 - Monday
2 - Tuesday
3 - Wednesday
4 - Thursday
5 - Friday
6 - SaturdayType
stringDescription
The time zone to use
Type
{
clearTrigger?: string
content?: string
dayCell?: (state: {
disabled: boolean
firstInHoveredRange: boolean
firstInRange: boolean
focused: boolean
inHoveredRange: boolean
inRange: boolean
invalid: boolean
lastInHoveredRange: boolean
lastInRange: boolean
outsideRange: boolean
selectable: boolean
selected: boolean
today: boolean
unavailable: boolean
value: DateValue
valueText: string
weekend: boolean
}) => string
errorIndicator?: string
inputDescription?: (
format: string,
) => string
nextTrigger?: (
view:
| 'day'
| 'month'
| 'year',
) => string
placeholder?: (
locale: string,
) => {
day: string
month: string
year: string
}
presetsTrigger?: (
open: boolean,
) => string
presetTrigger?: (
value: string[],
) => string
prevTrigger?: (
view:
| 'day'
| 'month'
| 'year',
) => string
rangeInputEnd?: string
rangeInputStart?: string
trigger?: (state: {
open: boolean
selectionMode:
| 'single'
| 'multiple'
| 'range'
valueText: string[]
}) => string
viewCloseTrigger?: string
viewTrigger?: (
view:
| 'day'
| 'month'
| 'year',
targetView?:
| 'day'
| 'month'
| 'year',
) => string
}
Description
The localized messages to use.
Type
booleanDescription
When true, the component will be completely removed from the DOM when it
becomes inactive or hidden, rather than just being hidden with CSS.
Type
Array<DateValue>
Description
The controlled selected date(s).
Type
| 'day'
| 'month'
| 'year'
Description
The view of the calendar
Type
| 'previous'
| 'min'
Description
The view to show after a selection.
'previous' →
= year → month → day
classNameValue
'qui-date-picker__root'data-date-picker-partValue
'root'data-disabledValue
data-emptyValue
data-hide-outside-daysValue
data-readonlyValue
data-stateValue
| 'open'
| 'closed'
<DatePicker.Label>
Label for the date input. Renders a
<label> element by default.Type
numberType
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
classNameValue
'qui-input__label qui-date-picker__label'data-date-picker-partValue
'label'data-disabledValue
data-readonlyValue
data-sizeValue
| 'sm'
| 'md'
| 'lg'
data-stateValue
| 'open'
| 'closed'
<DatePicker.Control>
Container for the input and triggers. Renders a
<div> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'control'data-disabledValue
data-placeholder-shownValue
<DatePicker.InputGroup>
See Shortcuts for the tree this renders in each selection mode.
Groups the label, input, clear, and calendar trigger. For a range picker the
start and end inputs are grouped into a single bordered field separated by
separator.
Type
(
dateText: string,
) => string
Description
Returns the accessible label for a tag's remove button.
Only applicable in
multiple mode.Type
booleanDescription
Whether to fix the input value on blur.
Type
stringDescription
Label text rendered above the field.
Type
stringDescription
Text shown when no date is selected. Only applicable in
multiple mode.Type
stringDescription
Character shown between the start and end inputs of a range picker.
classNameValue
'qui-input__input-group qui-date-picker__input-group'data-date-picker-partValue
'input-group'data-disabledValue
data-invalidValue
data-placeholder-shownValue
data-placementValue
| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'
data-readonlyValue
data-sideValue
| 'top'
| 'right'
| 'bottom'
| 'left'
data-sizeValue
| 'sm'
| 'md'
| 'lg'
data-stateValue
| 'open'
| 'closed'
tabIndexValue
number<DatePicker.Input>
A range picker renders two inputs, distinguished by index.
The editable date input. Renders an
<input> element by default.Type
booleanDescription
Whether to fix the input value on blur.
Type
numberDescription
The index of the input to focus.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
classNameValue
'qui-input__input qui-date-picker__input'data-date-picker-partValue
'input'data-indexValue
numberdata-invalidValue
data-placeholder-shownValue
data-sizeValue
| 'sm'
| 'md'
| 'lg'
data-stateValue
| 'open'
| 'closed'
<DatePicker.ValueTags>
Displays the dates selected in
multiple mode as dismissible tags. Renders a
visually-hidden input per selected date so the selection participates in form
submission under the picker's name.Type
(
dateText: string,
) => string
Description
Returns the accessible label for a tag's remove button.
Type
stringDescription
Text shown when no date is selected.
classNameValue
'qui-date-picker__value-tags'data-date-picker-partValue
'hidden-input'data-indexValue
numberstyleValue
tabIndexValue
number<DatePicker.ClearTrigger>
A button that clears the selection. Renders a
<button> element by default;
pass render to adopt your own element.<DatePicker.ClearTrigger render={<Button variant="ghost" />}>
Clear
</DatePicker.ClearTrigger>
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'clear-trigger'hiddenValue
boolean<DatePicker.InputClearTrigger>
The styled clear trigger used inside DatePicker.InputGroup. Wraps DatePicker.ClearTrigger in a compact IconButton.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
<DatePicker.ErrorIndicator>
Visual indicator displayed inside the control when the date picker is
invalid. Renders a
<span> element by default.Type
| LucideIcon
| ReactNode
Description
lucide-react icon or ReactNode.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
classNameValue
'qui-input__error-indicator'data-date-picker-partValue
'error-indicator'data-sizeValue
| 'sm'
| 'md'
| 'lg'
hiddenValue
boolean<DatePicker.Trigger>
A button that opens and closes the calendar. Registers the trigger with the
date picker so accessibility and focus restoration work. Renders a
<button>
element by default; pass render to adopt your own element.<DatePicker.Trigger render={<Button variant="outline" />}>
Pick a date
</DatePicker.Trigger>
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'trigger'data-placeholder-shownValue
data-placementValue
| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'
data-sideValue
| 'top'
| 'right'
| 'bottom'
| 'left'
data-stateValue
| 'open'
| 'closed'
<DatePicker.InputTrigger>
The styled calendar trigger used inside DatePicker.InputGroup. Wraps DatePicker.Trigger in a compact IconButton.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
<DatePicker.InputIcon>
A non-interactive calendar icon. DatePicker.InputGroup renders it in place of DatePicker.InputTrigger in multiple mode, where the field itself carries the trigger bindings.
<DatePicker.Hint>
Helper text displayed below the field. Hidden while the date picker is
invalid. Renders a
<div> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'hint'data-disabledValue
hiddenValue
boolean<DatePicker.ErrorText>
Error message displayed when the date picker is invalid. Renders a
<div>
element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'error-text'hiddenValue
boolean<DatePicker.Positioner>
Positions the calendar relative to the control. Renders a
<div> element by
default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'positioner'styleValue
<DatePicker.Content>
Container for the calendar. Renders a
<div> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'content'data-inlineValue
data-placementValue
| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'
data-presets-openValue
data-sideValue
| 'top'
| 'right'
| 'bottom'
| 'left'
data-stateValue
| 'open'
| 'closed'
hiddenValue
booleantabIndexValue
-1
<DatePicker.Headline>
Container for the calendar headline. Renders a
<div> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
classNameValue
'qui-date-picker__headline'data-date-picker-partValue
'headline'<DatePicker.HeadlineLabel>
The default caption is Date range in range mode and Date otherwise. Pass children to override it.
Caption above the headline value. Pass children to override. Renders a
<span>
element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
classNameValue
'qui-date-picker__headline-label'data-date-picker-partValue
'headline-label'<DatePicker.HeadlineValue>
In multiple mode this shows up to two dates then appends a count suffix.
Renders the current selection as human readable text. Renders a
<span> element
by default.Type
DateTimeFormatOptionsDescription
Format used to render the selected date(s).
Type
(
count: number,
) => string
Description
Suffix appended in
multiple mode when more than two dates are selected.Type
stringDescription
Text shown when no date is selected.
Type
[
string,
string,
]
Description
Placeholders for the start and end of an incomplete range.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
classNameValue
'qui-date-picker__headline-value'data-date-picker-partValue
'headline-value'<DatePicker.View>
Groups a single calendar view (day, month, or year). Renders a
<div>
element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
| 'day'
| 'month'
| 'year'
data-date-picker-partValue
'view'data-viewValue
| 'day'
| 'month'
| 'year'
hiddenValue
boolean<DatePicker.ViewControl>
Groups the navigation controls of a view. Renders a
<div> element by
default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'view-control'data-viewValue
| 'day'
| 'month'
| 'year'
<DatePicker.ViewTrigger>
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
| 'day'
| 'month'
| 'year'
Description
Switch directly to this view when activated. When omitted, the trigger
toggles to the next view.
data-date-picker-partValue
'view-trigger'data-viewValue
| 'day'
| 'month'
| 'year'
<DatePicker.ViewCloseTrigger>
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'view-close-trigger'<DatePicker.PrevTrigger>
Disabled when the previous page falls entirely outside min.
Type
| LucideIcon
| ReactNode
Description
Icon to render. Accepts a
LucideIcon or a ReactElement.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
| 'day'
| 'month'
| 'year'
data-date-picker-partValue
'prev-trigger'data-disabledValue
<DatePicker.NextTrigger>
Disabled when the next page falls entirely outside max.
Type
| LucideIcon
| ReactNode
Description
Icon to render. Accepts a
LucideIcon or a ReactElement.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
| 'day'
| 'month'
| 'year'
data-date-picker-partValue
'next-trigger'data-disabledValue
<DatePicker.MonthText>
Renders the name of the currently visible month. Intended as the label for a
ViewTrigger that jumps to the month view.Type
| 'numeric'
| 'short'
| 'long'
| '2-digit'
| 'narrow'
Description
The format used to render the visible month.
<DatePicker.YearText>
Renders the currently visible year. Intended as the label for a
ViewTrigger
that jumps to the year view.Type
| 'numeric'
| '2-digit'
Description
The format used to render the visible year.
<DatePicker.RangeText>
Human readable text for the visible range. The text is view-aware (month and
year for the day view, the year for the month view, and the decade for the
year view). Renders a
<div> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'range-text'<DatePicker.Table>
The column count is fixed per view.
The calendar grid. Renders a
<table> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-columnsValue
numberdata-date-picker-partValue
'table'data-viewValue
| 'day'
| 'month'
| 'year'
tabIndexValue
-1
<DatePicker.TableHead>
The calendar grid header. Renders a
<thead> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'table-head'data-disabledValue
data-viewValue
| 'day'
| 'month'
| 'year'
<DatePicker.TableHeader>
A column header in the calendar grid. Renders a
<th> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'table-header'data-disabledValue
data-viewValue
| 'day'
| 'month'
| 'year'
<DatePicker.TableBody>
The calendar grid body. Renders a
<tbody> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'table-body'data-disabledValue
data-viewValue
| 'day'
| 'month'
| 'year'
<DatePicker.TableRow>
A row in the calendar grid. Renders a
<tr> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'table-row'data-disabledValue
data-viewValue
| 'day'
| 'month'
| 'year'
<DatePicker.TableCell>
The bindings differ by the view the cell belongs to.
A single cell in the calendar grid. Renders a
<td> element by default.Type
| number
| DateValue
Type
numberType
booleanType
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
{
end: T
start: T
}
data-date-picker-partValue
'table-cell'data-selectedValue
data-valueValue
number<DatePicker.TableCellTrigger>
The bindings differ by the view the cell belongs to.
The selectable trigger inside a calendar cell. Renders a
<div> element by
default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'table-cell-trigger'data-disabledValue
data-focusValue
data-hover-range-endValue
data-hover-range-startValue
data-in-hover-rangeValue
data-in-rangeValue
data-outside-rangeValue
data-range-endValue
data-range-startValue
data-selectableValue
data-selectedValue
data-todayValue
data-unavailableValue
data-valueValue
numberdata-viewValue
'year'data-weekendValue
tabIndexValue
-1 | 0
<DatePicker.DayGridHeader>
Renders the weekday column headers for the day view.
Type
| 'short'
| 'long'
| 'narrow'
Description
The format used to render the weekday labels.
<DatePicker.DayGrid>
Renders the day cells for the visible month.
<DatePicker.MonthGrid>
Renders the month cells for the month view.
Type
| 'short'
| 'long'
Description
The format used to render the month labels.
<DatePicker.YearGrid>
Renders the year cells for the year view. Takes no props.
<DatePicker.Presets>
Panel that lists DatePickerPresetTrigger options in place of the
calendar while the DatePickerPresetsTrigger is toggled on. Renders a
<div> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'presets'hiddenValue
boolean<DatePicker.PresetsTrigger>
Toggles the DatePickerPresets panel. Styled as an outline
IconButton that becomes a close affordance while the panel is open.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'presets-trigger'<DatePicker.PresetTrigger>
Selects a preset date or range. Renders a
<button> element by default.Type
| Array<DateValue>
| 'thisWeek'
| 'lastWeek'
| 'nextWeek'
| 'thisMonth'
| 'lastMonth'
| 'nextMonth'
| 'thisQuarter'
| 'lastQuarter'
| 'nextQuarter'
| 'thisYear'
| 'lastYear'
| 'nextYear'
| 'last3Days'
| 'last7Days'
| 'last14Days'
| 'last30Days'
| 'last90Days'
| 'next3Days'
| 'next7Days'
| 'next14Days'
| 'next30Days'
| 'next90Days'
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
data-date-picker-partValue
'preset-trigger'<DatePicker.Actions>
Footer container for the confirm/cancel actions. Intended for use when
closeOnSelect is false. Renders a <div> element by default.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
classNameValue
'qui-date-picker__actions'data-date-picker-partValue
'actions'<DatePicker.CancelTrigger>
Discards selection, restores previous value, and closes the calendar. Renders a
Button with the label "Cancel" by default.
Type
| 'default'
| 'compact'
Description
The density of the button. Governs padding and height.
Type
booleanDescription
Controls whether the component is interactive. When
true, pointer/focus
events are blocked, and the component is visually dimmed.Type
| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'
| 'inverse'
Description
The style variant of the button. Governs colors.
Type
| LucideIcon
| ReactNode
Description
Icon positioned after the text content. If supplied as a
LucideIcon, the size will automatically match the size prop.
Supply as a ReactElement for additional customization.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
| 'sm'
| 'md'
| 'lg'
Description
The size of the component and its icons.
Type
| LucideIcon
| ReactNode
Description
Icon positioned before the text content. If supplied as a
LucideIcon,
the size will automatically match the size prop. Supply as a
ReactElement for additional customization.Type
| 'fill'
| 'ghost'
| 'outline'
Description
The style variant of the button. Governs colors.
<DatePicker.OkTrigger>
Type
| 'default'
| 'compact'
Description
The density of the button. Governs padding and height.
Type
booleanDescription
Controls whether the component is interactive. When
true, pointer/focus
events are blocked, and the component is visually dimmed.Type
| 'neutral'
| 'primary'
| 'danger'
| 'white-persistent'
| 'black-persistent'
| 'inverse'
Description
The style variant of the button. Governs colors.
Type
| LucideIcon
| ReactNode
Description
Icon positioned after the text content. If supplied as a
LucideIcon, the size will automatically match the size prop.
Supply as a ReactElement for additional customization.Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
| 'sm'
| 'md'
| 'lg'
Description
The size of the component and its icons.
Type
| LucideIcon
| ReactNode
Description
Icon positioned before the text content. If supplied as a
LucideIcon,
the size will automatically match the size prop. Supply as a
ReactElement for additional customization.Type
| 'fill'
| 'ghost'
| 'outline'
Description
The style variant of the button. Governs colors.
<DatePicker.Context>
Exposes the date picker API to descendants through a render prop.
Description
Render Prop
that provides the current DatePickerApi context.
DatePickerApi
The api handed to the DatePicker.Context render prop.
Type
VoidFunctionDescription
Discards selection, restores previous value, and closes the calendar.
Type
(options?: {
focus?: boolean
}) => void
Description
Clears the selected date(s).
Type
booleanDescription
Whether the date picker is disabled
Type
booleanDescription
Whether the input is focused
Type
DateValueDescription
The focused date.
Type
DateDescription
The focused date as a Date object.
Type
stringDescription
The focused date as a string.
Type
(
month: number,
) => void
Description
Function to set the selected month.
Type
(
year: number,
) => void
Description
Function to set the selected year.
Type
(
value: DateValue,
opts?: DateTimeFormatOptions,
) => string
Description
Formats the given date value based on the provided options.
Type
(
week: number,
from?: DateValue,
) => Array<DateValue>
Description
Returns an array of days in the week index counted from the provided start
date, or the first visible date if not given.
Type
(props: {
disabled?: boolean
value: DateValue
visibleRange?: {
end: T
start: T
}
}) => {
disabled: boolean
firstInHoveredRange: boolean
firstInRange: boolean
focused: boolean
inHoveredRange: boolean
inRange: boolean
invalid: boolean
lastInHoveredRange: boolean
lastInRange: boolean
outsideRange: boolean
selectable: boolean
selected: boolean
today: boolean
unavailable: boolean
value: DateValue
valueText: string
weekend: boolean
}
Description
Returns the state details for a given cell.
Type
() => {
end: T
start: T
}
Description
Returns the start and end years of the decade.
Type
(props?: {
format?: 'short' | 'long'
}) => Array<{
disabled?: boolean
label: string
value: number
}>
Description
Returns the months of the year
Type
(props?: {
columns?: number
format?: 'short' | 'long'
}) => Array<
Array<{
disabled?: boolean
label: string
value: number
}>
>
Description
Returns the months of the year based on the columns.
Represented as an array of arrays of months.
Type
(props: {
columns?: number
disabled?: boolean
value: number
}) => {
disabled: boolean
firstInHoveredRange: boolean
firstInRange: boolean
focused: boolean
inHoveredRange: boolean
inRange: boolean
lastInHoveredRange: boolean
lastInRange: boolean
outsideRange: boolean
selectable: boolean
selected: boolean
value: DateValue
valueText: string
}
Description
Returns the state details for a given month cell.
Type
(
from?: DateValue,
) => Array<Array<DateValue>>
Description
Returns the weeks of the month from the provided date. Represented as an array
of arrays of dates.
Type
(
duration: DateDuration,
) => {
visibleRange: {
end: T
start: T
}
visibleRangeText: {
end: string
start: string
}
weeks: Array<
Array<DateValue>
>
}
Description
Returns the offset of the month based on the provided number of months.
Type
(
value:
| 'thisWeek'
| 'lastWeek'
| 'nextWeek'
| 'thisMonth'
| 'lastMonth'
| 'nextMonth'
| 'thisQuarter'
| 'lastQuarter'
| 'nextQuarter'
| 'thisYear'
| 'lastYear'
| 'nextYear'
| 'last3Days'
| 'last7Days'
| 'last14Days'
| 'last30Days'
| 'last90Days'
| 'next3Days'
| 'next7Days'
| 'next14Days'
| 'next30Days'
| 'next90Days',
) => Array<DateValue>
Description
Returns the range of dates based on the provided date range preset.
Type
() => Array<{
disabled?: boolean
label: string
value: number
}>
Description
Returns the months of the year
Type
(props?: {
columns?: number
}) => Array<
Array<{
disabled?: boolean
label: string
value: number
}>
>
Description
Returns the years of the decade based on the columns.
Represented as an array of arrays of years.
Type
(props: {
columns?: number
disabled?: boolean
value: number
}) => {
disabled: boolean
firstInHoveredRange: boolean
firstInRange: boolean
focused: boolean
inHoveredRange: boolean
inRange: boolean
lastInHoveredRange: boolean
lastInRange: boolean
outsideRange: boolean
selectable: boolean
selected: boolean
value: DateValue
valueText: string
}
Description
Returns the state details for a given year cell.
Type
VoidFunctionDescription
Goes to the next month/year/decade.
Type
VoidFunctionDescription
Goes to the previous month/year/decade.
Type
booleanDescription
Whether the date picker is rendered inline
Type
booleanDescription
Whether the date picker is invalid
Type
booleanDescription
Whether the maximum number of selected dates has been reached.
Type
(
date: DateValue,
) => boolean
Description
Returns whether the provided date is available (or can be selected)
Type
numberDescription
The maximum number of dates that can be selected (only for multiple
selection mode).
Type
numberDescription
The number of months to display
Type
booleanDescription
Whether the date picker is open
Type
booleanDescription
Whether the presets panel is open
Type
booleanDescription
Whether the date picker is read-only
Type
| 'single'
| 'multiple'
| 'range'
Description
The selection mode (single, multiple, or range)
Type
VoidFunctionDescription
Sets the selected date to today.
Type
(
value: DateValue,
) => void
Description
Sets the focused date to the given date.
Type
(
open: boolean,
) => void
Description
Function to open or close the calendar.
Type
(
time: {
hour?: number
millisecond?: number
minute?: number
second?: number
},
index?: number,
) => void
Description
Sets the time for a specific date value.
Converts CalendarDate to CalendarDateTime if needed.
Type
(
values: Array<DateValue>,
) => void
Description
Sets the selected date to the given date.
Type
(
view:
| 'day'
| 'month'
| 'year',
) => void
Description
Sets the view of the date picker.
Type
(
value: DateValue,
) => void
Description
Adds/removes a date in the selection.
Type
Array<DateValue>
Description
The selected date.
Type
Array<Date>
Description
The selected date as a Date object.
Type
string[]
Description
The selected date as a string.
Type
| 'day'
| 'month'
| 'year'
Description
The current view of the date picker
Type
{
end: T
start: T
}
Description
The visible range of dates.
Type
{
end: string
formatted: string
start: string
}
Description
The human readable text for the visible range of dates.
Type
Array<{
long: string
narrow: string
short: string
value: DateValue
}>
Description
The days of the week. Represented as an array of strings.
Type
Array<Array<DateValue>>
Description
The weeks of the month. Represented as an array of arrays of dates.
Data Structures
DatePickerPositioningOptions
Type
numberDescription
The minimum padding between the arrow and the floating element's corner.
Type
stringDescription
CSS selector used to locate the arrow element within the floating element.
Components override this with their own anatomy-namespaced selector
(e.g.
[data-menu-part=arrow]).Type
() =>
| 'clippingAncestors'
| Element
| Array<Element>
| {
height: number
width: number
x: number
y: number
}
Description
The overflow boundary of the reference element
Type
booleanDescription
Whether the popover should fit the viewport.
Type
| boolean
| Array<
| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'
>
Description
Whether to flip the placement when the floating element overflows the boundary.
Type
(
element:
| HTMLElement
| VirtualElement,
) => {
height?: number
width?: number
x?: number
y?: number
}
Description
Function that returns the anchor rect
Type
numberDescription
The main axis offset or gap between the reference and floating element
Type
booleanDescription
Whether the popover should be hidden when the reference element is detached
Type
| boolean
| {
ancestorResize?: boolean
ancestorScroll?: boolean
animationFrame?: boolean
elementResize?: boolean
layoutShift?: boolean
}
Description
Options to activate auto-update listeners
Type
{
crossAxis?: number
mainAxis?: number
}
Description
The offset of the floating element
Type
(
data: ComputePositionReturn,
) => void
Description
Function called when the placement is computed
Type
(data: {
placed: boolean
}) => void
Description
Function called when the floating element is positioned or not
Type
numberDescription
The virtual padding around the viewport edges to check for overflow
Type
booleanDescription
Whether the floating element can overlap the reference element
Type
| 'bottom'
| 'bottom-end'
| 'bottom-start'
| 'left'
| 'left-end'
| 'left-start'
| 'right'
| 'right-end'
| 'right-start'
| 'top'
| 'top-end'
| 'top-start'
Description
The initial placement of the floating element
Type
booleanDescription
Whether to make the floating element same width as the reference element
Type
numberDescription
The secondary axis offset or gap between the reference and floating elements
Type
booleanDescription
Whether the popover should slide when it overflows.
Type
| 'absolute'
| 'fixed'
Description
The strategy to use for positioning
Type
(data: {
updatePosition: () => Promise<void>
}) => void | Promise<void>
Description
A callback that will be called when the popover needs to calculate its
position.
Shortcuts
<DatePicker.InputGroup>
Groups the field parts into one bordered control. For a single date picker it renders roughly this structure:
<DatePicker.Label>{label}</DatePicker.Label>
<div>
<DatePicker.Input index={0} />
<DatePicker.InputClearTrigger />
<span aria-hidden />
<DatePicker.ErrorIndicator />
<DatePicker.InputTrigger />
</div>DatePicker.InputClearTrigger and DatePicker.InputTrigger are the styled field triggers, each a compact IconButton wrapping DatePicker.ClearTrigger and DatePicker.Trigger. The empty span is the divider between the input and the triggers.
In range mode it renders two inputs with the separator between them:
<DatePicker.Input index={0} />
<span aria-hidden>{separator}</span>
<DatePicker.Input index={1} />In multiple mode it renders DatePicker.ValueTags in place of the inputs:
<DatePicker.ValueTags dismissLabel={dismissLabel} placeholder={placeholder} />Multiple mode also replaces DatePicker.InputTrigger with DatePicker.InputIcon, a non-interactive calendar icon, because the field itself carries the trigger bindings.
<DatePicker.DayGridHeader>
Renders the weekday header row of the day view. This shortcut is equivalent to:
<DatePicker.TableHead>
<DatePicker.TableRow>
{weekDays.map((weekDay, i) => (
<DatePicker.TableHeader key={i} aria-label={weekDay.long} scope="col">
{weekDay[format]}
</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead><DatePicker.DayGrid>
Renders the day cells of the visible month. This shortcut is equivalent to:
<DatePicker.TableBody>
{weeks.map((week, i) => (
<DatePicker.TableRow key={i}>
{week.map((day, idx) => (
<DatePicker.TableCell key={idx} value={day} visibleRange={visibleRange}>
<DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody><DatePicker.MonthGrid>
Renders the month cells of the month view. This shortcut is equivalent to:
<DatePicker.TableBody>
{getMonthsGrid({columns, format}).map((months, row) => (
<DatePicker.TableRow key={row}>
{months.map((month, index) => (
<DatePicker.TableCell key={index} value={month.value}>
<DatePicker.TableCellTrigger>
{month.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody><DatePicker.YearGrid>
Renders the year cells of the year view. This shortcut is equivalent to:
<DatePicker.TableBody>
{getYearsGrid({columns}).map((years, row) => (
<DatePicker.TableRow key={row}>
{years.map((year, index) => (
<DatePicker.TableCell key={index} value={year.value}>
<DatePicker.TableCellTrigger>{year.label}</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>Last updated on by Olaf Kappes
inlinecalendar. For finer control, compose the parts yourself with DatePicker.Root and friends.