DigitalClockAPI

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

示範

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

匯入

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

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

Props

原生元件的 Props 也可用。

名稱	類型	預設值	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	小時選擇時鐘的 12 小時制/24 小時制檢視。
autoFocus	bool	-	若為 `true`，主要元素會在首次掛載期間取得焦點。此主要元素為： - 可見檢視所選取的元素（若有）（即：`day` 檢視中選取的日期）。 - 若有欄位呈現，則為 `input` 元素。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方的CSS 類別 API 以取得更多詳細資訊。
defaultValue	object	-	預設選取值。當元件不受控制時使用。
disabled	bool	false	若為 `true`，則停用選擇器檢視和文字欄位。
disableFuture	bool	false	若為 `true`，則針對日期元件停用目前日期之後的值，針對時間元件停用目前時間之後的值，針對日期時間元件則停用兩者。
disableIgnoringDatePartForTimeValidation	bool	false	驗證最小/最大時間時，請勿忽略日期部分。
disablePast	bool	false	若為 `true`，則針對日期元件停用目前日期之前的值，針對時間元件停用目前時間之前的值，針對日期時間元件則停用兩者。
focusedView	'hours'	-	受控制的焦點檢視。
maxTime	object	-	最大可選時間。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否則將忽略物件的日期部分。
minTime	object	-	最小可選時間。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否則將忽略物件的日期部分。
minutesStep	number	1	分鐘的步進值。
onChange	func	-	值變更時觸發的回呼。簽名：`function(value: TValue, selectionState: PickerSelectionState \| undefined, selectedView: TView \| undefined) => void` `value` 新值。 `selectionState` 指示日期選取是否完成。 `selectedView` 指示進行選取的檢視。
onFocusedViewChange	func	-	焦點檢視變更時觸發的回呼。簽名：`function(view: TView, hasFocus: boolean) => void` `view` 要聚焦或取消聚焦的新檢視。 `hasFocus` `true` 若檢視應聚焦。
onViewChange	func	-	檢視變更時觸發的回呼。簽名：`function(view: TView) => void` `view` 新檢視。
openTo	'hours'	-	預設可見檢視。當元件檢視不受控制時使用。必須是 `views` 清單中的有效選項。
readOnly	bool	false	若為 `true`，則選擇器檢視和文字欄位為唯讀。
referenceDate	object	使用驗證 props 的最接近有效時間，但回呼（例如 `shouldDisableTime`）除外。	當 `value` 和 `defaultValue` 皆為空時，用於產生新值的日期。
shouldDisableTime	func	-	停用特定時間。簽名：`function(value: TDate, view: TimeView) => boolean` `value` 要檢查的值。 `view` timeValue 的時鐘類型。傳回值：若為 `true`，則時間將會停用。
skipDisabled	bool	false	若為 `true`，則不會呈現停用的數位時鐘項目。
slotProps	object	{}	用於每個元件插槽的 props。
slots	object	{}	可覆寫的元件插槽。請參閱下方的插槽 API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
timeStep	number	30	兩個時間選項之間的時間步進值。例如，若 `timeStep = 45`，則可用的時間選項將為 `[00:00, 00:45, 01:30, 02:15, 03:00, etc.]`。
timezone	string	已定義 `value` 或 `defaultValue` prop 的時區，否則為 'default'。	選擇用於值的時區。範例：「default」、「system」、「UTC」、「America/New_York」。若您將來自其他時區的值傳遞至某些 props，則這些值將會先轉換為此時區，然後再使用。請參閱時區文件以取得更多詳細資訊。
value	object	-	選取的值。當元件受控制時使用。
view	'hours'	-	可見檢視。當元件檢視受控制時使用。必須是 `views` 清單中的有效選項。
views	Array<'hours'>	['hours']	可用的檢視。

ref 會轉發至根元素。

主題預設 props

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

插槽

插槽名稱	類別名稱	預設元件	描述
digitalClockItem		`來自 '@mui/material' 的 MenuItem`	負責呈現單一數位時鐘項目的元件。

CSS 類別

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

類別名稱	規則名稱	描述
.MuiDigitalClock-item	item	套用至清單項目（預設：MenuItem）元素的樣式。
.MuiDigitalClock-list	list	套用至清單（預設：MenuList）元素的樣式。
.MuiDigitalClock-root	root	套用至根元素的樣式。

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

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

原始碼

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