DatePicker API

API documentation for DatePicker component

DatePicker#

Props#

Defines valid properties in DatePicker component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerInstance) => ReactNode)	null	The children to render.
onValueChange	(event: DatePickerValueChangeEvent) => void	null	Callback to invoke when the value changes.
defaultValue	string \| string[] \| Date \| Date[]	null	The default value for the input when not controlled by `modelValue` .
value	string \| string[] \| Date \| Date[]	null	Value of the component.
name	string	null	The name attribute for the element, typically used in form submissions.
selectionMode	"multiple" \| "range" \| "single"	single	Defines the quantity of the selection.
dateFormat	string	null	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	null	Icon of the datepicker button.
prevIcon	string	null	Icon to show in the previous button.
nextIcon	string	null	Icon to show in the next button.
incrementIcon	string	null	Icon to show in each of the increment buttons.
decrementIcon	string	null	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	null	The minimum selectable date.
maxDate	Date	null	The maximum selectable date.
disabledDates	Date[]	null	Array with dates to disable.
disabledDays	number[]	null	Array with disabled weekday numbers.
maxDateCount	number	null	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.
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.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
size	"small" \| "large"	null	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"	null	Specifies the input variant of the component.
readonly	boolean	false	When present, it specifies that an input field is read-only.
placeholder	string	null	Placeholder text for the input.
required	boolean	null	When present, it specifies that the component is a required field.
appendTo	HTMLElement \| "body" \| "self"	body	A valid query selector or an HTMLElement to specify where the overlay gets attached.
fluid	boolean	null	Spans 100% width of the container when enabled.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string	null	Establishes a string value that labels the component.
onDateSelect	(event: useDatePickerDateSelectEvent) => void	null	Callback to invoke when a date is selected.
onMonthChange	(event: useDatePickerMonthChangeEvent) => void	null	Callback to invoke when the month changes.
onYearChange	(event: useDatePickerYearChangeEvent) => void	null	Callback to invoke when the year changes.
onTodayButtonClick	(event: useDatePickerTodayButtonClickEvent) => void	null	Callback to invoke when the today button is clicked.
onClearButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Callback to invoke when the clear button is clicked.
onInput	(event: ChangeEvent<HTMLInputElement>) => void	null	Callback to invoke on input event.
onKeyDown	(event: KeyboardEvent<HTMLButtonElement \| HTMLInputElement>) => void	null	Callback to invoke on keydown event.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Callback to invoke on focus event.
onBlur	(event: useDatePickerBlurEvent) => void	null	Callback to invoke on blur event.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in DatePicker component.

name	type	default	description
rawValue	string \| string[] \| Date \| Date[]	null	The current raw value of the datepicker (unformatted).
overlayVisible	boolean	null	Whether the overlay is visible.
currentView	"date" \| "month" \| "year"	null	Current view state information.
showClearIcon	boolean	null	Whether to show the clear icon.
hoveredDate	useDatePickerDateMeta	null	The date currently being hovered in range selection mode.

Exposes#

Defines the methods and properties exposed by DatePicker component.

