跳到主要內容

MultiSectionDigitalClockAPI

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

示範

匯入

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

閱讀這份關於最小化 bundle 大小的指南，以了解差異。

Props 屬性

也提供原生組件的 Props 屬性。

名稱類型預設值描述
ampm布林值utils.is12HourCycleInCurrentLocale()

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

autoFocus布林值-

如果為 true，則在首次掛載期間主要元素會獲得焦點。此主要元素為：- 可見檢視選擇的元素（若有的話）（即：在日期檢視中選定的日期）。- 如果有渲染欄位，則為 input 元素。

classes 類別物件-

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

有關更多詳細資訊，請參閱下方的 CSS 類別 API。

defaultValue物件-

預設選定的值。當組件不受控制時使用。

disabled布林值false

如果為 true，則停用選擇器檢視和文字欄位。

disableFuture布林值false

如果為 true，則針對日期組件停用目前日期之後的值，針對時間組件停用目前時間之後的值，針對日期時間組件則停用兩者。

disableIgnoringDatePartForTimeValidation布林值false

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

disablePast布林值false

如果為 true，則針對日期組件停用目前日期之前的值，針對時間組件停用目前時間之前的值，針對日期時間組件則停用兩者。

focusedView'hours'
| 'meridiem'
| 'minutes'
| 'seconds'		-

受控的焦點檢視。

maxTime物件-

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

minTime物件-

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

minutesStep數字1

分鐘的步進值。

onChange函數-

當值變更時觸發的回呼函數。

簽名：function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void
  • value 新值。
  • selectionState 指示日期選擇是否完成。
  • selectedView 指示進行選擇的檢視。
onFocusedViewChange函數-

在焦點檢視變更時觸發的回呼函數。

簽名：function(view: TView, hasFocus: boolean) => void
  • view 要聚焦或不聚焦的新檢視。
  • hasFocus 如果檢視應聚焦，則為 true。
onViewChange函數-

在檢視變更時觸發的回呼函數。

簽名：function(view: TView) => void
  • view 新檢視。
openTo'hours'
| 'meridiem'
| 'minutes'
| 'seconds'		-

預設可見檢視。當組件檢視不受控制時使用。必須是 views 列表中的有效選項。

readOnly布林值false

如果為 true，則選擇器檢視和文字欄位為唯讀。

referenceDate物件使用驗證 props 屬性，除了 `shouldDisableTime` 等回呼函數之外，最接近的有效時間。

當 value 和 defaultValue 都為空時，用於產生新值的日期。

shouldDisableTime函數-

停用特定時間。

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

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

skipDisabled布林值false

如果為 true，則不會渲染停用的數位時鐘項目。

slotProps物件{}

用於每個組件插槽的 props 屬性。

slots 插槽物件{}

可覆寫的組件插槽。

有關更多詳細資訊，請參閱下方的插槽 API。

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

允許定義系統覆寫以及額外 CSS 樣式的系統 prop 屬性。

有關更多詳細資訊，請參閱 `sx` 頁面。

timeSteps{ hours?: number, minutes?: number, seconds?: number }{ hours: 1, minutes: 5, seconds: 5 }

兩個時間單位選項之間的時間步進值。例如，如果 timeStep.minutes = 8，則可用的分鐘選項將為 [0, 8, 16, 24, 32, 40, 48, 56]。

timezone字串已定義 value 或 defaultValue prop 屬性的時區，否則為 'default'。

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

有關更多詳細資訊，請參閱 時區文檔。

value物件-

選定的值。當組件受控制時使用。

view'hours'
| 'meridiem'
| 'minutes'
| 'seconds'		-

可見檢視。當組件檢視受控制時使用。必須是 views 列表中的有效選項。

viewsArray<'hours'
| 'meridiem'
| 'minutes'
| 'seconds'>		['hours', 'minutes']

可用的檢視。

ref 轉發到根元素。

主題預設 Props 屬性

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

插槽

插槽名稱類別名稱預設組件描述
digitalClockSectionItemMenuItem from '@mui/material'負責渲染單個多區段數位時鐘區段項目的組件。

CSS 類別

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

類別名稱規則名稱描述
.MuiMultiSectionDigitalClock-rootroot應用於根元素的樣式。

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

原始碼

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