DateRangePicker

ReactProps

Props

API reference for DateRangePicker. For usage examples, see the React tab.

DateRangePicker

Name	Type	Default
allowsNonContiguousRanges	boolean	—
When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
children	ChildrenOrFunction<DateRangePickerRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
defaultFocusedValue	DateValue | null	—
The date that is focused when the calendar first mounts (uncontrolled).
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
description	string	—
Description for the date range picker
endName	string	—
The name of the end date input element, used when submitting an HTML form. See MDN (opens in new tab).
firstDayOfWeek	"fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed"	—
The day that starts the week.
focusedValue	DateValue | null	—
Controls the currently focused date within the calendar.
granularity	Granularity	—
Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
hideOutsideDays	boolean	false
Hides days that belong to the previous or next month. The cells stay in the grid so week columns remain aligned.
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.
isDateHighlighted	((date: T) => boolean)	—
isDateUnavailable	((date: DateValue, anchorDate: CalendarDate | null) => 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	—
Makes the date range picker read-only when true
isRequired	boolean	—
Whether user input is required on the input before form submission.
label	string	—
Label for the date range picker
maxValue	DateValue | null	—
The maximum allowed date that a user may select.
minValue	DateValue | null	—
The minimum allowed date that a user may select.
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 | null	—
A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
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.
size	"lg" | "md" | "sm"	"md"
Controls field height, padding, and segment typography.
startName	string	—
The name of the start date input element, used when submitting an HTML form. See MDN (opens in new tab).
visibleDuration	DateDuration	{ months: 1 }
The amount of days that will be displayed at once. This affects how pagination works.
compactDeprecated	boolean	—
Use size="md" instead. This prop is a no-op.

Accessibility (5)(5 props)

Advanced (9)(9 props)

Events (71)(71 props)

Forms (6)(6 props)

Styling (2)(2 props)

DateRangeField.Root

Name	Type	Default
allowsNonContiguousRanges	boolean	—
When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
children	ChildrenOrFunction<DateRangePickerRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
defaultFocusedValue	DateValue | null	—
The date that is focused when the calendar first mounts (uncontrolled).
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
description	string	—
Description for the date range picker
endName	string	—
The name of the end date input element, used when submitting an HTML form. See MDN (opens in new tab).
firstDayOfWeek	"fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed"	—
The day that starts the week.
focusedValue	DateValue | null	—
Controls the currently focused date within the calendar.
granularity	Granularity	—
Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
hideOutsideDays	boolean	false
Hides days that belong to the previous or next month. The cells stay in the grid so week columns remain aligned.
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.
isDateHighlighted	((date: T) => boolean)	—
isDateUnavailable	((date: DateValue, anchorDate: CalendarDate | null) => 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	—
Makes the date range picker read-only when true
isRequired	boolean	—
Whether user input is required on the input before form submission.
label	string	—
Label for the date range picker
maxValue	DateValue | null	—
The maximum allowed date that a user may select.
minValue	DateValue | null	—
The minimum allowed date that a user may select.
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 | null	—
A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.
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.
size	"lg" | "md" | "sm"	"md"
Controls field height, padding, and segment typography.
startName	string	—
The name of the start date input element, used when submitting an HTML form. See MDN (opens in new tab).
visibleDuration	DateDuration	{ months: 1 }
The amount of days that will be displayed at once. This affects how pagination works.
compactDeprecated	boolean	—
Use size="md" instead. This prop is a no-op.

Accessibility (5)(5 props)

Advanced (9)(9 props)

Events (71)(71 props)

Forms (6)(6 props)

Styling (2)(2 props)

DateRangeField.Description

Name	Type	Default
about	string	—
accessKey	string	—
autoSave	string	—
children	ReactNode	—
color	string	—
content	string	—
contextMenu	string	—
dangerouslySetInnerHTML	{ __html: string | TrustedHTML; }	—
datatype	string	—
defaultChecked	boolean	—
elementType	string	—
exportparts	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)
inlist	any	—
inputMode	"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"	—
Hints at the type of data that might be entered by the user while editing the element or its contents See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)
isInvalid	boolean	—
itemID	string	—
itemProp	string	—
itemRef	string	—
itemScope	boolean	—
itemType	string	—
part	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)
prefix	string	—
property	string	—
radioGroup	string	—
rel	string	—
resource	string	—
results	number	—
rev	string	—
security	string	—
title	string	—
typeof	string	—
unselectable	"off" | "on"	—
vocab	string	—

Accessibility (55)(55 props)

Advanced (22)(22 props)

Events (168)(168 props)

Forms (1)(1 prop)

Styling (2)(2 props)

DateRangeField.FieldError

Name	Type	Default
children	ChildrenOrFunction<FieldErrorRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
elementType	string	'span'
The HTML element type to render. Defaults to 'span'. Set to 'div' when using block-level children (e.g. <ul>) to avoid invalid HTML.

Accessibility (1)(1 prop)

Advanced (7)(7 props)

Events (64)(64 props)

Styling (2)(2 props)

DateRangeField.Group

Name	Type	Default
about	string	—
accessKey	string	—
autoSave	string	—
children	ChildrenOrFunction<GroupRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
color	string	—
content	string	—
contextMenu	string	—
dangerouslySetInnerHTML	{ __html: string | TrustedHTML; }	—
datatype	string	—
defaultChecked	boolean	—
exportparts	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)
inlist	any	—
inputMode	"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"	—
Hints at the type of data that might be entered by the user while editing the element or its contents See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)
isDisabled	boolean	—
Whether the group is disabled.
isInvalid	boolean	—
Whether the group is invalid.
isReadOnly	boolean	—
Whether the group is read only.
itemID	string	—
itemProp	string	—
itemRef	string	—
itemScope	boolean	—
itemType	string	—
part	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)
prefix	string	—
property	string	—
radioGroup	string	—
rel	string	—
resource	string	—
results	number	—
rev	string	—
security	string	—
title	string	—
typeof	string	—
unselectable	"off" | "on"	—
vocab	string	—