name	type	default	description
state	useDatePickerState	null	State object containing the current raw value and view information.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input element.
nextButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the next navigation button element.
prevButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the previous navigation button element.
portalRef	RefObject<{ containerRef: { current: { elementRef: RefObject<HTMLDivElement> } } }>	null	Reference to the portal element.
overlayRef	RefObject<HTMLDivElement>	null	Reference to the overlay element.
inputFieldValue	string	null	Formatted value string for the input field.
weekHeaderLabel	string	null	Label text for the week header.
todayLabel	string	null	Label text for today button.
clearLabel	string	null	Label text for clear button.
weekDays	string[]	null	Array of localized day names for the week.
months	useDatePickerMonthData[]	null	Array of month data objects containing dates and week numbers.
monthPickerValues	{ value: string; selectable: boolean }[]	null	Array of month picker values.
yearPickerValues	{ value: number; selectable: boolean }[]	null	Array of year picker values.
switchViewButtonDisabled	boolean	null	Whether the switch view button is disabled.
formattedCurrentHour	string \| number	null	Formatted current hour value for display.
formattedCurrentMinute	string \| number	null	Formatted current minute value for display.
formattedCurrentSecond	string \| number	null	Formatted current second value for display.
ampmLabel	string	null	AM/PM label for 12-hour format.
changeVisibleState	(visible: boolean) => void	null	Sets the visibility state of the overlay.
getIndexedMonth	(index?: number) => useDatePickerMonthData	null	Returns a specific month by index.
getYear	() => number	null	Returns the current year.
getMonthName	(index?: number) => string	null	Returns the name of the current month.
isRangeSelection	() => boolean	null	Returns whether the selection mode is range.
isSelected	(dateMeta: useDatePickerDateMeta) => boolean	null	Checks if a date is selected.
onPrevButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handles previous button click event.
onNextButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handles next button click event.
switchToMonthView	(event: MouseEvent<HTMLButtonElement>) => void	null	Switches to month view.
switchToYearView	(event: MouseEvent<HTMLButtonElement>) => void	null	Switches to year view.
onDateSelect	(event: KeyboardEvent<HTMLSpanElement> \| MouseEvent<HTMLSpanElement, MouseEvent>, dateMeta: useDatePickerDateMeta) => void	null	Handles date selection.
onMonthSelect	(event: KeyboardEvent<HTMLSpanElement> \| MouseEvent<HTMLSpanElement, MouseEvent>, index: number) => void	null	Handles month selection.
onYearSelect	(event: KeyboardEvent<HTMLSpanElement> \| MouseEvent<HTMLSpanElement, MouseEvent>, year: { value: number }) => void	null	Handles year selection.
onDateCellKeydown	(event: KeyboardEvent<HTMLSpanElement>, date: useDatePickerDateMeta, groupIndex: number) => void	null	Handles date cell keydown event.
onMonthCellKeydown	(event: KeyboardEvent<HTMLSpanElement>, index: number) => void	null	Handles month cell keydown event.
onYearCellKeydown	(event: KeyboardEvent<HTMLSpanElement>, year: { value: number }) => void	null	Handles year cell keydown event.
onButtonClick	() => void	null	Handles button click event.
onTimePickerElementMouseDown	(event: MouseEvent<HTMLButtonElement>, type: number, direction: number) => void	null	Handles time picker element mouse down event.
onTimePickerElementMouseUp	(event: KeyboardEvent<HTMLButtonElement> \| MouseEvent<HTMLButtonElement, MouseEvent>) => void	null	Handles time picker element mouse up event.
onTimePickerElementMouseLeave	() => void	null	Handles time picker element mouse leave event.
onContainerButtonKeydown	(event: KeyboardEvent<HTMLButtonElement>) => void	null	Handles container button keydown event.
onTimePickerElementKeyDown	(event: KeyboardEvent<HTMLButtonElement>, type: number, direction: number) => void	null	Handles time picker element keydown event.
onTimePickerElementKeyUp	(event: KeyboardEvent<HTMLButtonElement>) => void	null	Handles time picker element keyup event.
toggleAMPM	(event: MouseEvent<HTMLButtonElement>) => void	null	Toggles AM/PM.
onTodayButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handles today button click event.
onClearButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handles clear button click event.
onClearClick	() => void	null	Handles clear click event.
onInput	(event: ChangeEvent<HTMLInputElement>) => void	null	Handles input event.
onInputClick	() => void	null	Handles input click event.
onInputKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Handles input keydown event.
onInputFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Handles input focus event.
onInputBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Handles input blur event.
onOverlayEnter	() => void	null	Handles overlay enter event.
parseValue	(text: string) => string \| string[] \| Date \| Date[]	null	Parses a string value to date picker value.
isDateEquals	(value: string \| Date, dateMeta: useDatePickerDateMeta) => boolean	null	Checks if two dates are equal.
isMonthSelected	(month: number) => boolean	null	Checks if a month is selected.
isYearSelected	(year: number) => boolean	null	Checks if a year is selected.
isInHoverRange	(dateMeta: useDatePickerDateMeta) => boolean	null	Checks if a date is in the hover range during range selection.
onDateCellMouseEnter	(dateMeta: useDatePickerDateMeta) => void	null	Handles date cell mouse enter event.

Events#

DatePickerValueChangeEvent

Event fired when the datepicker's value changes.

name	type	description
value	string \| string[] \| Date \| Date[]	The value of the datepicker.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePicker component.

name	type	default	description
root	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
pcInputText	DatePickerPassThroughType<HTMLAttributes<HTMLInputElement>>	null	Used to pass attributes to the input's DOM element.
portal	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the portal's DOM element.
panel	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.
container	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the container's DOM element.
calendar	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the calendar's DOM element.
header	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
prev	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the prev's DOM element.
prevIcon	DatePickerPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the prevIcon's DOM element.
title	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the title's DOM element.
selectMonth	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the selectMonth's DOM element.
selectYear	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the selectYear's DOM element.
decade	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the decade's DOM element.
next	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the next's DOM element.
nextIcon	DatePickerPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the nextIcon's DOM element.
dayView	DatePickerPassThroughType<HTMLAttributes<HTMLTableElement>>	null	Used to pass attributes to the dayView's DOM element.
monthView	DatePickerPassThroughType<HTMLAttributes<HTMLTableElement>>	null	Used to pass attributes to the monthView's DOM element.
yearView	DatePickerPassThroughType<HTMLAttributes<HTMLTableElement>>	null	Used to pass attributes to the yearView's DOM element.
tableHeader	DatePickerPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	null	Used to pass attributes to the tableHeader's DOM element.
tableHeaderRow	DatePickerPassThroughType<HTMLAttributes<HTMLTableRowElement>>	null	Used to pass attributes to the tableHeaderRow's DOM element.
weekDayCell	DatePickerPassThroughType<HTMLAttributes<HTMLTableCellElement>>	null	Used to pass attributes to the weekDayCell's DOM element.
weekDay	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the weekDay's DOM element.
weekHeader	DatePickerPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	null	Used to pass attributes to the weekHeader's DOM element.
weekHeaderLabel	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the weekHeaderLabel's DOM element.
tableBody	DatePickerPassThroughType<HTMLAttributes<HTMLTableSectionElement>>	null	Used to pass attributes to the tableBody's DOM element.
tableBodyRow	DatePickerPassThroughType<HTMLAttributes<HTMLTableRowElement>>	null	Used to pass attributes to the tableBodyRow's DOM element.
dayCell	DatePickerPassThroughType<HTMLAttributes<HTMLTableCellElement>>	null	Used to pass attributes to the dayCell's DOM element.
monthCell	DatePickerPassThroughType<HTMLAttributes<HTMLTableCellElement>>	null	Used to pass attributes to the monthCell's DOM element.
yearCell	DatePickerPassThroughType<HTMLAttributes<HTMLTableCellElement>>	null	Used to pass attributes to the yearCell's DOM element.
weekNumber	DatePickerPassThroughType<HTMLAttributes<HTMLTableCellElement>>	null	Used to pass attributes to the weekNumber's DOM element.
weekLabelContainer	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the weekLabelContainer's DOM element.
buttonbar	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the buttonbar's DOM element.
today	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the today's DOM element.
clear	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the clear's DOM element.
timePicker	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the timePicker's DOM element.
hourPicker	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the hourPicker's DOM element.
minutePicker	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the minutePicker's DOM element.
secondPicker	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the secondPicker's DOM element.
ampmPicker	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the ampmPicker's DOM element.
increment	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the increment's DOM element.
incrementIcon	DatePickerPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the incrementIcon's DOM element.
decrement	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the decrement's DOM element.
decrementIcon	DatePickerPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the decrementIcon's DOM element.
hour	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the hour's DOM element.
minute	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the minute's DOM element.
second	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the second's DOM element.
ampm	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the ampm's DOM element.
separatorContainer	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the separatorContainer's DOM element.
separator	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the separator's DOM element.
clearIcon	DatePickerPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the clearIcon's DOM element.
dropdown	DatePickerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the dropdown's DOM element.
dropdownIcon	DatePickerPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the dropdownIcon's DOM element.
inputIconContainer	DatePickerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the inputIconContainer's DOM element.
footer	DatePickerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.

