TimeFieldAPI

React TimeField 元件的 API 參考文件。了解此匯出模組的屬性、CSS 和其他 API。

示範

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

匯入

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

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

屬性

原生元件的屬性也可用。

名稱	類型	預設值	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	小時選擇時鐘的 12 小時制/24 小時制檢視。
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`，則日期元件停用目前日期之後的值，時間元件停用目前時間之後的值，日期時間元件則兩者都停用。
disableIgnoringDatePartForTimeValidation	bool	false	驗證最小/最大時間時，不要忽略日期部分。
disablePast	bool	false	若為 `true`，則日期元件停用目前日期之前的值，時間元件停用目前時間之前的值，日期時間元件則兩者都停用。
focused	bool	-	若為 `true`，則元件會以焦點狀態顯示。
format	string	-	在輸入中呈現日期時的格式。
formatDensity	'dense' \| 'spacious'	"dense"	在輸入中呈現格式時的密度。將 `formatDensity` 設定為 `"spacious"` 將在每個 `/`、`-` 和 `.` 字元前後新增空格。
FormHelperTextProps	object	-	套用至 `FormHelperText` 元素的屬性。
fullWidth	bool	false	若為 `true`，則輸入將佔用其容器的完整寬度。
helperText	node	-	輔助文字內容。
hiddenLabel	bool	false	若為 `true`，則標籤會隱藏。這用於增加 `FilledInput` 的密度。請務必將 `aria-label` 新增至 `input` 元素。
id	string	-	`input` 元素的 id。使用此屬性使螢幕閱讀器可存取 `label` 和 `helperText`。
InputLabelProps	object	-	套用至 `InputLabel` 元素的屬性。只有在 `shrink` 為 `true` 時，才會啟用指標事件，例如 `onClick`。
inputProps	object	-	套用至 `input` 元素的屬性。
InputProps	object	-	套用至 Input 元素的屬性。它將是 `FilledInput`、`OutlinedInput` 或 `Input` 元件，具體取決於 `variant` 屬性值。
inputRef	ref	-	將 ref 傳遞至 `input` 元素。
label	node	-	標籤內容。
margin	'dense' \| 'none' \| 'normal'	'none'	若為 `dense` 或 `normal`，將調整此元件和包含元件的垂直間距。
maxTime	object	-	可選取的最大時間。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否則將忽略物件的日期部分。
minTime	object	-	可選取的最小時間。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否則將忽略物件的日期部分。
minutesStep	number	1	分鐘的步進值。
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	使用驗證屬性的最接近有效日期，但回呼（例如 `shouldDisableDate`）除外。值會四捨五入到最細微的已使用區段。	當 `value` 和 `defaultValue` 皆為空時，用於產生格式中不存在的新值部分的日期。例如，在時間欄位上，它將用於判斷要設定的日期。
required	bool	false	若為 `true`，則標籤會顯示為必要，且 `input` 元素為必要。
selectedSections	'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number	-	目前選取的區段。此屬性接受四種格式：1. 如果提供數字，則會選取此索引處的區段。2. 如果提供 `FieldSectionType` 類型的字串，則會選取具有該名稱的第一個區段。3. 如果提供 `"all"`，則會選取所有區段。4. 如果提供 `null`，則不會選取任何區段。如果未提供，則選取的區段將在內部處理。
shouldDisableTime	func	-	停用特定時間。簽名：`function(value: TDate, view: TimeView) => boolean` `value` 要檢查的值。 `view` timeValue 的時鐘類型。傳回值：若為 `true`，時間將停用。
shouldRespectLeadingZeros	bool	false	若為 `true`，則格式將遵循前導零（例如：在 dayjs 上，格式 `M/D/YYYY` 將呈現 `8/16/2018`）。若為 `false`，則格式將始終新增前導零（例如：在 dayjs 上，格式 `M/D/YYYY` 將呈現 `08/16/2018`）。警告 1：Luxon 無法在使用巨集符號（例如："DD"）時遵循前導零，因此當使用 `AdapterLuxon` 時，`shouldRespectLeadingZeros={true}` 可能會導致不一致。警告 2：當 `shouldRespectLeadingZeros={true}` 時，欄位將在包含單一位數的區段上新增不可見字元，以確保觸發 `onChange`。如果您需要從輸入中取得清除值，可以使用 `input.value.replace(/\u200e/g, '')` 移除此字元。警告 3：當在嚴格模式下使用時，dayjs 和 moment 需要遵循前導零。這表示當使用 `shouldRespectLeadingZeros={false}` 時，如果您直接從輸入中擷取值（未監聽 `onChange`），且您的格式包含沒有前導零的符號，則您的程式庫將不會剖析該值。
size	'medium' \| 'small'	-	元件的大小。
slotProps	object	{}	用於每個元件插槽的屬性。
slots	object	{}	可覆寫的元件插槽。請參閱下方的插槽 API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
timezone	string	`value` 或 `defaultValue` 屬性的時區已定義，否則為 'default'。	選擇要用於值的時區。範例："default"、"system"、"UTC"、"America/New_York"。如果您將來自其他時區的值傳遞至某些屬性，它們會在被使用之前轉換為此時區。請參閱時區文件以取得更多詳細資訊。
unstableFieldRef	func \| object	-	用於命令式與欄位互動的 ref 物件。
value	object	-	選取的值。當元件受控制時使用。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的變體。

ref 轉發到根元素。

主題預設屬性

您可以使用 MuiTimeField 透過主題變更此元件的預設屬性。

CSS 類別

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

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

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

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

原始碼

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