DatePicker

An unstyled date picker component with calendar navigation, view switching, and time selection.

Build fully custom date pickers with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use DatePicker with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with sub-components: Root, Input, Trigger, Value, Clear, ClearTrigger, Portal, Positioner, Arrow, Popup, Panel, Calendar, CalendarContainer, Header, Prev, Next, Title, SelectMonth, SelectYear, Decade, Table, TableHead, TableHeadRow, TableHeadCell, TableHeadWeekCell, TableHeadWeekLabel, TableHeadWeekHeaderLabel, TableBody, TableBodyRow, TableBodyCell, TableBodyWeekCell, TableBodyWeekLabel, Day, Month, Year, Time, Picker, Hour, Minute, Second, AmPm, Increment, Decrement, Separator, Buttonbar, Footer, Today
Three calendar views — date, month, and year — with animated navigation between months, years, and decades
Single, multiple, and range date selection with keyboard focus cycling
Integrated time picker with 12/24 hour format, minute, and second controls

Usage#

import { DatePicker } from 'primereact/datepicker';

<DatePicker.Root>
    <DatePicker.Input />
    <DatePicker.Portal>
        <DatePicker.Positioner>
            <DatePicker.Popup>
                <DatePicker.Arrow />
                <DatePicker.Calendar>
                    <DatePicker.Header>
                        <DatePicker.Prev></DatePicker.Prev>
                        <DatePicker.Title>
                            <DatePicker.SelectMonth />
                            <DatePicker.SelectYear />
                            <DatePicker.Decade />
                        </DatePicker.Title>
                        <DatePicker.Next></DatePicker.Next>
                    </DatePicker.Header>
                    <DatePicker.Table>
                        <DatePicker.TableHead />
                        <DatePicker.TableBody />
                        <DatePicker.TableBody view="month" />
                        <DatePicker.TableBody view="year" />
                    </DatePicker.Table>
                    <DatePicker.Buttonbar>
                        <DatePicker.Today></DatePicker.Today>
                        <DatePicker.ClearTrigger></DatePicker.ClearTrigger>
                    </DatePicker.Buttonbar>
                </DatePicker.Calendar>
                <DatePicker.Time>
                    <DatePicker.Picker type="hour">
                        <DatePicker.Increment></DatePicker.Increment>
                        <DatePicker.Hour />
                        <DatePicker.Decrement></DatePicker.Decrement>
                    </DatePicker.Picker>
                    <DatePicker.Separator />
                    <DatePicker.Picker type="minute">
                        <DatePicker.Increment></DatePicker.Increment>
                        <DatePicker.Minute />
                        <DatePicker.Decrement></DatePicker.Decrement>
                    </DatePicker.Picker>
                </DatePicker.Time>
            </DatePicker.Popup>
        </DatePicker.Positioner>
    </DatePicker.Portal>
</DatePicker.Root>

Behavior#

Motion Animation#

<DatePicker.Popup motionProps={{ name: 'p-datepicker' }}>...</DatePicker.Popup>

See Motion for animation phases, CSS variables, and hide strategies.

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<DatePicker.Root as="section">
    <DatePicker.Input as="div" />
    <DatePicker.Prev as="a">...</DatePicker.Prev>
</DatePicker.Root>

Render Function Children#

DatePicker.TableBody, DatePicker.TableHead, and other container components accept a render function as children, providing access to the component instance for custom cell rendering.

<DatePicker.TableBody>
    {(instance) =>
        instance.datepicker?.months[0]?.dates.map((week, weekIndex) => (
            <DatePicker.TableBodyRow key={weekIndex}>
                {week.map((date, dateIndex) => (
                    <DatePicker.TableBodyCell key={dateIndex} date={date}>
                        <DatePicker.Day>{date.day}</DatePicker.Day>
                    </DatePicker.TableBodyCell>
                ))}
            </DatePicker.TableBodyRow>
        ))
    }
</DatePicker.TableBody>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Wk	Su	Mo	Tu	We	Th	Fr	Sa
51	26	27	28	29	30	31	1
1	2	3	4	5	6	7	8
2	9	10	11	12	13	14	15
3	16	17	18	19	20	21	22
4	23	24	25	26	27	28	29
5	30	31	1	2	3	4	5

/* Select a part to see its CSS selector for custom styling */

API#

DatePickerRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `string[]` \| `Date` \| `Date[]`	—
Value of the component.
`defaultValue`	`string` \| `string[]` \| `Date` \| `Date[]`	—
The default value for the input when not controlled by `modelValue` .
`open`	`boolean`	—
Controlled open state of the input tags overlay.
`defaultOpen`	`boolean`	—
Default open state for uncontrolled mode.
`name`	`string`	—
The name attribute for the element, typically used in form submissions.
`selectionMode`	`"multiple"` \| `"range"` \| `"single"`	`single`
Defines the quantity of the selection.
`dateFormat`	`string`	—
Format of the date. Defaults to PrimeVue Locale configuration.
`updateModelType`	`"string"` \| `"date"`	`date`
Type of the value to write back to modelValue.
`selectOtherMonths`	`boolean`	`false`
Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
`showIcon`	`boolean`	`false`
When enabled, displays a button with icon next to input.
`icon`	`string`	—
Icon of the datepicker button.
`prevIcon`	`string`	—
Icon to show in the previous button.
`nextIcon`	`string`	—
Icon to show in the next button.
`incrementIcon`	`string`	—
Icon to show in each of the increment buttons.
`decrementIcon`	`string`	—
Icon to show in each of the decrement buttons.
`numberOfMonths`	`number`	`1`
Number of months to display.
`breakpoint`	`string`	`769px`
The breakpoint to define the maximum width boundary for datepicker panel.
`view`	`"date"` \| `"month"` \| `"year"`	`date`
Type of view to display.
`minDate`	`Date`	—
The minimum selectable date.
`maxDate`	`Date`	—
The maximum selectable date.
`disabledDates`	`Date[]`	—
Array with dates to disable.
`disabledDays`	`number[]`	—
Array with disabled weekday numbers.
`maxDateCount`	`number`	—
Maximum number of selectable dates in multiple mode.
`showOnFocus`	`boolean`	`true`
When disabled, datepicker will not be visible with input focus.
`autoZIndex`	`boolean`	`true`
Whether to automatically manage layering.
`baseZIndex`	`number`	`0`
Base zIndex value to use in layering.
`showButtonBar`	`boolean`	`false`
Whether to display today and clear buttons at the footer.
`shortYearCutoff`	`string`	`+10`
The cutoff year for determining the century for a date.
`showTime`	`boolean`	`false`
Whether to display timepicker.
`timeOnly`	`boolean`	`false`
Whether to display timepicker only.
`hourFormat`	`"12"` \| `"24"`	`24`
Specifies hour format.
`stepHour`	`number`	`1`
Hours to change per step.
`stepMinute`	`number`	`1`
Minutes to change per step.
`stepSecond`	`number`	`1`
Seconds to change per step.
`showSeconds`	`boolean`	`false`
Whether to show the seconds in time picker.
`showWeek`	`boolean`	`false`
Whether to display week numbers.
`hideOnDateTimeSelect`	`boolean`	`false`
Whether to hide the overlay on date selection when showTime is enabled.
`hideOnRangeSelection`	`boolean`	`false`
Whether to hide the overlay on date selection is completed when selectionMode is range.
`timeSeparator`	`string`	`:`
Separator of time selector.
`manualInput`	`boolean`	`true`
Whether to allow entering the date manually via typing.
`size`	`"small"` \| `"large"`	—
Defines the size of the component.
`invalid`	`boolean`	`false`
When present, it specifies that the component should have invalid state style.
`disabled`	`boolean`	`false`
When present, it specifies that the component should be disabled.
`variant`	`"outlined"` \| `"filled"`	—
Specifies the input variant of the component.
`readOnly`	`boolean`	`false`
When present, it specifies that an input field is read-only.
`placeholder`	`string`	—
Placeholder text for the input.
`required`	`boolean`	—
When present, it specifies that the component is a required field.
`appendTo`	`"body"` \| `HTMLElement` \| `"self"`	`body`
A valid query selector or an HTMLElement to specify where the overlay gets attached.
`fluid`	`boolean`	—
Spans 100% width of the container when enabled.
`ariaLabelledby`	`string`	—
Establishes relationships between the component and label(s) where its value should be one or more element IDs.
`ariaLabel`	`string`	—
Establishes a string value that labels the component.
`onDateSelect`	`(event: useDatePickerDateSelectEvent) => void`	—
Callback to invoke when a date is selected.
`onMonthChange`	`(event: useDatePickerMonthChangeEvent) => void`	—
Callback to invoke when the month changes.
`onYearChange`	`(event: useDatePickerYearChangeEvent) => void`	—
Callback to invoke when the year changes.
`onTodayButtonClick`	`(event: useDatePickerTodayButtonClickEvent) => void`	—
Callback to invoke when the today button is clicked.
`onClearButtonClick`	`(event: MouseEvent<HTMLButtonElement>) => void`	—
Callback to invoke when the clear button is clicked.
`onInput`	`(event: ChangeEvent<HTMLInputElement>) => void`	—
Callback to invoke on input event.
`onKeyDown`	`(event: KeyboardEvent<HTMLButtonElement` \| `HTMLInputElement>) => void`	—
Callback to invoke on keydown event.
`onFocus`	`(event: FocusEvent<HTMLInputElement>) => void`	—
Callback to invoke on focus event.
`onBlur`	`(event: useDatePickerBlurEvent) => void`	—
Callback to invoke on blur event.
`onOpenChange`	`(event: useDatePickerOpenChangeEvent) => void`	—
Callback to invoke when the open state changes.
`closeOnEscape`	`boolean`	`true`
Specifies if pressing escape key should hide the overlay.
`autoFocus`	`boolean`	`false`
Whether to focus the first focusable element when the overlay is opened.
`trapped`	`boolean`	`false`
When enabled, focus is trapped within the overlay (modal behavior).
`onValueChange`	`(event: DatePickerRootValueChangeEvent) => void`	—
Callback to invoke when the value changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"root"`
`data-disabled`	Present when disabled
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only

Defines passthrough(pt) options of DatePicker component.

label	type	description
root	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
pcInputText	DatePickerRootPassThroughType<HTMLAttributes<HTMLInputElement>>	Used to pass attributes to the input's DOM element.
panel	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the panel's DOM element.
calendarContainer	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the calendarContainer's DOM element.
calendar	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the calendar's DOM element.
header	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the header's DOM element.
prev	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the prev's DOM element.
title	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the title's DOM element.
selectMonth	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the selectMonth's DOM element.
selectYear	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the selectYear's DOM element.
decade	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the decade's DOM element.
next	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the next's DOM element.
dayView	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableElement>>	Used to pass attributes to the dayView's DOM element.
monthView	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableElement>>	Used to pass attributes to the monthView's DOM element.
yearView	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableElement>>	Used to pass attributes to the yearView's DOM element.
tableHeader	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the tableHeader's DOM element.
tableHeaderRow	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the tableHeaderRow's DOM element.
weekDayCell	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the weekDayCell's DOM element.
weekDay	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the weekDay's DOM element.
weekHeader	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the weekHeader's DOM element.
weekHeaderLabel	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the weekHeaderLabel's DOM element.
tableBody	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the tableBody's DOM element.
tableBodyRow	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the tableBodyRow's DOM element.
dayCell	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the dayCell's DOM element.
monthCell	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the monthCell's DOM element.
yearCell	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the yearCell's DOM element.
weekNumber	DatePickerRootPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the weekNumber's DOM element.
weekLabel	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the weekLabel's DOM element.
buttonbar	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the buttonbar's DOM element.
today	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the today's DOM element.
clear	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the clear's DOM element.
timePicker	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the timePicker's DOM element.
hourPicker	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the hourPicker's DOM element.
minutePicker	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the minutePicker's DOM element.
secondPicker	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the secondPicker's DOM element.
ampmPicker	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the ampmPicker's DOM element.
increment	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the increment's DOM element.
decrement	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the decrement's DOM element.
hour	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the hour's DOM element.
minute	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the minute's DOM element.
second	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the second's DOM element.
ampm	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the ampm's DOM element.
separator	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the separator's DOM element.
clearTrigger	DatePickerRootPassThroughType<HTMLAttributes<SVGElement>>	Used to pass attributes to the clearTrigger's DOM element.
trigger	DatePickerRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the trigger's DOM element.
positioner	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the positioner's DOM element.
popup	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the popup's DOM element.
arrow	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the arrow's DOM element.
day	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the day's DOM element.
month	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the month's DOM element.
year	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the year's DOM element.
value	DatePickerRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the value's DOM element.
footer	DatePickerRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the footer's DOM element.

DatePickerInput#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerInputInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerInputInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerInputInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerInputPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerInputInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"input"`