Types#

Instance

Instance of DatePicker component.

values
ComponentInstance<DatePickerProps, DatePickerState, DatePickerExposes>

DatePickerInput#

Props#

Defines valid properties in DatePickerInput component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerInputInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerInputInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerInputPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerInputInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerInput component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerInput component.

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

Types#

Instance

Instance of DatePickerInput component.

values
ComponentInstance<DatePickerInputProps, DatePickerInputState, DatePickerInputExposes>

DatePickerInputIconContainer#

Props#

Defines valid properties in DatePickerInputIconContainer component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerInputIconContainerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerInputIconContainerInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerInputIconContainerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerInputIconContainerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerInputIconContainer component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerInputIconContainer component.

name	type	default	description
root	DatePickerInputIconContainerPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DatePickerInputIconContainer component.

values
ComponentInstance<DatePickerInputIconContainerProps, DatePickerInputIconContainerState, DatePickerInputIconContainerExposes>

DatePickerDropdownIcon#

Props#

Defines valid properties in DatePickerDropdownIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerDropdownIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerDropdownIconInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerDropdownIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerDropdownIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerDropdownIcon component.

name	type	default	description
root	DatePickerDropdownIconPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DatePickerDropdownIcon component.

values
ComponentInstance<DatePickerDropdownIconProps, DatePickerDropdownIconState, DatePickerDropdownIconExposes>

DatePickerDropdown#

Props#

Defines valid properties in DatePickerDropdown component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerDropdownInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerDropdownInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerDropdownPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerDropdownInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Exposes#

Defines the methods and properties exposed by DatePickerDropdown component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Events#

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerDropdown component.

name	type	default	description
root	DatePickerDropdownPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DatePickerDropdown component.

values
ComponentInstance<DatePickerDropdownProps, DatePickerDropdownState, DatePickerDropdownExposes>

DatePickerClearIcon#

Props#

Defines valid properties in DatePickerClearIcon component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerClearIconInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerClearIconInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerClearIconPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerClearIconInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerClearIcon component.

name	type	default	description
datepicker	DatePickerInstance	null	The DatePicker component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerClearIcon component.

name	type	default	description
root	DatePickerClearIconPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DatePickerClearIcon component.

values
ComponentInstance<DatePickerClearIconProps, DatePickerClearIconState, DatePickerClearIconExposes>

DatePickerPortal#

Props#

Defines valid properties in DatePickerPortal component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerPortalInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerPortalInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerPortalPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerPortalInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerPortal component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerPortal component.

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

Types#

Instance

Instance of DatePickerPortal component.

values
ComponentInstance<DatePickerPortalProps, DatePickerPortalState, DatePickerPortalExposes>

DatePickerPanel#

Props#

Defines valid properties in DatePickerPanel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerPanelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerPanelInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerPanelPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerPanelInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerPanel component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerPanel component.

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

Types#

Instance

Instance of DatePickerPanel component.

values
ComponentInstance<DatePickerPanelProps, DatePickerPanelState, DatePickerPanelExposes>

DatePickerContainer#

Props#

Defines valid properties in DatePickerContainer component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerContainerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerContainerInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerContainerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerContainerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerContainer component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerContainer component.

name	type	default	description
root	DatePickerContainerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DatePickerContainer component.

values
ComponentInstance<DatePickerContainerProps, DatePickerContainerState, DatePickerContainerExposes>

DatePickerCalendar#

Props#

Defines valid properties in DatePickerCalendar component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerCalendarInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerCalendarInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerCalendarPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerCalendarInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerCalendar component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerCalendar component.

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

Types#

