PickerDay API

API reference docs for the React PickerDay 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 { PickerDay } from '@mui/x-date-pickers/PickerDay';
// or
import { PickerDay } from '@mui/x-date-pickers';
// or
import { PickerDay } from '@mui/x-date-pickers-pro';

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

Demos:

DatePicker

API:

PickerDay 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.
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).
isFirstVisibleCell	bool	false	If `true`, the day is the first visible cell of the month.
isLastVisibleCell	bool	false	If `true`, the day is the last visible cell of the month.
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 MuiPickerDay 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 `disabled=true`.
.Mui-selected		State class applied to the root element if `selected=true`.
.MuiPickerDay-dayOutsideMonth	dayOutsideMonth	Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=true`.
.MuiPickerDay-fillerCell	fillerCell	Styles applied to the root element if `outsideCurrentMonth=true` and `showDaysOutsideCurrentMonth=false`.
.MuiPickerDay-root	root	Styles applied to the root element.
.MuiPickerDay-today	today	Styles applied to the root element if `disableHighlightToday=false` and `today=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.