跳到主要內容

SingleInputDateTimeRangeFieldAPI

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

示範

匯入

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

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

Props

原生元件的 Props 也可用。

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

用於小時選擇時鐘的 12 小時/24 小時視圖。

autoFocusboolfalse

若為 true，則 input 元素會在首次掛載時獲得焦點。

clearableboolfalse

若為 true，則欄位中會顯示清除按鈕，允許清除值。

color'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'		'primary'

元件的顏色。它支援預設和自訂主題顏色，可以按照調色盤客製化指南中所示的方式新增。

dateSeparatorstring"–"

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

defaultValueArray<object>-

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

disabledboolfalse

若為 true，則元件會停用。

disableFutureboolfalse

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

disableIgnoringDatePartForTimeValidationboolfalse

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

disablePastboolfalse

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

focusedbool-

若為 true，則元件會以聚焦狀態顯示。

formatstring-

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

formatDensity'dense'
| 'spacious'		"dense"

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

FormHelperTextPropsobject-

套用至 FormHelperText 元素的 Props。

fullWidthboolfalse

若為 true，則輸入將佔用其容器的完整寬度。

helperTextnode-

輔助文字內容。

hiddenLabelboolfalse

若為 true，則標籤會隱藏。這用於增加 FilledInput 的密度。請務必將 aria-label 新增至 input 元素。

idstring-

input 元素的 id。使用此 prop 使 label 和 helperText 可供螢幕閱讀器存取。

InputLabelPropsobject-

套用至 InputLabel 元素的 Props。只有在 shrink 為 true 時，才會啟用指標事件 (例如 onClick)。

inputPropsobject-

套用至 input 元素的屬性。

InputPropsobject-

套用至 Input 元素的 Props。根據 variant prop 值，它將是 FilledInput、OutlinedInput 或 Input 元件。

inputRefref-

將 ref 傳遞至 input 元素。

labelnode-

標籤內容。

margin'dense'
| 'none'
| 'normal'		'none'

若為 dense 或 normal，將調整此元件和包含元件的垂直間距。

maxDateobject2099-12-31

最大可選日期。

maxDateTimeobject-

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

maxTimeobject-

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

minDateobject1900-01-01

最小可選日期。

minDateTimeobject-

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

minTimeobject-

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

minutesStepnumber1

分鐘的步進值。

namestring-

input 元素的 Name 屬性。

onChangefunc-

值變更時觸發的回呼。

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

按一下清除按鈕時觸發的回呼。

onErrorfunc-

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

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

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

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

它可防止使用者變更欄位的值 (而非與欄位互動)。

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

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

requiredboolfalse

若為 true，則標籤會顯示為必填，且 input 元素為必填。

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：Luxon 在使用巨集權杖 (例如："DD") 時無法遵循前導零，因此當使用 AdapterLuxon 時，shouldRespectLeadingZeros={true} 可能會導致不一致。
警告 n°2：當 shouldRespectLeadingZeros={true} 時，欄位會在包含單一位數的區段上新增不可見字元，以確保觸發 onChange。如果您需要從輸入取得清除值，可以使用 input.value.replace(/\u200e/g, '') 移除此字元。
警告 n°3：在嚴格模式下使用時，dayjs 和 moment 需要遵循前導零。這表示當使用 shouldRespectLeadingZeros={false} 時，如果您直接從輸入擷取值 (未監聽 onChange) 且您的格式包含沒有前導零的權杖，則您的程式庫將不會剖析該值。

size'medium'
| 'small'		-

元件的大小。

slotPropsobject{}

用於每個元件插槽的 props。

slotsobject{}

可覆寫的元件插槽。

請參閱下方的插槽 API 以取得更多詳細資訊。

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

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

請參閱 `sx` 頁面 以取得更多詳細資訊。

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

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

請參閱 時區文件 以取得更多詳細資訊。

unstableFieldReffunc
| object		-

用於命令式與欄位互動的 ref 物件。

valueArray<object>-

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

variant'filled'
| 'outlined'
| 'standard'		'outlined'

要使用的 variant。

ref 會轉發到根元素。

主題預設 props

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

CSS 類別

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

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

您可以使用以下其中一種客製化選項覆寫元件的樣式

原始碼

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