DateRangePickerDayAPI

React DateRangePickerDay 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

导入

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

通过阅读此关于最小化 bundle size 的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
day*	object	-	要显示的日期。
isEndOfHighlighting*	bool	-	如果 `day` 是高亮日期范围的结束日期，则设置为 `true`。
isEndOfPreviewing*	bool	-	如果 `day` 是预览日期范围的结束日期，则设置为 `true`。
isFirstVisibleCell*	bool	-	如果为 `true`，则 day 是月份的第一个可见单元格。取决于 `showDaysOutsideCurrentMonth`，可能是当月的第一天或当周的第一天。
isHighlighting*	bool	-	如果 `day` 在高亮日期范围内，则设置为 `true`。
isLastVisibleCell*	bool	-	如果为 `true`，则 day 是月份的最后一个可见单元格。取决于 `showDaysOutsideCurrentMonth`，可能是当月的最后一天或当周的最后一天。
isPreviewing*	bool	-	如果 `day` 在预览日期范围内，则设置为 `true`。
isStartOfHighlighting*	bool	-	如果 `day` 是高亮日期范围的开始日期，则设置为 `true`。
isStartOfPreviewing*	bool	-	如果 `day` 是预览日期范围的开始日期，则设置为 `true`。
outsideCurrentMonth*	bool	-	如果为 `true`，则 day 在月份之外，将被隐藏。
action	func \| { current?: { focusVisible: func } }	-	用于命令式操作的 ref。当前仅支持 `focusVisible()` 操作。
centerRipple	bool	false	如果为 `true`，则涟漪居中。它们不会从光标交互位置开始。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参见下方的 CSS 类 API。
disabled	bool	false	如果为 `true`，则渲染为禁用状态。
disableHighlightToday	bool	false	如果为 `true`，则今天的日期在渲染时不会用圆圈高亮显示。
disableMargin	bool	false	如果为 `true`，则日期在渲染时没有外边距。用于显示链接的日期范围很有用。
disableRipple	bool	false	如果为 `true`，则禁用涟漪效果。 ⚠️ 如果没有涟漪，则默认情况下没有 :focus-visible 的样式。请务必通过使用 `.Mui-focusVisible` 类应用单独的样式来突出显示元素。
disableTouchRipple	bool	false	如果为 `true`，则禁用触摸涟漪效果。
draggable	bool	false	如果为 `true`，则可以拖动日期以更改当前日期范围。
focusRipple	bool	false	如果为 `true`，则基本按钮将具有键盘焦点涟漪。
focusVisibleClassName	string	-	此 prop 可以帮助识别哪个元素具有键盘焦点。当元素通过键盘交互获得焦点时，将应用类名。它是 CSS :focus-visible 选择器的 polyfill。使用此功能的理由在此处进行了解释。如果需要，可以使用 polyfill 将 `focus-visible` 类应用于其他组件。
isVisuallySelected	bool	-	指示日期是否应在视觉上被选中。
onFocusVisible	func	-	当组件通过键盘获得焦点时触发的回调。我们也会触发 `onFocus` 回调。
selected	bool	false	如果为 `true`，则渲染为选中状态。
showDaysOutsideCurrentMonth	bool	false	如果为 `true`，则渲染当前月份之外的日期 - 如果定义了 `fixedWeekNumber`，则渲染日期以具有请求的周数。 - 如果未定义 `fixedWeekNumber`，则渲染日期以填充当前月份的第一周和最后一周。 - 如果范围选择器上的 `calendars` 等于多个 `1`，则忽略。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参见 `sx` 页面。
today	bool	false	如果为 `true`，则渲染为今天的日期。
TouchRippleProps	object	-	应用于 `TouchRipple` 元素的 Props。
touchRippleRef	func \| { current?: { pulsate: func, start: func, stop: func } }	-	指向 `TouchRipple` 元素的 ref。

ref 被转发到根元素。

CSS 类

这些类名对于使用 CSS 设置样式很有用。当触发特定状态时，它们将应用于组件的插槽。

类名	规则名称	描述
.MuiDateRangePickerDay-day	day	应用于日期元素的样式。
.MuiDateRangePickerDay-dayInsideRangeInterval	dayInsideRangeInterval	如果 `selected=false` 且 `isHighlighting=true`，则应用于日期元素的样式。
.MuiDateRangePickerDay-dayOutsideRangeInterval	dayOutsideRangeInterval	如果 `isHighlighting=false`，则应用于日期元素的样式。
.MuiDateRangePickerDay-endOfMonth	endOfMonth	如果 `day` 是月末，则应用于根元素的样式。
.MuiDateRangePickerDay-firstVisibleCell	firstVisibleCell	如果 `day` 是月份的第一个可见单元格，则应用于根元素的样式。
.MuiDateRangePickerDay-hiddenDayFiller	hiddenDayFiller	如果它是用于填充星期的空单元格，则应用于根元素的样式。
.MuiDateRangePickerDay-lastVisibleCell	lastVisibleCell	如果 `day` 是月份的最后一个可见单元格，则应用于根元素的样式。
.MuiDateRangePickerDay-notSelectedDate	notSelectedDate	如果 `selected=false`，则应用于日期元素的样式。
.MuiDateRangePickerDay-outsideCurrentMonth	outsideCurrentMonth	如果 `outsideCurrentMonth=true`，则应用于根元素的样式
.MuiDateRangePickerDay-rangeIntervalDayHighlight	rangeIntervalDayHighlight	如果 `isHighlighting=true`，则应用于根元素的样式。
.MuiDateRangePickerDay-rangeIntervalDayHighlightEnd	rangeIntervalDayHighlightEnd	如果 `isEndOfHighlighting=true`，则应用于根元素的样式。
.MuiDateRangePickerDay-rangeIntervalDayHighlightStart	rangeIntervalDayHighlightStart	如果 `isStartOfHighlighting=true`，则应用于根元素的样式。
.MuiDateRangePickerDay-rangeIntervalDayPreview	rangeIntervalDayPreview	如果 `isPreviewing=true`，则应用于根元素的样式。
.MuiDateRangePickerDay-rangeIntervalDayPreviewEnd	rangeIntervalDayPreviewEnd	如果 `isEndOfPreviewing=true`，则应用于根元素的样式。
.MuiDateRangePickerDay-rangeIntervalDayPreviewStart	rangeIntervalDayPreviewStart	如果 `isStartOfPreviewing=true`，则应用于根元素的样式。
.MuiDateRangePickerDay-rangeIntervalPreview	rangeIntervalPreview	应用于预览元素的样式。
.MuiDateRangePickerDay-root	root	应用于根元素的样式。
.MuiDateRangePickerDay-startOfMonth	startOfMonth	如果 `day` 是月初，则应用于根元素的样式。

您可以使用以下自定义选项之一来覆盖组件的样式

使用全局类名。
在自定义主题中使用规则名称作为组件的styleOverrides 属性的一部分。

源代码

如果您在此页面中找不到所需的信息，请考虑查看组件的实现以获取更多详细信息。