Instance

Instance of DatePickerCalendar component.

values
ComponentInstance<DatePickerCalendarProps, DatePickerCalendarState, DatePickerCalendarExposes>

DatePickerHeader#

Props#

Defines valid properties in DatePickerHeader component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerHeaderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerHeaderInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerHeaderPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerHeaderInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerHeader component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerHeader component.

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

Types#

Instance

Instance of DatePickerHeader component.

values
ComponentInstance<DatePickerHeaderProps, DatePickerHeaderState, DatePickerHeaderExposes>

DatePickerPrev#

Props#

Defines valid properties in DatePickerPrev component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerPrevInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerPrevInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerPrevPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerPrevInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerPrev component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerPrev component.

name	type	default	description
root	DatePickerPrevPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.
prevIcon	DatePickerPrevPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the prev icon's DOM element.

Types#

Instance

Instance of DatePickerPrev component.

values
ComponentInstance<DatePickerPrevProps, DatePickerPrevState, DatePickerPrevExposes>

DatePickerTitle#

Props#

Defines valid properties in DatePickerTitle component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTitleInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTitleInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTitlePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTitleInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTitle component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTitle component.

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

Types#

Instance

Instance of DatePickerTitle component.

values
ComponentInstance<DatePickerTitleProps, DatePickerTitleState, DatePickerTitleExposes>

DatePickerSelectMonth#

Props#

Defines valid properties in DatePickerSelectMonth component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerSelectMonthInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerSelectMonthInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerSelectMonthPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerSelectMonthInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerSelectMonth component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerSelectMonth component.

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

Types#

Instance

Instance of DatePickerSelectMonth component.

values
ComponentInstance<DatePickerSelectMonthProps, DatePickerSelectMonthState, DatePickerSelectMonthExposes>

DatePickerSelectYear#

Props#

Defines valid properties in DatePickerSelectYear component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerSelectYearInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerSelectYearInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerSelectYearPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerSelectYearInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerSelectYear component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerSelectYear component.

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

Types#

Instance

Instance of DatePickerSelectYear component.

values
ComponentInstance<DatePickerSelectYearProps, DatePickerSelectYearState, DatePickerSelectYearExposes>

DatePickerDecade#

Props#

Defines valid properties in DatePickerDecade component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerDecadeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerDecadeInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerDecadePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerDecadeInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerDecade component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerDecade component.

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

Types#

Instance

Instance of DatePickerDecade component.

values
ComponentInstance<DatePickerDecadeProps, DatePickerDecadeState, DatePickerDecadeExposes>

DatePickerNext#

Props#

Defines valid properties in DatePickerNext component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerNextInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerNextInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerNextPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerNextInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerNext component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerNext component.

name	type	default	description
root	DatePickerNextPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.
nextIcon	DatePickerNextPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the next icon's DOM element.

Types#

Instance

Instance of DatePickerNext component.

values
ComponentInstance<DatePickerNextProps, DatePickerNextState, DatePickerNextExposes>

DatePickerTable#

Props#

Defines valid properties in DatePickerTable component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTablePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTable component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTable component.

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

Types#

Instance

Instance of DatePickerTable component.

values
ComponentInstance<DatePickerTableProps, DatePickerTableState, DatePickerTableExposes>

DatePickerTableHead#

Props#

Defines valid properties in DatePickerTableHead component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableHeadInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableHeadInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTableHeadPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableHeadInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTableHead component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTableHead component.

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

Types#

Instance

Instance of DatePickerTableHead component.

values
ComponentInstance<DatePickerTableHeadProps, DatePickerTableHeadState, DatePickerTableHeadExposes>

DatePickerTableHeadRow#

Props#

Defines valid properties in DatePickerTableHeadRow component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableHeadRowInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableHeadRowInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTableHeadRowPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableHeadRowInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTableHeadRow component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTableHeadRow component.

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

Types#

Instance

Instance of DatePickerTableHeadRow component.

values
ComponentInstance<DatePickerTableHeadRowProps, DatePickerTableHeadRowState, DatePickerTableHeadRowExposes>

DatePickerTableHeadCell#

Props#

Defines valid properties in DatePickerTableHeadCell component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableHeadCellInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableHeadCellInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTableHeadCellPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableHeadCellInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTableHeadCell component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTableHeadCell component.

name	type	default	description
root	DatePickerTableHeadCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	null	Used to pass attributes to the root's DOM element.
weekDay	DatePickerTableHeadCellPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the week day label's DOM element.

Types#

Instance

Instance of DatePickerTableHeadCell component.

values
ComponentInstance<DatePickerTableHeadCellProps, DatePickerTableHeadCellState, DatePickerTableHeadCellExposes>

DatePickerTableHeadWeekCell#

Props#

Defines valid properties in DatePickerTableHeadWeekCell component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableHeadWeekCellInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableHeadWeekCellInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTableHeadWeekCellPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableHeadWeekCellInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTableHeadWeekCell component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTableHeadWeekCell component.

name	type	default	description
root	DatePickerTableHeadWeekCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	null	Used to pass attributes to the root's DOM element.
weekHeaderLabel	DatePickerTableHeadWeekCellPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the week header label's DOM element.

Types#

Instance

Instance of DatePickerTableHeadWeekCell component.

