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';

請閱讀此關於最小化套件大小的指南，以了解差異。

Props

原生元件的 Props 也可用。

名稱	類型	預設值	描述
autoFocus	bool	-	如果 `true`，則主要元素會在首次掛載時取得焦點。此主要元素為：- 可見視圖選擇的元素（若有的話）（即：`day` 視圖中選定的日期）。- 如果有渲染欄位，則為 `input` 元素。
classes	object	-	覆寫或擴展應用於元件的樣式。請參閱下方 CSS 類別 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 透過主題。

插槽

插槽名稱	預設元件	描述
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 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。