DatePickerModal

Allow users to select a Date and Time value.

Props

DatePickerModal

PropTypeDefaultDescription
onCloserequired() => voidCallback invoked to close the modal.
allowPinchZoombooleanfalse.Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
autoFocusbooleantrueIf true, the modal will autofocus the first enabled and interactive element within the ModalContent
blockScrollOnMountbooleantrueIf true, scrolling will be disabled on the body when the modal opens.
childrenstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>
closeOnEscbooleantrueIf true, the modal will close when the Esc key is pressed
closeOnOverlayClickbooleantrueIf true, the modal will close when the overlay is clicked
closeOnSelectboolean
contentPropsModalContentPropsProps for the modal content
createCalendar(name: string) => Calendar
defaultOpenbooleanWhether the overlay is open by default (uncontrolled).
defaultValueDateValue
descriptionstring | 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.
errorMessagestring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ((v: ValidationResult) => ReactNode)An error message for the field.
finalFocusRefRefObject<FocusableElement>The ref of element to receive focus when the modal closes.
footerstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>The modal footer
footerPropsModalFooterPropsProps for the modal footer
granularityGranularityDetermines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.
headerPropsModalHeaderPropsProps for the modal header
hideCloseButtonbooleanHide the close button
hideOverlaybooleanHide the overlay
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.
idstringThe id of the modal
initialFocusRefRefObject<FocusableElement>The ref of element to receive focus when the modal opens.
isCenteredbooleanfalseIf true, the modal will be centered on screen.
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.
labelstring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>The content to display as the label.
localestring
lockFocusAcrossFramesbooleanfalseEnables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe
maxValueDateValue
minValueDateValue
motionPresetMotionPresetscaleThe transition that should be used for the modal
onBlur(e: FocusEvent<Element, Element>) => voidHandler that is called when the element loses focus.
onChange(value: DateValue | null) => void
onCloseComplete() => voidFires when all exiting nodes have completed animating out
onEsc() => voidCallback fired when the escape key is pressed and focus is within modal
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.
onOverlayClick() => voidCallback fired when the overlay is clicked.
onSubmit(date: DateValue | null) => void
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.
portalPropsPick< PortalProps, "appendToParentPortal" | "containerRef" >Props to be forwarded to the portal component
preserveScrollBarGapbooleantrueIf true, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens
returnFocusOnClosebooleantrueIf true, the modal will return focus to the element that triggered it when it closes.
scrollBehaviorScrollBehavioroutsideWhere scroll behavior should originate. - If set to inside, scroll only occurs within the ModalBody. - If set to outside, the entire ModalContent will scroll within the viewport.
shouldForceLeadingZerosbooleanWhether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
timeZonestring
titlestring | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>The modal title
trapFocusbooleantrueIf false, focus lock will be disabled completely. This is useful in situations where you still need to interact with other surrounding elements. ๐ŸšจWarning: We don't recommend doing this because it hurts the accessibility of the modal, based on WAI-ARIA specifications.
useInertbooleantrueA11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
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?