SingleInputTimeRangeFieldAPI

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

示範

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

匯入

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

透過閱讀此關於最小化 bundle size 的指南，了解差異。

Props

原生組件的 props 也可使用。

名稱	類型	預設值	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	小時選擇時鐘的 12 小時制/24 小時制檢視。
autoFocus	bool	false	若為 `true`，則 `input` 元素會在首次掛載時取得焦點。
clearable	bool	false	若為 `true`，則欄位中會顯示清除按鈕，允許清除值。
color	'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning'	'primary'	組件的顏色。它支援預設和自訂主題顏色，可按照調色盤客製化指南中所示新增。
dateSeparator	string	"–"	開始日期和結束日期之間顯示的字串。
defaultValue	Array<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` 元素的 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`，將調整此組件和包含組件的垂直間距。
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	使用驗證 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`，則不會選取任何區段。若未提供，選取的區段將在內部處理。
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`）警告 n°1：Luxon 在使用巨集權杖（例如：「DD」）時無法尊重前導零，因此使用 `shouldRespectLeadingZeros={true}` 可能會在搭配 `AdapterLuxon` 使用時導致不一致。警告 n°2：當 `shouldRespectLeadingZeros={true}` 時，欄位會在包含單一位數的區段上新增一個不可見的字元，以確保觸發 `onChange`。若您需要從輸入中取得乾淨的值，可以使用 `input.value.replace(/\u200e/g, '')` 移除此字元。警告 n°3：在嚴格模式下使用時，dayjs 和 moment 需要尊重前導零。這表示當使用 `shouldRespectLeadingZeros={false}` 時，如果您直接從輸入中擷取值（而非監聽 `onChange`）且您的格式包含不帶前導零的權杖，則您的程式庫將不會剖析該值。
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	Array<object>	-	選取的值。當組件受控制時使用。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的 variant。

ref 會轉發到根元素。

主題預設 props

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

CSS 類別

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

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

您可以使用以下客製化選項之一覆寫組件的樣式

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

原始碼

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