TimeClockAPI

React TimeClock 組件的 API 參考文件。了解此導出模組的屬性、CSS 和其他 API。

示範

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

導入

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

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

屬性

原生組件的屬性也可用。

名稱	類型	預設值	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	小時選擇時鐘的 12 小時/24 小時視圖。
ampmInClock	bool	false	在時鐘下方（而不是在工具列中）顯示 ampm 控制項。
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' \| 'minutes' \| 'seconds'	-	受控的焦點視圖。
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' \| 'minutes' \| 'seconds'	-	預設可見視圖。當組件視圖不受控制時使用。必須是 `views` 列表中的有效選項。
readOnly	bool	false	如果為 `true`，則選擇器視圖和文字欄位為唯讀。
referenceDate	object	使用驗證屬性的最接近有效時間，但回呼（例如 `shouldDisableTime`）除外。	當 `value` 和 `defaultValue` 皆為空時，用於產生新值的日期。
shouldDisableTime	func	-	停用特定時間。簽名：`function(value: TDate, view: TimeView) => boolean` `value` 要檢查的值。 `view` timeValue 的時鐘類型。傳回值：如果為 `true`，則時間將被停用。
slotProps	object	{}	用於每個組件插槽的屬性。
slots	object	{}	可覆寫的組件插槽。請參閱下方的插槽 API以了解更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統屬性。請參閱 `sx` 頁面以了解更多詳細資訊。
timezone	string	定義 `value` 或 `defaultValue` 屬性的時區，否則為 'default'。	選擇用於值的時區。範例：「default」、「system」、「UTC」、「America/New_York」。如果您將來自其他時區的值傳遞給某些屬性，它們將在使用前轉換為此時區。請參閱時區文件以了解更多詳細資訊。
value	object	-	選定的值。當組件受控制時使用。
view	'hours' \| 'minutes' \| 'seconds'	-	可見視圖。當組件視圖受控制時使用。必須是 `views` 列表中的有效選項。
views	Array<'hours' \| 'minutes' \| 'seconds'>	['hours', 'minutes']	可用視圖。

ref 轉發到根元素。

主題預設屬性

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

插槽

插槽名稱	預設組件	描述
leftArrowIcon	`ArrowLeft`	顯示在左視圖切換按鈕中的圖示。
nextIconButton	`IconButton`	允許切換到右視圖的按鈕。
previousIconButton	`IconButton`	允許切換到左視圖的按鈕。
rightArrowIcon	`ArrowRight`	顯示在右視圖切換按鈕中的圖示。

CSS 類別

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

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

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

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

原始碼

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