values
ComponentInstance<DatePickerTableHeadWeekCellProps, DatePickerTableHeadWeekCellState, DatePickerTableHeadWeekCellExposes>

DatePickerTableBody#

Props#

Defines valid properties in DatePickerTableBody component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableBodyInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableBodyInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTableBodyPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableBodyInstance) => ReactNode)	null	The children to render.
view	"date" \| "month" \| "year"	date	Current view of the date picker.
index	number	0	Index of the table body.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTableBody component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTableBody component.

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

Types#

Instance

Instance of DatePickerTableBody component.

values
ComponentInstance<DatePickerTableBodyProps, DatePickerTableBodyState, DatePickerTableBodyExposes>

DatePickerTableBodyRow#

Props#

Defines valid properties in DatePickerTableBodyRow component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableBodyRowInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableBodyRowInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTableBodyRowPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableBodyRowInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTableBodyRow component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTableBodyRow component.

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

Types#

Instance

Instance of DatePickerTableBodyRow component.

values
ComponentInstance<DatePickerTableBodyRowProps, DatePickerTableBodyRowState, DatePickerTableBodyRowExposes>

DatePickerTableBodyCell#

Props#

Defines valid properties in DatePickerTableBodyCell component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableBodyCellInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableBodyCellInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTableBodyCellPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableBodyCellInstance) => ReactNode)	null	The children to render.
date	useDatePickerDateMeta	null	Date metadata for the cell.
month	useDatePickerMonthOptions	null	Month options for the cell.
index	number	null	Month index of the cell.
year	useDatePickerYearOptions	null	Year options for the cell.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTableBodyCell component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.
datepickertablebody	DatePickerTableBodyInstance	null	Instance of the DatePickerTableBody component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTableBodyCell component.

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

Types#

Instance

Instance of DatePickerTableBodyCell component.

values
ComponentInstance<DatePickerTableBodyCellProps, DatePickerTableBodyCellState, DatePickerTableBodyCellExposes>

DatePickerTableBodyWeekCell#

Props#

Defines valid properties in DatePickerTableBodyWeekCell component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTableBodyWeekCellInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTableBodyWeekCellInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTableBodyWeekCellPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTableBodyWeekCellInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTableBodyWeekCell component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTableBodyWeekCell component.

name	type	default	description
root	DatePickerTableBodyWeekCellPassThroughType<HTMLAttributes<HTMLTableCellElement>>	null	Used to pass attributes to the root's DOM element.
weekLabelContainer	DatePickerTableBodyWeekCellPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the week label container's DOM element.

Types#

Instance

Instance of DatePickerTableBodyWeekCell component.

values
ComponentInstance<DatePickerTableBodyWeekCellProps, DatePickerTableBodyWeekCellState, DatePickerTableBodyWeekCellExposes>

DatePickerFooter#

Props#

Defines valid properties in DatePickerFooter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerFooterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerFooterInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerFooterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerFooterInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerFooter component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerFooter component.

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

Types#

Instance

Instance of DatePickerFooter component.

values
ComponentInstance<DatePickerFooterProps, DatePickerFooterState, DatePickerFooterExposes>

DatePickerButtonbar#

Props#

Defines valid properties in DatePickerButtonbar component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerButtonbarInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerButtonbarInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerButtonbarPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerButtonbarInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerButtonbar component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerButtonbar component.

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

Types#

Instance

Instance of DatePickerButtonbar component.

values
ComponentInstance<DatePickerButtonbarProps, DatePickerButtonbarState, DatePickerButtonbarExposes>

DatePickerToday#

Props#

Defines valid properties in DatePickerToday component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTodayInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTodayInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTodayPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTodayInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerToday component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerToday component.

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

Types#

Instance

Instance of DatePickerToday component.

values
ComponentInstance<DatePickerTodayProps, DatePickerTodayState, DatePickerTodayExposes>

DatePickerClear#

Props#

Defines valid properties in DatePickerClear component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerClearInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerClearInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerClearPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerClearInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerClear component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerClear component.

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

Types#

Instance

Instance of DatePickerClear component.

values
ComponentInstance<DatePickerClearProps, DatePickerClearState, DatePickerClearExposes>

DatePickerTime#

Props#

Defines valid properties in DatePickerTime component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerTimeInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerTimeInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerTimePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerTimeInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerTime component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerTime component.

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

Types#

Instance

Instance of DatePickerTime component.

values
ComponentInstance<DatePickerTimeProps, DatePickerTimeState, DatePickerTimeExposes>

DatePickerPicker#

Props#

Defines valid properties in DatePickerPicker component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerPickerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerPickerInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerPickerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerPickerInstance) => ReactNode)	null	The children to render.
type	"hour" \| "minute" \| "second" \| "ampm"	null	Type of the picker.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerPicker component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerPicker component.

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

Types#

Instance

Instance of DatePickerPicker component.

values
ComponentInstance<DatePickerPickerProps, DatePickerPickerState, DatePickerPickerExposes>

DatePickerIncrement#

Props#

Defines valid properties in DatePickerIncrement component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerIncrementInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerIncrementInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerIncrementPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerIncrementInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerIncrement component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerIncrement component.

