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.

Demos:

DateRangePicker

API:

DateRangePickerDay API

Props

Props of the native component are also available.

Name	Type	Default	Description
day*	{}	-	The date to show.
onDaySelect*	func	-	Callback fired when the day is selected. Signature:`function(day: PickerValidDate) => void` `day` The day to select.
classes	Partial	-	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.
draggable	bool	false	If `true`, the day can be dragged to change the current date range.
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.
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.
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.
today	bool	false	If `true`, today's day is highlighted.

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.