DatePicker

Allow users to select a Date and Time value.

Props

DatePickerStatic Props

PropTypeDefaultDescription
autoFocusbooleanWhether the element should receive focus on render.
childrentype ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode | ((args_0: DatePickerState) => ReactNode)
closeOnSelectboolean
createCalendar(name: string) => Calendar
defaultOpenbooleanWhether the overlay is open by default (uncontrolled).
defaultValueDateValue
descriptiontype ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNodeA description for the field. Provides a hint such as specific requirements for what to choose.
errorMessagetype ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode | ((v: ValidationResult) => ReactNode)An error message for the field.
granularityGranularityDetermines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.
hideTimeZonebooleanfalseWhether to hide the time zone abbreviation.
hourCycle12 | 24Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.
isDateUnavailable(date: DateValue) => booleanCallback that is called for each date of the calendar. If it returns true, then the date is unavailable.
isDisabledbooleanWhether the input is disabled.
isInvalidbooleanWhether the input value is invalid.
isOpenbooleanWhether the overlay is open by default (controlled).
isReadOnlybooleanWhether the input can be selected but not changed by the user.
isRequiredbooleanWhether user input is required on the input before form submission.
labeltype ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNodeThe content to display as the label.
localestring
maxValueDateValue
minValueDateValue
onBlur(e: FocusEvent<Element, Element>) => voidHandler that is called when the element loses focus.
onChange(value: DateValue | null) => void
onFocus(e: FocusEvent<Element, Element>) => voidHandler that is called when the element receives focus.
onFocusChange(isFocused: boolean) => voidHandler that is called when the element's focus status changes.
onKeyDown(e: KeyboardEvent) => voidHandler that is called when a key is pressed.
onKeyUp(e: KeyboardEvent) => voidHandler that is called when a key is released.
onOpenChange(isOpen: boolean) => voidHandler that is called when the overlay's open state changes.
pageBehaviorPageBehaviorvisibleControls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
placeholderValueDateValueA placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
shouldForceLeadingZerosbooleanWhether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
timeZonestring
validate( value: DateValue, ) => true | ValidationError | null | undefinedA 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.
validationStateValidationState
valueDateValue

Was this helpful?