Defines passthrough(pt) options of DatePickerInput component.

label	type	description
root	DatePickerInputPassThroughType<HTMLAttributes<HTMLInputElement>>	Used to pass attributes to the root's DOM element.

DatePickerTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"trigger"`

DatePickerValue#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerValueInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerValueInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerValueInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerValuePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerValueInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`placeholder`	`string`	—
Placeholder text to display when no value is selected.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"value"`

DatePickerClear#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerClearInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerClearInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerClearInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerClearPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerClearInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"clear"`

Defines passthrough(pt) options of DatePickerClear component.

label	type	description
root	DatePickerClearPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DatePickerClearTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerClearTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerClearTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerClearTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerClearTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerClearTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"clear-trigger"`

Defines passthrough(pt) options of DatePickerClearTrigger component.

label	type	description
root	DatePickerClearTriggerPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DatePickerPortal#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`(CSSProperties` \| `((instance?: PortalInstance) => CSSProperties)) & (CSSProperties` \| `((instance?: DatePickerPortalInstance) => CSSProperties))`	—
The style to apply to the component.
`className`	`(string` \| `((instance?: PortalInstance) => string)) & (string` \| `((instance?: DatePickerPortalInstance) => string))`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BaseInstance<SafeRecord<PortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<PortalProps>>; attrs: Omit<SafeRecord<SafeRecord<PortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & PortalExposes & Record<PropertyKey, unknown> & useComponentPTReturnType & useComponentStyleReturnType & BaseInstance<SafeRecord<DatePickerPortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<DatePickerPortalProps>>; attrs: Omit<SafeRecord<SafeRecord<DatePickerPortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & DatePickerPortalExposes`	—
The instance to pass to the component.
`pt`	`PortalPassThrough & Record<PropertyKey, unknown> & DatePickerPortalPassThrough`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: PortalInstance) => ReactNode & (instance: DatePickerPortalInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`onMounted`	`() => void`	—
Callback function to invoke when the portal is mounted.
`onUnmounted`	`() => void`	—
Callback function to invoke when the portal is unmounted.
`element`	`HTMLElement` \| `ReactNode`	—
The element to be rendered as the portal.
`elementRef`	`RefObject<HTMLElement>`	—
The element reference to be rendered as the portal.
`appendTo`	`string` \| `HTMLElement` \| `((instance: PortalInstance) => HTMLElement)`	`'body'`
The DOM element where the portal should be appended to.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"portal"`

Defines passthrough(pt) options of DatePickerPortal component.

label	type	description
root	DatePickerPortalPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerPositioner#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerPositionerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerPositionerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerPositionerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerPositionerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerPositionerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`side`	`SideType`	—
The side of the positioner.
`align`	`AlignType`	—
The align of the positioner.
`sideOffset`	`number`	—
The side offset of the positioner.
`alignOffset`	`number`	—
The align offset of the positioner.
`flip`	`boolean`	—
Whether to flip the positioner.
`shift`	`boolean`	—
Whether to shift the positioner.
`hideWhenDetached`	`boolean`	—
Whether to hide the positioner when detached.
`strategy`	`"fixed"` \| `"absolute"`	`'fixed'`
The positioning strategy.
`boundary`	`HTMLElement`	—
The boundary element that constrains the positioner placement. Used in JS fallback mode only; CSS Anchor mode uses the containing block.
`anchor`	`HTMLElement`	—
The anchor element.
`content`	`HTMLDivElement`	—
The content element.
`arrow`	`HTMLDivElement`	—
The arrow element.
`autoZIndex`	`boolean`	`true`
Whether to automatically manage layering.
`baseZIndex`	`number`	`0`
Base zIndex value to use in layering.
`onPlacementChange`	`(placement: { side: SideType; align: AlignType }) => void`	—
Callback invoked when the actual placement changes due to flip or shift.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"positioner"`
`data-side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` — placement
`data-align`	`"start"` \| `"center"` \| `"end"` — alignment

CSS Custom Properties

The positioner element exposes CSS custom properties for layout and transform control.

CSS Variable	Description
`--available-height`	Available vertical space in pixels
`--available-width`	Available horizontal space in pixels
`--transform-origin`	Computed transform origin for animations
`--positioner-anchor-width`	Width of the anchor/trigger element

DatePickerPopup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerPopupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerPopupInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerPopupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerPopupPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerPopupInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"popup"`
`data-open`	Present when popup is open

DatePickerArrow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerArrowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerArrowInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerArrowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerArrowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerArrowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"arrow"`
`data-side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` — placement
`data-align`	`"start"` \| `"center"` \| `"end"` — alignment

CSS Custom Properties

The arrow element exposes CSS custom properties for dynamic positioning:

CSS Variable	Description
`--placer-arrow-x`	Horizontal offset of arrow
`--placer-arrow-y`	Vertical offset of arrow
`--placer-arrow-left`	Left position of arrow element
`--placer-arrow-top`	Top position of arrow element

DatePickerPanel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerPanelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerPanelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerPanelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerPanelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerPanelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"panel"`

Defines passthrough(pt) options of DatePickerPanel component.

label	type	description
root	DatePickerPanelPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerCalendar#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerCalendarInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerCalendarInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerCalendarInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerCalendarPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerCalendarInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"calendar"`

Defines passthrough(pt) options of DatePickerCalendar component.

label	type	description
root	DatePickerCalendarPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerCalendarContainer#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerCalendarContainerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerCalendarContainerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerCalendarContainerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerCalendarContainerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerCalendarContainerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"calendarContainer"`

DatePickerHeader#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerHeaderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerHeaderInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerHeaderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerHeaderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerHeaderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"header"`

Defines passthrough(pt) options of DatePickerHeader component.

label	type	description
root	DatePickerHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerPrev#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerPrevInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerPrevInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerPrevInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerPrevPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerPrevInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"prev"`

Defines passthrough(pt) options of DatePickerPrev component.

label	type	description
root	DatePickerPrevPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DatePickerNext#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerNextInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerNextInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerNextInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerNextPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerNextInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"next"`

Defines passthrough(pt) options of DatePickerNext component.

label	type	description
root	DatePickerNextPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DatePickerTitle#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTitleInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTitleInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTitleInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTitlePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTitleInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"title"`

Defines passthrough(pt) options of DatePickerTitle component.

label	type	description
root	DatePickerTitlePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerSelectMonth#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerSelectMonthInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerSelectMonthInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerSelectMonthInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerSelectMonthPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerSelectMonthInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"select-month"`

Defines passthrough(pt) options of DatePickerSelectMonth component.

label	type	description
root	DatePickerSelectMonthPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DatePickerSelectYear#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerSelectYearInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerSelectYearInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerSelectYearInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerSelectYearPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerSelectYearInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"select-year"`

Defines passthrough(pt) options of DatePickerSelectYear component.

label	type	description
root	DatePickerSelectYearPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DatePickerDecade#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerDecadeInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerDecadeInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerDecadeInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerDecadePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerDecadeInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"decade"`

Defines passthrough(pt) options of DatePickerDecade component.

label	type	description
root	DatePickerDecadePassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DatePickerTable#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTablePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"table"`

Defines passthrough(pt) options of DatePickerTable component.

label	type	description
root	DatePickerTablePassThroughType<HTMLAttributes<HTMLTableElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableHead#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableHeadInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableHeadInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableHeadInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableHeadPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableHeadInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"tableHeader"`

Defines passthrough(pt) options of DatePickerTableHead component.

label	type	description
root	DatePickerTableHeadPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableHeadRow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableHeadRowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableHeadRowInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableHeadRowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableHeadRowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableHeadRowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"tableHeaderRow"`

Defines passthrough(pt) options of DatePickerTableHeadRow component.

label	type	description
root	DatePickerTableHeadRowPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableHeadCell#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableHeadCellInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableHeadCellInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableHeadCellInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableHeadCellPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableHeadCellInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"weekDayCell"`

Defines passthrough(pt) options of DatePickerTableHeadCell component.

label	type	description
root	DatePickerTableHeadCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableHeadWeekCell#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableHeadWeekCellInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableHeadWeekCellInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableHeadWeekCellInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableHeadWeekCellPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableHeadWeekCellInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"weekHeader"`

Defines passthrough(pt) options of DatePickerTableHeadWeekCell component.

label	type	description
root	DatePickerTableHeadWeekCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableHeadWeekLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableHeadWeekLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableHeadWeekLabelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableHeadWeekLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableHeadWeekLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableHeadWeekLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"weekDay"`

DatePickerTableHeadWeekHeaderLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableHeadWeekHeaderLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableHeadWeekHeaderLabelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableHeadWeekHeaderLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableHeadWeekHeaderLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableHeadWeekHeaderLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"weekHeaderLabel"`

DatePickerTableBody#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableBodyInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableBodyInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableBodyInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableBodyPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableBodyInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`view`	`"date"` \| `"month"` \| `"year"`	`date`
Current view of the date picker.
`index`	`number`	`0`
Index of the table body.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"tableBody"`

Defines passthrough(pt) options of DatePickerTableBody component.

label	type	description
root	DatePickerTableBodyPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableBodyRow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableBodyRowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableBodyRowInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableBodyRowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableBodyRowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableBodyRowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"tableBodyRow"`

Defines passthrough(pt) options of DatePickerTableBodyRow component.

label	type	description
root	DatePickerTableBodyRowPassThroughType<HTMLAttributes<HTMLTableRowElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableBodyCell#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableBodyCellInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableBodyCellInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableBodyCellInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableBodyCellPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableBodyCellInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`date`	`useDatePickerDateMeta`	—
Date metadata for the cell.
`month`	`useDatePickerMonthOptions`	—
Month options for the cell.
`index`	`number`	—
Month index of the cell.
`year`	`useDatePickerYearOptions`	—
Year options for the cell.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"cell"`

Defines passthrough(pt) options of DatePickerTableBodyCell component.

label	type	description
root	DatePickerTableBodyCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableBodyWeekCell#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableBodyWeekCellInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableBodyWeekCellInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableBodyWeekCellInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableBodyWeekCellPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableBodyWeekCellInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"weekNumber"`

Defines passthrough(pt) options of DatePickerTableBodyWeekCell component.

label	type	description
root	DatePickerTableBodyWeekCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	Used to pass attributes to the root's DOM element.

DatePickerTableBodyWeekLabel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTableBodyWeekLabelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTableBodyWeekLabelInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTableBodyWeekLabelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTableBodyWeekLabelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTableBodyWeekLabelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"weekLabel"`

DatePickerDay#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerDayInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerDayInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerDayInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerDayPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerDayInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`day`	`useDatePickerDateMeta`	—
Date metadata for the day.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"day"`
`data-selected`	`"true"` when selected
`data-disabled`	`"true"` when disabled
`data-today`	`"true"` on today's date
`data-other-month`	`"true"` for adjacent months

DatePickerMonth#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerMonthInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerMonthInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerMonthInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerMonthPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerMonthInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`month`	`useDatePickerMonthOptions`	—
Month options for the cell.
`index`	`number`	—
Month index of the cell.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"month"`
`data-selected`	`"true"` when selected
`data-disabled`	`"true"` when disabled

DatePickerYear#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerYearInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerYearInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerYearInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerYearPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerYearInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`year`	`useDatePickerYearOptions`	—
Year options for the cell.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"year"`
`data-selected`	`"true"` when selected
`data-disabled`	`"true"` when disabled

DatePickerTime#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTimeInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTimeInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTimeInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTimePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTimeInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"timePicker"`

Defines passthrough(pt) options of DatePickerTime component.

label	type	description
root	DatePickerTimePassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerPicker#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerPickerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerPickerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerPickerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerPickerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerPickerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`type`	`"ampm"` \| `"hour"` \| `"minute"` \| `"second"`	—
Type of the picker.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"hourPicker"` \| `"minutePicker"` \| `"secondPicker"` \| `"ampmPicker"`

Defines passthrough(pt) options of DatePickerPicker component.

label	type	description
root	DatePickerPickerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerHour#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerHourInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerHourInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerHourInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerHourPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerHourInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"hour"`

Defines passthrough(pt) options of DatePickerHour component.

label	type	description
root	DatePickerHourPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DatePickerMinute#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerMinuteInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerMinuteInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerMinuteInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerMinutePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerMinuteInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"minute"`

Defines passthrough(pt) options of DatePickerMinute component.

label	type	description
root	DatePickerMinutePassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DatePickerSecond#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerSecondInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerSecondInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerSecondInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerSecondPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerSecondInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"second"`

Defines passthrough(pt) options of DatePickerSecond component.

label	type	description
root	DatePickerSecondPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DatePickerAmPm#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerAmPmInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerAmPmInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerAmPmInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerAmPmPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerAmPmInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"ampm"`

Defines passthrough(pt) options of DatePickerAmPm component.

label	type	description
root	DatePickerAmPmPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

DatePickerIncrement#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerIncrementInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerIncrementInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerIncrementInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerIncrementPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerIncrementInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"increment"`

Defines passthrough(pt) options of DatePickerIncrement component.

label	type	description
root	DatePickerIncrementPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DatePickerDecrement#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerDecrementInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerDecrementInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerDecrementInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerDecrementPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerDecrementInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"decrement"`

Defines passthrough(pt) options of DatePickerDecrement component.

label	type	description
root	DatePickerDecrementPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DatePickerSeparator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerSeparatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerSeparatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerSeparatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerSeparatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerSeparatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"separator"`

DatePickerButtonbar#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerButtonbarInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerButtonbarInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerButtonbarInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerButtonbarPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerButtonbarInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"buttonbar"`

Defines passthrough(pt) options of DatePickerButtonbar component.

label	type	description
root	DatePickerButtonbarPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerFooter#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerFooterInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerFooterInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerFooterInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerFooterPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerFooterInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"footer"`

Defines passthrough(pt) options of DatePickerFooter component.

label	type	description
root	DatePickerFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

DatePickerToday#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: DatePickerTodayInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: DatePickerTodayInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`DatePickerTodayInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<DatePickerTodayPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: DatePickerTodayInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"datepicker"`
`data-part`	`"today"`

Defines passthrough(pt) options of DatePickerToday component.

label	type	description
root	DatePickerTodayPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

DatePickerDropdown#

Accessibility#

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup.

The optional datepicker button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button.

Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header have an aria-label retrieved from the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys.

Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute.

Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and pm keys.

DatePicker also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.

Choose Date Button Keyboard Support#

Key	Function
`space`	Opens popup and moves focus to the selected date, if there is none focuses on today.
`enter`	Opens popup and moves focus to the selected date, if there is none focuses on today.

Key	Function
`escape`	Closes the popup and moves focus to the input element.
`tab`	Moves focus to the next focusable element within the popup.
`shift` + `tab`	Moves focus to the next focusable element within the popup.

Header Buttons Keyboard Support#

Key	Function
`enter`	Triggers the button action.
`space`	Triggers the button action.

Date Grid Keyboard Support#

Key	Function
`enter`	Selects the date, closes the popup and moves focus to the input element.
`space`	Closes the popup and moves focus to the input element.
`up arrow`	Moves focus to the same day of the previous week.
`alt` + `up arrow`	Closes the popup and moves focus to the input element.
`down arrow`	Moves focus to the same day of the next week.
`right arrow`	Moves focus to the next day.
`left arrow`	Moves focus to the previous day.
`home`	Moves focus to the first day of the current week.
`end`	Moves focus to the last day of the current week.
`page up`	Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.
`shift` + `page up`	Changes the date to previous year in date picker mode. Has no effect in month or year picker.
`page down`	Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.
`shift` + `page down`	Changes the date to next year in date picker mode. Has no effect in month or year picker.

Footer Buttons Keyboard Support#

Key	Function
`enter`	Triggers the button action.
`space`	Triggers the button action.

Wk	Su	Mo	Tu	We	Th	Fr	Sa
51	26	27	28	29	30	31	1
1	2	3	4	5	6	7	8
2	9	10	11	12	13	14	15
3	16	17	18	19	20	21	22
4	23	24	25	26	27	28	29
5	30	31	1	2	3	4	5

Wk	Su	Mo	Tu	We	Th	Fr	Sa
51	26	27	28	29	30	31	1
1	2	3	4	5	6	7	8
2	9	10	11	12	13	14	15
3	16	17	18	19	20	21	22
4	23	24	25	26	27	28	29
5	30	31	1	2	3	4	5