DateRangePickerDay API

API reference docs for the React DateRangePickerDay component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { DateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay';
// or
import { DateRangePickerDay } from '@mui/x-date-pickers-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
day*	object	-	The date to show.
onDaySelect*	func	-	Callback fired when the day is selected. Signature:`function(day: PickerValidDate) => void` `day` The day to select.
action	func \| { current?: { focusVisible: func } }	-	A ref for imperative actions. It currently only supports `focusVisible()` action.
centerRipple	bool	false	If `true`, the ripples are centered. They won't start at the cursor interaction position.
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
disabled	bool	false	If `true`, the day is disabled.
disableHighlightToday	bool	false	If `true`, today's day is not highlighted.
disableRipple	bool	false	If `true`, the ripple effect is disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
disableTouchRipple	bool	false	If `true`, the touch ripple effect is disabled.
draggable	bool	false	If `true`, the day can be dragged to change the current date range.
focusRipple	bool	false	If `true`, the base button will have a keyboard focus ripple.
focusVisibleClassName	string	-	This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It's a polyfill for the CSS :focus-visible selector. The rationale for using this feature is explained here. A polyfill can be used to apply a `focus-visible` class to other components if needed.
isAnimating	bool	false	If `true`, the day is being animated.
isDayFillerCell	bool	false	If `true`, the day is a filler day (its content is hidden).
isEndOfHighlighting	bool	-	Set to `true` if the `day` is the end of a highlighted date range.
isEndOfPreviewing	bool	-	Set to `true` if the `day` is the end of a previewing date range.
isFirstVisibleCell	bool	false	If `true`, the day is the first visible cell of the month.
isHighlighting	bool	-	Set to `true` if the `day` is in a highlighted date range.
isLastVisibleCell	bool	false	If `true`, the day is the last visible cell of the month.
isPreviewing	bool	-	Set to `true` if the `day` is in a preview date range.
isStartOfHighlighting	bool	-	Set to `true` if the `day` is the start of a highlighted date range.
isStartOfPreviewing	bool	-	Set to `true` if the `day` is the start of a previewing date range.
isVisuallySelected	bool	-	Indicates if the day should be visually selected.
nativeButton	bool	-	Whether the custom component is expected to render a native `<button>` element when passing a React component to the `component` or `slots` prop.
onBlur	func	() => {}	Callback fired when the component is blurred. Signature:`function(event: React.FocusEvent<HTMLButtonElement>, day: PickerValidDate) => void` `event` The event object. `day` The day.
onClick	func	() => {}	Callback fired when the component is clicked. Signature:`function(event: MuiEvent<React.MouseEvent<HTMLButtonElement>>) => void` `event` The event object.
onFocus	func	() => {}	Callback fired when the component is focused. Signature:`function(event: React.FocusEvent<HTMLButtonElement>, day: PickerValidDate) => void` `event` The event object. `day` The day.
onFocusVisible	func	-	Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too.
onKeyDown	func	() => {}	Callback fired when a key is pressed. Signature:`function(event: React.KeyboardEvent<HTMLButtonElement>, day: PickerValidDate) => void` `event` The event object. `day` The day.
onMouseDown	func	() => {}	Callback fired when the mouse button is pressed. Signature:`function(event: React.MouseEvent<HTMLButtonElement>) => void` `event` The event object.
onMouseEnter	func	() => {}	Callback fired when the mouse enters the component. Signature:`function(event: React.MouseEvent<HTMLButtonElement>, day: PickerValidDate) => void` `event` The event object. `day` The day.
outsideCurrentMonth	bool	false	If `true`, the day is outside the current month.
selected	bool	false	If `true`, renders as selected.
showDaysOutsideCurrentMonth	bool	false	If `true`, days outside the current month are rendered: - if `fixedWeekNumber` is defined, renders days to have the weeks requested. - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month. - ignored if `calendars` equals more than `1` on range pickers.
sx	Array<func \| object \| bool> \| func \| object	-	The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
today	bool	false	If `true`, today's day is highlighted.
TouchRippleProps	object	-	Props applied to the `TouchRipple` element.
touchRippleRef	func \| { current?: { pulsate: func, start: func, stop: func } }	-	A ref that points to the `TouchRipple` element.

The ref is forwarded to the root element.

Theme default props

You can use MuiDateRangePickerDay to change the default props of this component with the theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.Mui-disabled		State class applied to the root element if `isDayDisabled=true`.
.Mui-selected		State class applied to the root element if `isDaySelected=true`.
.MuiDateRangePickerDay-dayOutsideMonth	dayOutsideMonth	Styles applied to the root element if `isDayOutsideMonth=true` and `showDaysOutsideCurrentMonth=true`.
.MuiDateRangePickerDay-draggable	draggable	Styles applied to the root element if `isDayDraggable=true`.
.MuiDateRangePickerDay-endOfMonth	endOfMonth	Styles applied to the root element if `isDayEndOfMonth=true`.
.MuiDateRangePickerDay-endOfWeek	endOfWeek	Styles applied to the root element if `isDayEndOfWeek=true`.
.MuiDateRangePickerDay-fillerCell	fillerCell	Styles applied to the root element if `isDayOutsideMonth=true` and `showDaysOutsideCurrentMonth=false`.
.MuiDateRangePickerDay-firstVisibleCell	firstVisibleCell	Styles applied to the root element if `isDayFirstVisibleCell=true`.
.MuiDateRangePickerDay-insidePreviewing	insidePreviewing	Styles applied to the root element if `isDayInsidePreview=true`.
.MuiDateRangePickerDay-insideSelection	insideSelection	Styles applied to the root element if `isDayInsideSelection=true`.
.MuiDateRangePickerDay-lastVisibleCell	lastVisibleCell	Styles applied to the root element if `isDayLastVisibleCell=true`.
.MuiDateRangePickerDay-previewed	previewed	Styles applied to the root element if `isDayPreviewed=true`.
.MuiDateRangePickerDay-previewEnd	previewEnd	Styles applied to the root element if `isDayPreviewEnd=true`.
.MuiDateRangePickerDay-previewStart	previewStart	Styles applied to the root element if `isDayPreviewStart=true`.
.MuiDateRangePickerDay-root	root	Styles applied to the root element.
.MuiDateRangePickerDay-selectionEnd	selectionEnd	Styles applied to the root element if `isDaySelectionEnd=true`.
.MuiDateRangePickerDay-selectionStart	selectionStart	Styles applied to the root element if `isDaySelectionStart=true`.
.MuiDateRangePickerDay-startOfMonth	startOfMonth	Styles applied to the root element if `isDayStartOfMonth=true`.
.MuiDateRangePickerDay-startOfWeek	startOfWeek	Styles applied to the root element if `isDayStartOfWeek=true`.
.MuiDateRangePickerDay-today	today	Styles applied to the root element if `disableHighlightToday=false` and `isDayCurrent=true`.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.