PickersDayAPI

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

演示

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

日期日历

导入

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

通过阅读关于最小化捆绑包大小的指南了解差异。

属性

原生组件的属性也可用。

名称	类型	默认值	描述
day*	object	-	要显示的日期。
isFirstVisibleCell*	bool	-	如果为 `true`，则 day 是月份的第一个可见单元格。取决于 `showDaysOutsideCurrentMonth`，可能是月份的第一天或当周的第一天。
isLastVisibleCell*	bool	-	如果为 `true`，则 day 是月份的最后一个可见单元格。取决于 `showDaysOutsideCurrentMonth`，可能是月份的最后一天或当周的最后一天。
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`，则禁用触摸涟漪效果。
focusRipple	bool	false	如果为 `true`，则基本按钮将具有键盘焦点涟漪。
focusVisibleClassName	string	-	此属性可以帮助识别哪个元素具有键盘焦点。当元素通过键盘交互获得焦点时，将应用类名。它是 CSS :focus-visible 选择器的 polyfill。此处解释了使用此功能的理由。如果需要，可以使用 polyfill 将 `focus-visible` 类应用于其他组件。
onFocusVisible	func	-	当组件通过键盘获得焦点时触发的回调。我们也会触发 `onFocus` 回调。
selected	bool	false	如果为 `true`，则渲染为选中状态。
showDaysOutsideCurrentMonth	bool	false	如果为 `true`，则渲染当前月份之外的日期 - 如果定义了 `fixedWeekNumber`，则渲染日期以具有请求的周数。 - 如果未定义 `fixedWeekNumber`，则渲染日期以填充当前月份的第一周和最后一周。 - 如果范围选择器上的 `calendars` 等于多个 `1`，则忽略。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统属性。有关更多详细信息，请参阅 `sx` 页面。
today	bool	false	如果为 `true`，则渲染为今天日期。
TouchRippleProps	object	-	应用于 `TouchRipple` 元素的属性。
touchRippleRef	func \| { current?: { pulsate: func, start: func, stop: func } }	-	指向 `TouchRipple` 元素的 ref。

ref 被转发到根元素。

主题默认属性

您可以使用 MuiPickersDay 通过主题更改此组件的默认属性。

CSS 类

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

类名	规则名称	描述
.Mui-disabled		如果 `disabled=true`，则应用于根元素的状态类。
.Mui-selected		如果 `selected=true`，则应用于根元素的状态类。
.MuiPickersDay-dayOutsideMonth	dayOutsideMonth	如果 `outsideCurrentMonth=true` 且 `showDaysOutsideCurrentMonth=true`，则应用于根元素的样式。
.MuiPickersDay-dayWithMargin	dayWithMargin	如果 `disableMargin=false`，则应用于根元素的样式。
.MuiPickersDay-hiddenDaySpacingFiller	hiddenDaySpacingFiller	如果 `outsideCurrentMonth=true` 且 `showDaysOutsideCurrentMonth=false`，则应用于根元素的样式。
.MuiPickersDay-root	root	应用于根元素的样式。
.MuiPickersDay-today	today	如果 `disableHighlightToday=false` 且 `today=true`，则应用于根元素的样式。

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

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

源代码

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