DateFieldAPI

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

示範

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

匯入

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

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

Props

原生元件的 Props 也可用。

名稱	類型	預設值	描述
autoFocus	bool	false	如果為 `true`，則在首次掛載期間會聚焦 `input` 元素。
clearable	bool	false	如果為 `true`，則欄位中會顯示清除按鈕，允許清除值。
color	'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning'	'primary'	元件的顏色。它同時支援預設和自訂主題顏色，可以按照調色盤自訂指南中所示新增。
defaultValue	object	-	預設值。當元件不受控制時使用。
disabled	bool	false	如果為 `true`，則停用元件。
disableFuture	bool	false	如果為 `true`，則停用日期元件的目前日期之後的值、時間元件的時間以及日期時間元件的兩者。
disablePast	bool	false	如果為 `true`，則停用日期元件的目前日期之前的值、時間元件的時間以及日期時間元件的兩者。
focused	bool	-	如果為 `true`，則以聚焦狀態顯示元件。
format	string	-	在輸入中呈現日期時的格式。
formatDensity	'dense' \| 'spacious'	"dense"	在輸入中呈現格式的密度。將 `formatDensity` 設定為 `"spacious"` 將在每個 `/`、`-` 和 `.` 字元前後新增空格。
FormHelperTextProps	object	-	套用至 `FormHelperText` 元素的 Props。
fullWidth	bool	false	如果為 `true`，則輸入將佔用其容器的完整寬度。
helperText	node	-	輔助文字內容。
hiddenLabel	bool	false	如果為 `true`，則隱藏標籤。這用於增加 `FilledInput` 的密度。請務必將 `aria-label` 新增至 `input` 元素。
id	string	-	`input` 元素的 id。使用此 prop 使 `label` 和 `helperText` 可供螢幕閱讀器存取。
InputLabelProps	object	-	套用至 `InputLabel` 元素的 Props。當且僅當 `shrink` 為 `true` 時，才會啟用指標事件，例如 `onClick`。
inputProps	object	-	套用至 `input` 元素的屬性。
InputProps	object	-	套用至 Input 元素的 Props。它將是 `FilledInput`、`OutlinedInput` 或 `Input` 元件，具體取決於 `variant` prop 值。
inputRef	ref	-	將 ref 傳遞至 `input` 元素。
label	node	-	標籤內容。
margin	'dense' \| 'none' \| 'normal'	'none'	如果為 `dense` 或 `normal`，將調整此元件和包含元件的垂直間距。
maxDate	object	2099-12-31	最大可選日期。
minDate	object	1900-01-01	最小可選日期。
name	string	-	`input` 元素的 Name 屬性。
onChange	func	-	值變更時觸發的回呼。簽章：`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 新值。 `context` 包含目前值的驗證結果的內容。
onClear	func	-	按一下清除按鈕時觸發的回呼。
onError	func	-	與目前值相關聯的錯誤變更時觸發的回呼。偵測到驗證錯誤時，`error` 參數會包含非 null 值。這可用於呈現適當的表單錯誤。簽章：`function(error: TError, value: TValue) => void` `error` 目前值無效的原因。 `value` 與錯誤相關聯的值。
onSelectedSectionsChange	func	-	選取的區段變更時觸發的回呼。簽章：`function(newValue: FieldSelectedSections) => void` `newValue` 新選取的區段。
readOnly	bool	false	它防止使用者變更欄位的值 (而非與欄位互動)。
referenceDate	object	使用驗證 props 的最接近有效日期，但回呼 (例如 `shouldDisableDate`) 除外。值會四捨五入到最細微的已用區段。	當 `value` 和 `defaultValue` 皆為空時，用於產生格式中不存在的新值部分的日期。例如，在時間欄位上，它將用於判斷要設定的日期。
required	bool	false	如果為 `true`，則標籤會顯示為必填，且 `input` 元素為必填。
selectedSections	'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number	-	目前選取的區段。此 prop 接受四種格式：1. 如果提供數字，則會選取此索引處的區段。2. 如果提供 `FieldSectionType` 類型的字串，則會選取具有該名稱的第一個區段。3. 如果提供 `"all"`，則會選取所有區段。4. 如果提供 `null`，則不會選取任何區段。如果未提供，則選取的區段將在內部處理。
shouldDisableDate	func	-	停用特定日期。警告：此函式可以多次呼叫 (例如，在呈現日期日曆、檢查是否可以將焦點移至特定日期等時)。昂貴的計算可能會影響效能。簽章：`function(day: TDate) => boolean` `day` 要測試的日期。傳回：如果 `true`，則會停用日期。
shouldDisableMonth	func	-	停用特定月份。簽章：`function(month: TDate) => boolean` `month` 要測試的月份。傳回：如果 `true`，則會停用月份。
shouldDisableYear	func	-	停用特定年份。簽章：`function(year: TDate) => boolean` `year` 要測試的年份。傳回：如果 `true`，則會停用年份。
shouldRespectLeadingZeros	bool	false	如果為 `true`，則格式會遵循前導零 (例如：在 dayjs 上，格式 `M/D/YYYY` 將呈現 `8/16/2018`)。如果為 `false`，則格式將始終新增前導零 (例如：在 dayjs 上，格式 `M/D/YYYY` 將呈現 `08/16/2018`)。警告 n°1：Luxon 在使用巨集 Token (例如：「DD」) 時無法遵循前導零，因此當使用 `AdapterLuxon` 時，`shouldRespectLeadingZeros={true}` 可能會導致不一致。警告 n°2：當 `shouldRespectLeadingZeros={true}` 時，欄位會在包含單位數的區段上新增一個不可見字元，以確保觸發 `onChange`。如果您需要從輸入中取得乾淨的值，可以使用 `input.value.replace(/\u200e/g, '')` 移除此字元。警告 n°3：在嚴格模式下使用時，dayjs 和 moment 要求遵循前導零。這表示當使用 `shouldRespectLeadingZeros={false}` 時，如果您直接從輸入中擷取值 (未監聽 `onChange`)，且您的格式包含不帶前導零的 Token，則您的程式庫將無法剖析該值。
size	'medium' \| 'small'	-	元件的大小。
slotProps	object	{}	用於每個元件 Slot 的 props。
slots	object	{}	可覆寫的元件 Slot。請參閱下方的Slots API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。請參閱 `sx` 頁面以取得更多詳細資訊。
timezone	string	已定義 `value` 或 `defaultValue` prop 的時區，否則為 'default'。	選擇要用於值的時區。範例：「default」、「system」、「UTC」、「America/New_York」。如果您將來自其他時區的值傳遞至某些 props，則它們會在用於之前轉換為此時區。請參閱時區文件以取得更多詳細資訊。
unstableFieldRef	func \| object	-	用於命令式地與欄位互動的 ref 物件。
value	object	-	選取的值。當元件受控制時使用。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的變體。

ref 會轉發到根元素。

主題預設 Props

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

CSS 類別

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

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

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

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

原始碼

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