name	type	default	description
root	DatePickerIncrementPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.
incrementIcon	DatePickerIncrementPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the increment icon's DOM element.

Types#

Instance

Instance of DatePickerIncrement component.

values
ComponentInstance<DatePickerIncrementProps, DatePickerIncrementState, DatePickerIncrementExposes>

DatePickerHour#

Props#

Defines valid properties in DatePickerHour component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerHourInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerHourInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerHourPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerHourInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerHour component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerHour component.

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

Types#

Instance

Instance of DatePickerHour component.

values
ComponentInstance<DatePickerHourProps, DatePickerHourState, DatePickerHourExposes>

DatePickerDecrement#

Props#

Defines valid properties in DatePickerDecrement component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerDecrementInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerDecrementInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerDecrementPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerDecrementInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerDecrement component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerDecrement component.

name	type	default	description
root	DatePickerDecrementPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.
decrementIcon	DatePickerDecrementPassThroughType<HTMLAttributes<SVGElement>>	null	Used to pass attributes to the decrement icon's DOM element.

Types#

Instance

Instance of DatePickerDecrement component.

values
ComponentInstance<DatePickerDecrementProps, DatePickerDecrementState, DatePickerDecrementExposes>

DatePickerSeparatorContainer#

Props#

Defines valid properties in DatePickerSeparatorContainer component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerSeparatorContainerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerSeparatorContainerInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerSeparatorContainerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerSeparatorContainerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerSeparatorContainer component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerSeparatorContainer component.

name	type	default	description
root	DatePickerSeparatorContainerPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DatePickerSeparatorContainer component.

values
ComponentInstance<DatePickerSeparatorContainerProps, DatePickerSeparatorContainerState, DatePickerSeparatorContainerExposes>

DatePickerSeparator#

Props#

Defines valid properties in DatePickerSeparator component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerSeparatorInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerSeparatorInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerSeparatorPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerSeparatorInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerSeparator component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerSeparator component.

name	type	default	description
root	DatePickerSeparatorPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DatePickerSeparator component.

values
ComponentInstance<DatePickerSeparatorProps, DatePickerSeparatorState, DatePickerSeparatorExposes>

DatePickerMinute#

Props#

Defines valid properties in DatePickerMinute component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerMinuteInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerMinuteInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerMinutePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerMinuteInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerMinute component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerMinute component.

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

Types#

Instance

Instance of DatePickerMinute component.

values
ComponentInstance<DatePickerMinuteProps, DatePickerMinuteState, DatePickerMinuteExposes>

DatePickerSecond#

Props#

Defines valid properties in DatePickerSecond component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerSecondInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerSecondInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerSecondPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerSecondInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerSecond component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerSecond component.

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

Types#

Instance

Instance of DatePickerSecond component.

values
ComponentInstance<DatePickerSecondProps, DatePickerSecondState, DatePickerSecondExposes>

DatePickerAmPm#

Props#

Defines valid properties in DatePickerAmPm component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DatePickerAmPmInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DatePickerAmPmInstance) => string)	null	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>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DatePickerAmPmPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DatePickerAmPmInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DatePickerAmPm component.

name	type	default	description
datepicker	DatePickerInstance	null	Instance of the DatePicker component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DatePickerAmPm component.

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

Types#

Instance

Instance of DatePickerAmPm component.

values
ComponentInstance<DatePickerAmPmProps, DatePickerAmPmState, DatePickerAmPmExposes>

useDatePicker#

Props#

Defines valid properties in useDatePicker.

name	type	default	description
defaultValue	string \| string[] \| Date \| Date[]	null	The default value for the input when not controlled by `modelValue` .
value	string \| string[] \| Date \| Date[]	null	Value of the component.
name	string	null	The name attribute for the element, typically used in form submissions.
selectionMode	"multiple" \| "range" \| "single"	single	Defines the quantity of the selection.
dateFormat	string	null	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	null	Icon of the datepicker button.
prevIcon	string	null	Icon to show in the previous button.
nextIcon	string	null	Icon to show in the next button.
incrementIcon	string	null	Icon to show in each of the increment buttons.
decrementIcon	string	null	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	null	The minimum selectable date.
maxDate	Date	null	The maximum selectable date.
disabledDates	Date[]	null	Array with dates to disable.
disabledDays	number[]	null	Array with disabled weekday numbers.
maxDateCount	number	null	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.
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.
showClear	boolean	false	When enabled, a clear icon is displayed to clear the value.
size	"small" \| "large"	null	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"	null	Specifies the input variant of the component.
readonly	boolean	false	When present, it specifies that an input field is read-only.
placeholder	string	null	Placeholder text for the input.
required	boolean	null	When present, it specifies that the component is a required field.
appendTo	HTMLElement \| "body" \| "self"	body	A valid query selector or an HTMLElement to specify where the overlay gets attached.
fluid	boolean	null	Spans 100% width of the container when enabled.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string	null	Establishes a string value that labels the component.
onValueChange	(event: useDatePickerValueChangeEvent) => void	null	Callback to invoke when the value changes.
onDateSelect	(event: useDatePickerDateSelectEvent) => void	null	Callback to invoke when a date is selected.
onMonthChange	(event: useDatePickerMonthChangeEvent) => void	null	Callback to invoke when the month changes.
onYearChange	(event: useDatePickerYearChangeEvent) => void	null	Callback to invoke when the year changes.
onTodayButtonClick	(event: useDatePickerTodayButtonClickEvent) => void	null	Callback to invoke when the today button is clicked.
onClearButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Callback to invoke when the clear button is clicked.
onInput	(event: ChangeEvent<HTMLInputElement>) => void	null	Callback to invoke on input event.
onKeyDown	(event: KeyboardEvent<HTMLButtonElement \| HTMLInputElement>) => void	null	Callback to invoke on keydown event.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Callback to invoke on focus event.
onBlur	(event: useDatePickerBlurEvent) => void	null	Callback to invoke on blur event.

