YearCalendarAPI

React YearCalendar 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

如需此 React 元件用法的範例和詳細資訊，請造訪元件示範頁面

匯入

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

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

Props

原生元件的 props 也可用。

名稱	類型	預設值	描述
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以取得更多詳細資訊。
defaultValue	object	-	預設選取的值。當元件不受控制時使用。
disabled	bool	-	若為 `true`，則停用選擇器
disableFuture	bool	false	若為 `true`，則停用日期元件的目前日期之後的值、時間元件的時間以及日期時間元件的兩者。
disableHighlightToday	bool	false	若為 `true`，則今天的日期在呈現時不會以圓圈醒目提示。
disablePast	bool	false	若為 `true`，則停用日期元件的目前日期之前的值、時間元件的時間以及日期時間元件的兩者。
maxDate	object	2099-12-31	最大可選日期。
minDate	object	1900-01-01	最小可選日期。
onChange	func	-	值變更時觸發的回呼。簽名：`function(value: TDate) => void` `value` 新值。
readOnly	bool	-	若為 `true`，則選擇器為唯讀
referenceDate	object	使用驗證 props 的最接近有效年份，除了回呼（例如 `shouldDisableYear`）之外。	當 `value` 和 `defaultValue` 皆為空時，用於產生新值的日期。
shouldDisableYear	func	-	停用特定年份。簽名：`function(year: TDate) => boolean` `year` 要測試的年份。傳回值：若為 `true`，則將停用該年份。
slotProps	object	{}	用於每個元件插槽的 props。
slots	object	{}	可覆寫的元件插槽。請參閱下方插槽 API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 props，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
timezone	string	已定義 `value` 或 `defaultValue` prop 的時區，否則為 'default'。	選擇用於值的時區。範例：「default」、「system」、「UTC」、「America/New_York」。如果您將來自其他時區的值傳遞至某些 props，它們將在被使用之前轉換為此時區。請參閱時區文件以取得更多詳細資訊。
value	object	-	選取的值。當元件受控制時使用。
yearsOrder	'asc' \| 'desc'	'asc'	預設情況下，年份以升序（按時間順序）顯示。若為 `desc`，則年份以降序顯示。
yearsPerRow	3 \| 4	3	每列呈現的年份數。

ref 會轉發到根元素。

主題預設 props

您可以使用 MuiYearCalendar 透過主題變更此元件的預設 props。

插槽

插槽名稱	類別名稱	預設元件	描述
yearButton		`YearCalendarButton`	用於在 `year` 檢視中呈現單一年份的按鈕。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的插槽。

類別名稱	規則名稱	描述
.MuiYearCalendar-root	root	套用至根元素的樣式。

您可以使用以下其中一個自訂選項覆寫元件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為元件的styleOverrides 屬性的一部分。

原始碼

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