DatePickerModal

Allow users to select a Date and Time value.

Props#

DatePickerModal#

Prop	Type	Default	Description
onClose`required`	`() => void`		Callback invoked to close the modal.
allowPinchZoom	`boolean`	`false.`	Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
autoFocus	`boolean`	`true`	If `true`, the modal will autofocus the first enabled and interactive element within the `ModalContent`
blockScrollOnMount	`boolean`	`true`	If `true`, scrolling will be disabled on the `body` when the modal opens.
children	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`
closeOnEsc	`boolean`	`true`	If `true`, the modal will close when the `Esc` key is pressed
closeOnOverlayClick	`boolean`	`true`	If `true`, the modal will close when the overlay is clicked
closeOnSelect	`boolean`
contentProps	`ModalContentProps`		Props for the modal content
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.
finalFocusRef	`RefObject<FocusableElement>`		The `ref` of element to receive focus when the modal closes.
footer	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`		The modal footer
footerProps	`ModalFooterProps`		Props for the modal footer
granularity	`Granularity`		Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.
headerProps	`ModalHeaderProps`		Props for the modal header
hideCloseButton	`boolean`		Hide the close button
hideOverlay	`boolean`		Hide the overlay
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.
id	`string`		The `id` of the modal
initialFocusRef	`RefObject<FocusableElement>`		The `ref` of element to receive focus when the modal opens.
isCentered	`boolean`	`false`	If `true`, the modal will be centered on screen.
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`
lockFocusAcrossFrames	`boolean`	`false`	Enables 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
maxValue	`DateValue`
minValue	`DateValue`
motionPreset	`MotionPreset`	`scale`	The transition that should be used for the modal
onBlur	`(e: FocusEvent<Element, Element>) => void`		Handler that is called when the element loses focus.
onChange	`(value: DateValue \| null) => void`
onCloseComplete	`() => void`		Fires when all exiting nodes have completed animating out
onEsc	`() => void`		Callback fired when the escape key is pressed and focus is within modal
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.
onOverlayClick	`() => void`		Callback fired when the overlay is clicked.
onSubmit	`(date: DateValue \| null) => void`
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.
portalProps	`Pick< PortalProps, "appendToParentPortal" \| "containerRef" >`		Props to be forwarded to the portal component
preserveScrollBarGap	`boolean`	`true`	If `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
returnFocusOnClose	`boolean`	`true`	If `true`, the modal will return focus to the element that triggered it when it closes.
scrollBehavior	`ScrollBehavior`	`outside`	Where 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.
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`
title	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`		The modal title
trapFocus	`boolean`	`true`	If `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.
useInert	`boolean`	`true`	A11y: 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 \| 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?