DateCalendarAPI

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

演示

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

导入

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

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

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
autoFocus	bool	-	如果 `true`，则主元素在首次挂载时获得焦点。此主元素是：- 可见视图选择的元素（如果有）（即：`day` 视图上选定的日期）。- 如果渲染了字段，则为 `input` 元素。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的CSS classes API。
dayOfWeekFormatter	func	(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()	格式化日历标题中显示的一周中的某天。签名：`function(date: TDate) => string` `date` 适配器提供的一周中某天的日期。返回值：要显示的名称。
defaultValue	object	-	默认选定的值。当组件不受控制时使用。
disabled	bool	false	如果 `true`，则禁用选择器和文本字段。
disableFuture	bool	false	如果 `true`，则禁用日期组件的当前日期之后的值，时间组件的时间以及日期时间组件的两者。
disableHighlightToday	bool	false	如果 `true`，则今天的日期在渲染时不会用圆圈高亮显示。
disablePast	bool	false	如果 `true`，则禁用日期组件的当前日期之前的值，时间组件的时间以及日期时间组件的两者。
displayWeekNumber	bool	-	如果 `true`，则周数将显示在日历中。
fixedWeekNumber	number	-	日期视图将显示当前月份结束后所需的周数，以匹配此值。设置为 6 以在公历中具有固定的周数
focusedView	'day' \| 'month' \| 'year'	-	受控的焦点视图。
loading	bool	false	如果 `true`，则调用 `renderLoading` 而不是渲染日期日历。可用于预加载信息并在日历中显示。
maxDate	object	2099-12-31	最大可选日期。
minDate	object	1900-01-01	最小可选日期。
monthsPerRow	3 \| 4	3	每行渲染的月份数。
onChange	func	-	值更改时触发的回调。签名：`function(value: TValue, selectionState: PickerSelectionState \| undefined, selectedView: TView \| undefined) => void` `value` 新值。 `selectionState` 指示日期选择是否完成。 `selectedView` 指示进行选择的视图。
onFocusedViewChange	func	-	焦点视图更改时触发的回调。签名：`function(view: TView, hasFocus: boolean) => void` `view` 要聚焦或不聚焦的新视图。 `hasFocus` 如果视图应聚焦，则为 `true`。
onMonthChange	func	-	月份更改时触发的回调。签名：`function(month: TDate) => void` `month` 新月份。
onViewChange	func	-	视图更改时触发的回调。签名：`function(view: TView) => void` `view` 新视图。
onYearChange	func	-	年份更改时触发的回调。签名：`function(year: TDate) => void` `year` 新年份。
openTo	'day' \| 'month' \| 'year'	-	默认可见视图。当组件视图不受控制时使用。必须是 `views` 列表中有效的选项。
readOnly	bool	false	使选择器为只读。
reduceAnimations	bool	`@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` 匹配 Android <10 或 iOS <13	如果 `true`，则禁用繁重的动画。
referenceDate	object	使用验证 props 的最接近的有效日期，但回调函数（例如 `shouldDisableDate`）除外。	当 `value` 和 `defaultValue` 都为空时，用于生成新值的日期。
renderLoading	func	() => <span>...</span>	当传递 `loading` true 时显示的组件。签名：`function() => React.ReactNode` 返回值：加载时要渲染的节点。
shouldDisableDate	func	-	禁用特定日期。警告：此函数可以多次调用（例如，在渲染日期日历、检查焦点是否可以移动到特定日期等时）。昂贵的计算可能会影响性能。签名：`function(day: TDate) => boolean` `day` 要测试的日期。返回值：如果为 `true`，则将禁用该日期。
shouldDisableMonth	func	-	禁用特定月份。签名：`function(month: TDate) => boolean` `month` 要测试的月份。返回值：如果为 `true`，则将禁用该月份。
shouldDisableYear	func	-	禁用特定年份。签名：`function(year: TDate) => boolean` `year` 要测试的年份。返回值：如果为 `true`，则将禁用该年份。
showDaysOutsideCurrentMonth	bool	false	如果 `true`，则渲染当前月份之外的日期 - 如果定义了 `fixedWeekNumber`，则渲染日期以具有请求的周数。 - 如果未定义 `fixedWeekNumber`，则渲染日期以填充当前月份的第一周和最后一周。 - 如果范围选择器上的 `calendars` 等于多个 `1`，则忽略。
slotProps	object	{}	用于每个组件插槽的 props。
slots	object	{}	可覆盖的组件插槽。有关更多详细信息，请参阅下面的Slots API。
sx	Array<func \| object \| bool> \| func \| object	-	系统 prop，允许定义系统覆盖以及其他 CSS 样式。有关更多详细信息，请参阅`sx` 页面。
timezone	string	定义了 `value` 或 `defaultValue` prop 的时区，否则为 'default'。	选择要用于值的时区。示例：“default”、“system”、“UTC”、“America/New_York”。如果您将来自其他时区的值传递给某些 props，它们将在使用前转换为此时区。有关更多详细信息，请参阅时区文档。
value	object	-	选定的值。当组件受控制时使用。
view	'day' \| 'month' \| 'year'	-	可见视图。当组件视图受控制时使用。必须是 `views` 列表中有效的选项。
views	Array<'day' \| 'month' \| 'year'>	-	可用视图。
yearsOrder	'asc' \| 'desc'	'asc'	默认情况下，年份按升序（时间顺序）显示。如果为 `desc`，则年份按降序显示。
yearsPerRow	3 \| 4	3	每行渲染的年份数。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiDateCalendar 通过主题更改此组件的默认 props。

Slots

插槽名称	默认组件	描述
calendarHeader	`PickersCalendarHeader`	日历标题的自定义组件。查看 PickersCalendarHeader 组件。
day	`PickersDay`	日期的自定义组件。查看 PickersDay 组件。
leftArrowIcon	`ArrowLeft`	在左视图切换按钮中显示的图标。
monthButton	`MonthCalendarButton`	用于在 `month` 视图中渲染单个月份的按钮。
nextIconButton	`IconButton`	允许切换到右视图的按钮。
previousIconButton	`IconButton`	允许切换到左视图的按钮。
rightArrowIcon	`ArrowRight`	在右视图切换按钮中显示的图标。
switchViewButton	`IconButton`	用于在不同日历视图之间切换的按钮。
switchViewIcon	`ArrowDropDown`	在 SwitchViewButton 中显示的图标。当打开的视图为 `year` 时旋转 180°。
yearButton	`YearCalendarButton`	用于在 `year` 视图中渲染单个年份的按钮。

CSS 类

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

类名	规则名称	描述
.MuiDateCalendar-root	root	应用于根元素的样式。
.MuiDateCalendar-viewTransitionContainer	viewTransitionContainer	应用于过渡组元素的样式。

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

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

源代码

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