State#

Defines valid state in useDatePicker.

name	type	default	description
rawValue	string \| string[] \| Date \| Date[]	null	The current raw value of the datepicker (unformatted).
overlayVisible	boolean	null	Whether the overlay is visible.
currentView	"date" \| "month" \| "year"	null	Current view state information.
showClearIcon	boolean	null	Whether to show the clear icon.
hoveredDate	useDatePickerDateMeta	null	The date currently being hovered in range selection mode.

Exposes#

Defines the methods and properties exposed by useDatePicker.

name	type	default	description
state	useDatePickerState	null	State object containing the current raw value and view information.
inputRef	RefObject<{ elementRef: RefObject<HTMLInputElement> }>	null	Reference to the input element.
nextButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the next navigation button element.
prevButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the previous navigation button element.
portalRef	RefObject<{ containerRef: { current: { elementRef: RefObject<HTMLDivElement> } } }>	null	Reference to the portal element.
overlayRef	RefObject<HTMLDivElement>	null	Reference to the overlay element.
inputFieldValue	string	null	Formatted value string for the input field.
weekHeaderLabel	string	null	Label text for the week header.
todayLabel	string	null	Label text for today button.
clearLabel	string	null	Label text for clear button.
weekDays	string[]	null	Array of localized day names for the week.
months	useDatePickerMonthData[]	null	Array of month data objects containing dates and week numbers.
monthPickerValues	{ value: string; selectable: boolean }[]	null	Array of month picker values.
yearPickerValues	{ value: number; selectable: boolean }[]	null	Array of year picker values.
switchViewButtonDisabled	boolean	null	Whether the switch view button is disabled.
formattedCurrentHour	string \| number	null	Formatted current hour value for display.
formattedCurrentMinute	string \| number	null	Formatted current minute value for display.
formattedCurrentSecond	string \| number	null	Formatted current second value for display.
ampmLabel	string	null	AM/PM label for 12-hour format.
changeVisibleState	(visible: boolean) => void	null	Sets the visibility state of the overlay.
getIndexedMonth	(index?: number) => useDatePickerMonthData	null	Returns a specific month by index.
getYear	() => number	null	Returns the current year.
getMonthName	(index?: number) => string	null	Returns the name of the current month.
isRangeSelection	() => boolean	null	Returns whether the selection mode is range.
isSelected	(dateMeta: useDatePickerDateMeta) => boolean	null	Checks if a date is selected.
onPrevButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handles previous button click event.
onNextButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handles next button click event.
switchToMonthView	(event: MouseEvent<HTMLButtonElement>) => void	null	Switches to month view.
switchToYearView	(event: MouseEvent<HTMLButtonElement>) => void	null	Switches to year view.
onDateSelect	(event: KeyboardEvent<HTMLSpanElement> \| MouseEvent<HTMLSpanElement, MouseEvent>, dateMeta: useDatePickerDateMeta) => void	null	Handles date selection.
onMonthSelect	(event: KeyboardEvent<HTMLSpanElement> \| MouseEvent<HTMLSpanElement, MouseEvent>, index: number) => void	null	Handles month selection.
onYearSelect	(event: KeyboardEvent<HTMLSpanElement> \| MouseEvent<HTMLSpanElement, MouseEvent>, year: { value: number }) => void	null	Handles year selection.
onDateCellKeydown	(event: KeyboardEvent<HTMLSpanElement>, date: useDatePickerDateMeta, groupIndex: number) => void	null	Handles date cell keydown event.
onMonthCellKeydown	(event: KeyboardEvent<HTMLSpanElement>, index: number) => void	null	Handles month cell keydown event.
onYearCellKeydown	(event: KeyboardEvent<HTMLSpanElement>, year: { value: number }) => void	null	Handles year cell keydown event.
onButtonClick	() => void	null	Handles button click event.
onTimePickerElementMouseDown	(event: MouseEvent<HTMLButtonElement>, type: number, direction: number) => void	null	Handles time picker element mouse down event.
onTimePickerElementMouseUp	(event: KeyboardEvent<HTMLButtonElement> \| MouseEvent<HTMLButtonElement, MouseEvent>) => void	null	Handles time picker element mouse up event.
onTimePickerElementMouseLeave	() => void	null	Handles time picker element mouse leave event.
onContainerButtonKeydown	(event: KeyboardEvent<HTMLButtonElement>) => void	null	Handles container button keydown event.
onTimePickerElementKeyDown	(event: KeyboardEvent<HTMLButtonElement>, type: number, direction: number) => void	null	Handles time picker element keydown event.
onTimePickerElementKeyUp	(event: KeyboardEvent<HTMLButtonElement>) => void	null	Handles time picker element keyup event.
toggleAMPM	(event: MouseEvent<HTMLButtonElement>) => void	null	Toggles AM/PM.
onTodayButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handles today button click event.
onClearButtonClick	(event: MouseEvent<HTMLButtonElement>) => void	null	Handles clear button click event.
onClearClick	() => void	null	Handles clear click event.
onInput	(event: ChangeEvent<HTMLInputElement>) => void	null	Handles input event.
onInputClick	() => void	null	Handles input click event.
onInputKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	null	Handles input keydown event.
onInputFocus	(event: FocusEvent<HTMLInputElement>) => void	null	Handles input focus event.
onInputBlur	(event: FocusEvent<HTMLInputElement>) => void	null	Handles input blur event.
onOverlayEnter	() => void	null	Handles overlay enter event.
parseValue	(text: string) => string \| string[] \| Date \| Date[]	null	Parses a string value to date picker value.
isDateEquals	(value: string \| Date, dateMeta: useDatePickerDateMeta) => boolean	null	Checks if two dates are equal.
isMonthSelected	(month: number) => boolean	null	Checks if a month is selected.
isYearSelected	(year: number) => boolean	null	Checks if a year is selected.
isInHoverRange	(dateMeta: useDatePickerDateMeta) => boolean	null	Checks if a date is in the hover range during range selection.
onDateCellMouseEnter	(dateMeta: useDatePickerDateMeta) => void	null	Handles date cell mouse enter event.

