DatePicker

Allow users to select a Date and Time value.

Props#

DatePickerStatic Props#

Prop	Type	Default	Description
autoFocus	`boolean`		Whether the element should receive focus on render.
children	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((args_0: DatePickerState) => ReactNode)`
closeOnSelect	`boolean`
createCalendar	`(name: string) => Calendar`
defaultOpen	`boolean`		Whether the overlay is open by default (uncontrolled).
defaultValue	`DateValue`
description	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`		A description for the field. Provides a hint such as specific requirements for what to choose.
errorMessage	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((v: ValidationResult) => ReactNode)`		An error message for the field.
granularity	`Granularity`		Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.
hideTimeZone	`boolean`	`false`	Whether to hide the time zone abbreviation.
hourCycle	`12 \| 24`		Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
isDateUnavailable	`(date: DateValue) => boolean`		Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDisabled	`boolean`		Whether the input is disabled.
isInvalid	`boolean`		Whether the input value is invalid.
isOpen	`boolean`		Whether the overlay is open by default (controlled).
isReadOnly	`boolean`		Whether the input can be selected but not changed by the user.
isRequired	`boolean`		Whether user input is required on the input before form submission.
label	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`		The content to display as the label.
locale	`string`
maxValue	`DateValue`
minValue	`DateValue`
onBlur	`(e: FocusEvent<Element, Element>) => void`		Handler that is called when the element loses focus.
onChange	`(value: DateValue \| null) => void`
onFocus	`(e: FocusEvent<Element, Element>) => void`		Handler that is called when the element receives focus.
onFocusChange	`(isFocused: boolean) => void`		Handler that is called when the element's focus status changes.
onKeyDown	`(e: KeyboardEvent) => void`		Handler that is called when a key is pressed.
onKeyUp	`(e: KeyboardEvent) => void`		Handler that is called when a key is released.
onOpenChange	`(isOpen: boolean) => void`		Handler that is called when the overlay's open state changes.
pageBehavior	`PageBehavior`	`visible`	Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
placeholderValue	`DateValue`		A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
shouldForceLeadingZeros	`boolean`		Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
timeZone	`string`
validate	`( value: DateValue, ) => true \| ValidationError \| null \| undefined`		A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
validationBehavior	`"aria" \| "native"`	`'aria'`	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
validationState	`ValidationState`
value	`DateValue`

Was this helpful?