跳到主要內容

MultiInputDateTimeRangeFieldAPI

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

範例展示

Import

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

請閱讀這份關於最小化套件大小的指南，以瞭解它們之間的差異。

Props

原生元件的 props 也可使用。

名稱類型預設值描述
ampmboolutils.is12HourCycleInCurrentLocale()

小時選擇時鐘的 12 小時制/24 小時制檢視。

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，則停用日期元件的目前日期之後的值、時間元件的時間以及日期時間元件的兩者。

disableIgnoringDatePartForTimeValidationboolfalse

驗證最小/最大時間時，不要忽略日期部分。

disablePastboolfalse

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

dividernode-

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

formatstring-

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

formatDensity'dense'
| 'spacious'		"dense"

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

maxDateobject2099-12-31

最大可選日期。

maxDateTimeobject-

綁定日期的最大可選時間點，若要設定每天的最大時間，請使用 maxTime。

maxTimeobject-

最大可選時間。除非 props.disableIgnoringDatePartForTimeValidation === true，否則物件的日期部分將被忽略。

minDateobject1900-01-01

最小可選日期。

minDateTimeobject-

綁定日期的最小可選時間點，若要設定每天的最小時間，請使用 minTime。

minTimeobject-

最小可選時間。除非 props.disableIgnoringDatePartForTimeValidation === true，否則物件的日期部分將被忽略。

minutesStepnumber1

分鐘的步進值。

onChangefunc-

當值變更時觸發的回呼。

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

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

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

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

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

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

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

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

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

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

shouldDisableDatefunc-

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

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

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

shouldDisableTimefunc-

停用特定時間。

簽名：function(value: TDate, view: TimeView) => boolean
  • value 要檢查的值。
  • view timeValue 的時鐘類型。

傳回值： 如果為 true，則時間將被停用。

shouldRespectLeadingZerosboolfalse

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

slotPropsobject{}

用於每個元件 slot 的 props。

slotsobject{}

可覆寫的元件 slot。

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

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

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

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

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

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

timezonestring`value` 或 `defaultValue` prop 的時區已定義，否則為 'default'。

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

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

useFlexGapboolfalse

若為 true，則會使用 CSS flexbox gap，而不是將 margin 套用至子元素。
雖然 CSS gap 移除了已知限制，但在某些瀏覽器中尚未完全支援。我們建議在使用此旗標之前，先查看 https://caniuse.dev.org.tw/?search=flex%20gap。
若要全域啟用此旗標，請遵循主題的預設 props 設定。

valueArray<object>-

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

ref 會轉發到根元素。

主題預設 props

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

CSS 類別

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

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

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

原始碼

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