跳到內容

MultiInputDateRangeFieldAPI

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

範例

匯入

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

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

屬性

原生元件的屬性也可用。

名稱類型預設描述
autoFocusbool-

如果 true，則在首次掛載期間會聚焦 input 元素。

classesobject-

覆寫或擴展應用於元件的樣式。

請參閱下方CSS 類別 API 以瞭解更多詳細資訊。

dateSeparatorstring"–"

顯示在開始日期和結束日期之間的字串。

defaultValueArray<object>-

預設值。當元件不受控制時使用。

direction'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object		'column'

定義 flex-direction 樣式屬性。它適用於所有螢幕尺寸。

disabledboolfalse

如果 true，則元件會停用。

disableFutureboolfalse

如果 true，則停用日期元件的目前日期之後的值、時間元件的時間以及日期時間元件的兩者。

disablePastboolfalse

如果 true，則停用日期元件的目前日期之前的值、時間元件的時間以及日期時間元件的兩者。

dividernode-

在每個子元素之間新增一個元素。

formatstring-

在輸入中呈現日期時的格式。

formatDensity'dense'
| 'spacious'		"dense"

在輸入中呈現格式的密度。將 formatDensity 設定為 "spacious" 將在每個 /、- 和 . 字元前後新增空格。

maxDateobject2099-12-31

最大可選日期。

minDateobject1900-01-01

最小可選日期。

onChangefunc-

當值變更時觸發的回呼。

簽名：function(value: TValue, context: FieldChangeHandlerContext) => void
  • value 新值。
  • context 包含目前值的驗證結果的內容。
onErrorfunc-

當與目前值相關聯的錯誤變更時觸發的回呼。當偵測到驗證錯誤時，error 參數包含非 null 值。這可用於呈現適當的表單錯誤。

簽名：function(error: TError, value: TValue) => void
  • error 目前值無效的原因。
  • value 與錯誤相關聯的值。
onSelectedSectionsChangefunc-

當選取的區段變更時觸發的回呼。

簽名：function(newValue: FieldSelectedSections) => void
  • newValue 新選取的區段。
readOnlyboolfalse

它防止使用者變更欄位的值（而非與欄位互動）。

referenceDateobject使用驗證屬性的最接近有效日期，除了回呼（例如 `shouldDisableDate`）。值會四捨五入到最細微的區段。

當 value 和 defaultValue 皆為空時，用於產生格式中不存在的新值部分的日期。例如，在時間欄位上，它將用於決定要設定的日期。

selectedSections'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number		-

目前選取的區段。此屬性接受四種格式：1. 如果提供數字，則會選取此索引處的區段。2. 如果提供 FieldSectionType 類型的字串，則會選取具有該名稱的第一個區段。3. 如果提供 "all"，則會選取所有區段。4. 如果提供 null，則不會選取任何區段。如果未提供，則選取的區段將在內部處理。

shouldDisableDatefunc-

停用特定日期。
警告：此函式可能會被多次呼叫（例如，在呈現日期日曆、檢查焦點是否可以移動到特定日期等時）。昂貴的計算可能會影響效能。

簽名：function(day: TDate, position: string) => boolean
  • day 要測試的日期。
  • position 要測試的日期，'start' 或 'end'。

回傳： 如果應停用日期，則回傳 true。

shouldRespectLeadingZerosboolfalse

如果 true，則格式將尊重前導零（例如：在 dayjs 上，格式 M/D/YYYY 將呈現 8/16/2018）。如果 false，則格式將始終新增前導零（例如：在 dayjs 上，格式 M/D/YYYY 將呈現 08/16/2018）。
警告 1：Luxon 無法在使用巨集 token（例如："DD"）時尊重前導零，因此當使用 AdapterLuxon 時，shouldRespectLeadingZeros={true} 可能會導致不一致。
警告 2：當 shouldRespectLeadingZeros={true} 時，欄位將在包含單個數字的區段上新增一個不可見的字元，以確保觸發 onChange。如果您需要從輸入中取得乾淨的值，可以使用 input.value.replace(/\u200e/g, '') 移除此字元。
警告 3：當在嚴格模式下使用時，dayjs 和 moment 需要尊重前導零。這表示當使用 shouldRespectLeadingZeros={false} 時，如果您直接從輸入中檢索值（不監聽 onChange）且您的格式包含沒有前導零的 token，則您的程式庫將無法解析該值。

slotPropsobject{}

用於每個元件插槽的屬性。

slotsobject{}

可覆寫的元件插槽。

請參閱下方插槽 API 以瞭解更多詳細資訊。

spacingArray<number
| string>
| number
| object
| string		0

定義直接子元素之間的間距。

sxArray<func
| object
| bool>
| func
| object		-

系統屬性，允許定義系統覆寫以及其他 CSS 樣式。

請參閱 `sx` 頁面 以瞭解更多詳細資訊。

timezonestringvalue 或 defaultValue 屬性的時區已定義，否則為 'default'。

選擇要用於值的時區。範例："default"、"system"、"UTC"、"America/New_York"。如果您將來自其他時區的值傳遞給某些屬性，它們將在被使用前轉換為此時區。

請參閱 時區文件 以瞭解更多詳細資訊。

useFlexGapboolfalse

如果 true，則會使用 CSS flexbox gap 而不是將 margin 應用於子元素。
雖然 CSS gap 移除了已知限制，但在某些瀏覽器中尚未完全支援。我們建議在使用此標誌之前檢查 https://caniuse.dev.org.tw/?search=flex%20gap。
若要全域啟用此標誌，請依照主題的預設屬性設定。

valueArray<object>-

選取的值。當元件受控制時使用。

ref 會轉發到根元素。

主題預設屬性

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

CSS 類別

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

類別名稱規則名稱描述
.MuiMultiInputDateRangeField-rootroot應用於根元素的樣式。
.MuiMultiInputDateRangeField-separatorseparator應用於分隔符號元素的樣式。

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

原始碼

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