Events#

useDatePickerValueChangeEvent

Event fired when the datepicker's value changes.

name	type	description
value	string \| string[] \| Date \| Date[]	The value of the datepicker.

useDatePickerDateSelectEvent

Event fired when a date is selected.

name	type	description
value	string \| string[] \| Date \| Date[]	The selected date value.

useDatePickerMonthChangeEvent

Event fired when the month changes.

name	type	description
month	number	The month number (1-12).
year	number	The year.

useDatePickerYearChangeEvent

Event fired when the year changes.

name	type	description
month	number	The month number (0-11).
year	number	The year.

useDatePickerTodayButtonClickEvent

Event fired when the today button is clicked.

name	type	description
originalEvent	MouseEvent<HTMLButtonElement>	Original browser event.
date	Date	The current date.

useDatePickerBlurEvent

Event fired when input blur occurs.

name	type	description
originalEvent	FocusEvent<HTMLInputElement>	Original browser event.
value	string	The input value.

Types#

Instance

Instance of useDatePicker headless.

values
HeadlessInstance<useDatePickerProps, useDatePickerState, useDatePickerExposes>

On this page

DatePicker
Props
State
Exposes
Events
Interfaces
Types
DatePickerInput
Props
Exposes
Interfaces
Types
DatePickerInputIconContainer
Props
Exposes
Interfaces
Types
DatePickerDropdownIcon
Props
Interfaces
Types
DatePickerDropdown
Props
State
Exposes
Events
Interfaces
Types
DatePickerClearIcon
Props
Exposes
Interfaces
Types
DatePickerPortal
Props
Exposes
Interfaces
Types
DatePickerPanel
Props
Exposes
Interfaces
Types
DatePickerContainer
Props
Exposes
Interfaces
Types
DatePickerCalendar
Props
Exposes
Interfaces
Types
DatePickerHeader
Props
Exposes
Interfaces
Types
DatePickerPrev
Props
Exposes
Interfaces
Types
DatePickerTitle
Props
Exposes
Interfaces
Types
DatePickerSelectMonth
Props
Exposes
Interfaces
Types
DatePickerSelectYear
Props
Exposes
Interfaces
Types
DatePickerDecade
Props
Exposes
Interfaces
Types
DatePickerNext
Props
Exposes
Interfaces
Types
DatePickerTable
Props
Exposes
Interfaces
Types
DatePickerTableHead
Props
Exposes
Interfaces
Types
DatePickerTableHeadRow
Props
Exposes
Interfaces
Types
DatePickerTableHeadCell
Props
Exposes
Interfaces
Types
DatePickerTableHeadWeekCell
Props
Exposes
Interfaces
Types
DatePickerTableBody
Props
Exposes
Interfaces
Types
DatePickerTableBodyRow
Props
Exposes
Interfaces
Types
DatePickerTableBodyCell
Props
Exposes
Interfaces
Types
DatePickerTableBodyWeekCell
Props
Exposes
Interfaces
Types
DatePickerFooter
Props
Exposes
Interfaces
Types
DatePickerButtonbar
Props
Exposes
Interfaces
Types
DatePickerToday
Props
Exposes
Interfaces
Types
DatePickerClear
Props
Exposes
Interfaces
Types
DatePickerTime
Props
Exposes
Interfaces
Types
DatePickerPicker
Props
Exposes
Interfaces
Types
DatePickerIncrement
Props
Exposes
Interfaces
Types
DatePickerHour
Props
Exposes
Interfaces
Types
DatePickerDecrement
Props
Exposes
Interfaces
Types
DatePickerSeparatorContainer
Props
Exposes
Interfaces
Types
DatePickerSeparator
Props
Exposes
Interfaces
Types
DatePickerMinute
Props
Exposes
Interfaces
Types
DatePickerSecond
Props
Exposes
Interfaces
Types
DatePickerAmPm
Props
Exposes
Interfaces
Types
useDatePicker
Props
State
Exposes
Events
Types