SingleInputDateRangeFieldAPI

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

示範

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

匯入

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

閱讀關於最小化 bundle size 的指南，以瞭解差異。

Props

原生元件的 Props 也可用。

名稱	類型	預設值	描述
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`，則日期元件停用當前日期之後的值，時間元件停用時間，日期時間元件則同時停用兩者。
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, position: string) => boolean` `day` 要測試的日期。 `position` 要測試的日期，'start' 或 'end'。傳回值：如果應停用日期，則傳回 `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	Array<object>	-	選取的值。當元件受控制時使用。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的 variant。

ref 會轉發到根元素。

主題預設 props

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

CSS 類別

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

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

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

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

原始碼

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