Accessibility (55)(55 props)

Advanced (22)(22 props)

Events (171)(171 props)

Forms (1)(1 prop)

Styling (2)(2 props)

DateRangeField.InputGroup

Name	Type	Default
about	string	—
accessKey	string	—
autoSave	string	—
children	ChildrenOrFunction<GroupRenderProps>	—
The children of the component. A function may be provided to alter the children based on component state.
color	string	—
content	string	—
contextMenu	string	—
dangerouslySetInnerHTML	{ __html: string | TrustedHTML; }	—
datatype	string	—
defaultChecked	boolean	—
exportparts	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)
inlist	any	—
inputMode	"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"	—
Hints at the type of data that might be entered by the user while editing the element or its contents See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)
itemID	string	—
itemProp	string	—
itemRef	string	—
itemScope	boolean	—
itemType	string	—
part	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)
prefix	string	—
property	string	—
radioGroup	string	—
rel	string	—
resource	string	—
results	number	—
rev	string	—
security	string	—
size	"lg" | "md" | "sm"	md
Controls field height, padding, and segment typography.
title	string	—
typeof	string	—
unselectable	"off" | "on"	—
vocab	string	—
compactDeprecated	boolean	—
Use size="md" instead. This prop is a no-op.

Accessibility (55)(55 props)

Advanced (22)(22 props)

Events (171)(171 props)

Forms (1)(1 prop)

Styling (2)(2 props)

DateRangeField.Label

Name	Type	Default
about	string	—
accessKey	string	—
autoSave	string	—
children	ReactNode	—
color	string	—
content	string	—
contextMenu	string	—
dangerouslySetInnerHTML	{ __html: string | TrustedHTML; }	—
datatype	string	—
defaultChecked	boolean	—
elementType	string	—
exportparts	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts (opens in new tab)
htmlFor	string	—
inlist	any	—
inputMode	"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"	—
Hints at the type of data that might be entered by the user while editing the element or its contents See: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute (opens in new tab)
isDisabled	boolean	—
Whether the Label is on a disabled input or element.
isRequired	boolean	—
Whether the Label is on a required input or element.
itemID	string	—
itemProp	string	—
itemRef	string	—
itemScope	boolean	—
itemType	string	—
part	string	—
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part (opens in new tab)
prefix	string	—
property	string	—
radioGroup	string	—
rel	string	—
resource	string	—
results	number	—
rev	string	—
security	string	—
title	string	—
typeof	string	—
unselectable	"off" | "on"	—
vocab	string	—

Accessibility (55)(55 props)

Advanced (22)(22 props)

Events (168)(168 props)

Forms (2)(2 props)

Styling (2)(2 props)

DateRangeField.Popover

Name	Type	Default
children* (required)	ReactNode	—
The content rendered inside the popover.
arrowBoundaryOffset	number	0
The minimum distance the arrow's edge should be from the edge of the overlay element.
arrowRef	RefObject<Element | null>	—
A ref for the popover arrow element.
boundaryElement	Element	document.body
Element that that serves as the positioning boundary.
containerPadding	number	12
The placement padding that should be applied between the element and its surrounding container.
crossOffset	number	0
The additional offset applied along the cross axis between the element and its anchor element.
defaultOpen	boolean	—
Whether the overlay is open by default (uncontrolled).
getTargetRect	((target: Element) => DOMRect | null)	target.getBoundingClientRect()
Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection.
isEntering	boolean	—
Whether the popover is currently performing an entry animation.
isExiting	boolean	—
Whether the popover is currently performing an exit animation.
isKeyboardDismissDisabled	boolean	false
Whether pressing the escape key to close the popover should be disabled. Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.
isNonModal	boolean	—
Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
isOpen	boolean	—
Whether the overlay is open by default (controlled).
maxHeight	number	—
The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
offset	number	8
The additional offset applied along the main axis between the element and its anchor element.
placement	Placements	—
The placement of the element with respect to its anchor element.
scrollRef	RefObject<Element | null>	overlayRef
A ref for the scrollable region within the overlay.
shouldFlip	boolean	true
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
shouldSkipAnimation	boolean	—
Whether the popover should appear and disappear without an entry or exit animation. This is used by components such as PreviewTrigger to skip animations when quickly swapping between overlays.
shouldUpdatePosition	boolean	true
Whether the overlay should update its position automatically.
trigger	string	—
The name of the component that triggered the popover. This is reflected on the element as the data-trigger attribute, and can be used to provide specific styles for the popover depending on which element triggered it.
triggerRef	RefObject<Element | null>	—
The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.

Accessibility (4)(4 props)

Advanced (8)(8 props)

Events (68)(68 props)

Styling (2)(2 props)

DateRangeField.RangeCalendar

Name	Type	Default
allowsNonContiguousRanges	boolean	—
When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
defaultFocusedValue	DateValue | null	—
The date that is focused when the calendar first mounts (uncontrolled).
firstDayOfWeek	"fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed"	—
The day that starts the week.
focusedValue	DateValue | null	—
Controls the currently focused date within the calendar.
hideOutsideDays	boolean	false
Hides days that belong to the previous or next month. The cells stay in the grid so week columns remain aligned.
isDateHighlighted	((date: T) => boolean)	—
pageBehavior	PageBehavior	visible
Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
visibleDuration	DateDuration	{ months: 1 }
The amount of days that will be displayed at once. This affects how pagination works.