DateRangePicker

Allow users to select a Date and Time value.

Props#

DateRangePicker Props#

Prop	Type	Default	Description
onChange`required`	`(value?: DateRangeValue \| undefined) => void`
allowsNonContiguousRanges	`boolean`		When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
arrowPadding	`number`	`8`	The padding required to prevent the arrow from reaching the very edge of the popper.
arrowShadowColor	`string`		The `box-shadow` of the popover arrow
arrowSize	`number`		The size of the popover arrow
autoFocus	`boolean`	`true`	If `true`, focus will be transferred to the first interactive element when the popover opens
boundary	`HTMLElement \| "clippingParents" \| "scrollParent"`	`clippingParents`	The boundary area for the popper. Used within the `preventOverflow` modifier
children	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((props: { ... }) => ReactNode)`		The content of the popover. It is usually the `PopoverTrigger`, and `PopoverContent`
closeDelay	`number`	`200`	Delay in milliseconds before the popover closes after a trigger event. Only works when `trigger="hover"`
closeOnBlur	`boolean`	`true`	If `true`, the popover will close when you blur out it by clicking outside or tabbing out
closeOnEsc	`boolean`	`true`	If `true`, the popover will close when you hit the `Esc` key
closeOnSelect	`boolean`
computePositionOnMount	`boolean`		If `true`, the popover will be positioned when it mounts (even if it's not open) Note 🚨: We don't recommend using this in a popover/menu intensive UI or page as it might affect scrolling performance.
createCalendar	`(name: string) => Calendar`
defaultIsOpen	`boolean`		If `true`, the popover will be initially opened.
defaultOpen	`boolean`		Whether the overlay is open by default (uncontrolled).
defaultValue	`RangeValue<DateValue>`		The default value (uncontrolled).
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.
direction	`"ltr" \| "rtl"`	`ltr`	Theme direction `ltr` or `rtl`. Popper's placement will be set accordingly
endName	`string`		The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
errorMessage	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((v: ValidationResult) => ReactNode)`		An error message for the field.
eventListeners	`type ONLY_FOR_FORMAT = \| boolean \| { scroll?: boolean \| undefined resize?: boolean \| undefined }`	`true`	If provided, determines whether the popper will reposition itself on `scroll` and `resize` of the window.
flip	`boolean`	`true`	If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
granularity	`Granularity`		Determines the smallest unit that is displayed in the date picker. By default, this is `"day"` for dates, and `"minute"` for times.
gutter	`number`	`8`	The distance or margin between the reference and popper. It is used internally to create an `offset` modifier. NB: If you define `offset` prop, it'll override the gutter.
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 html `id` attribute of the popover. If not provided, we generate a unique id. This `id` is also used to auto-generate the `aria-labelledby` and `aria-describedby` attributes that points to the `PopoverHeader` and `PopoverBody`
initialFocusRef	`RefObject<{ focus(): void }>`		The `ref` of the element that should receive focus when the popover opens.
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.
isLazy	`boolean`		Performance 🚀: If `true`, the PopoverContent rendering will be deferred until the popover is open.
isOpen	`boolean`		If `true`, the popover will be opened in controlled mode.
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.
lazyBehavior	`LazyMode`	`unmount`	Performance 🚀: The lazy behavior of popover's content when not visible. Only works when `isLazy={true}` - "unmount": The popover's content is always unmounted when not open. - "keepMounted": The popover's content initially unmounted, but stays mounted when popover is open.
locale	`string`
matchWidth	`boolean`	`false`	If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
maxValue	`DateValue`		The maximum allowed date that a user may select.
minValue	`DateValue`		The minimum allowed date that a user may select.
modifiers	`Partial<Modifier<string, any>>[]`		Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
offset	`[number, number]`		The main and cross-axis offset to displace popper element from its reference element.
onBlur	`(e: FocusEvent<Element, Element>) => void`		Handler that is called when the element loses focus.
onClose	`() => void`		Callback fired when the popover closes
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.
onOpen	`() => void`		Callback fired when the popover opens
onOpenChange	`(isOpen: boolean) => void`		Handler that is called when the overlay's open state changes.
openDelay	`number`	`200`	Delay in milliseconds before the popover opens after a trigger event. Only works when `trigger="hover"`
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.
placement	`PlacementWithLogical`	`bottom`	The placement of the popper relative to its reference.
preventOverflow	`boolean`	`true`	If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
returnFocusOnClose	`boolean`	`true`	If `true`, focus will be returned to the element that triggers the popover when it closes
shouldCloseOnSelect	`boolean \| (() => boolean)`	`true`	Determines whether the date picker popover should close automatically when a date is selected.
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.
startName	`string`		The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
strategy	`"fixed" \| "absolute"`	`absolute`	The CSS positioning strategy to use.
timeZone	`string`
trigger	`"click" \| "hover"`	`click`	The interaction that triggers the popover. `hover` - means the popover will open when you hover with mouse or focus with keyboard on the popover trigger `click` - means the popover will open on click or press `Enter` to `Space` on keyboard
validate	`( value: RangeValue<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	`DateRangeValue`

Was this helpful?