StaticTimePickerAPI

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

示範

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

Import

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

了解差異，請閱讀此關於最小化 bundle size 的指南。

Props

名稱	類型	預設值	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	小時選擇時鐘的 12 小時/24 小時制檢視。
ampmInClock	bool	桌面為 true，行動裝置為 false	在時鐘下方（而非工具列中）顯示 ampm 控制項。
autoFocus	bool	-	若為 `true`，則主要元素會在首次掛載時獲得焦點。此主要元素為：- 若有可見檢視選擇的元素（即：`day` 檢視中選定的日期）。- 若有渲染欄位，則為 `input` 元素。
defaultValue	object	-	預設值。當元件不受控制時使用。
disabled	bool	false	若為 `true`，則停用選擇器和文字欄位。
disableFuture	bool	false	若為 `true`，則日期元件停用當前日期之後的值，時間元件停用當前時間之後的值，日期時間元件則同時停用兩者。
disableIgnoringDatePartForTimeValidation	bool	false	驗證最小/最大時間時，不忽略日期部分。
disablePast	bool	false	若為 `true`，則日期元件停用當前日期之前的值，時間元件停用當前時間之前的值，日期時間元件則同時停用兩者。
displayStaticWrapperAs	'desktop' \| 'mobile'	"mobile"	強制靜態包裝器內部元件以行動裝置或桌面模式渲染。
localeText	object	-	元件文字的地區設定。允許覆寫來自 `LocalizationProvider` 和 `theme` 的文字。
maxTime	object	-	最大可選時間。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否則物件的日期部分將被忽略。
minTime	object	-	最小可選時間。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否則物件的日期部分將被忽略。
minutesStep	number	1	分鐘的步進值。
onAccept	func	-	當值被接受時觸發的回呼。簽名：`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 剛被接受的值。 `context` 包含目前值的驗證結果的 context。
onChange	func	-	當值變更時觸發的回呼。簽名：`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 新值。 `context` 包含目前值的驗證結果的 context。
onClose	func	-	當元件請求關閉時觸發的回呼。可以在選擇（預設在 `desktop` 模式下）或清除值時觸發。已棄用－請避免使用，因為它將在下一個主要版本中移除。
onError	func	-	當與目前值相關聯的錯誤變更時觸發的回呼。當偵測到驗證錯誤時，`error` 參數會包含非 null 值。這可用於渲染適當的表單錯誤。簽名：`function(error: TError, value: TValue) => void` `error` 目前值無效的原因。 `value` 與錯誤相關聯的值。
onViewChange	func	-	在檢視變更時觸發的回呼。簽名：`function(view: TView) => void` `view` 新的檢視。
openTo	'hours' \| 'minutes' \| 'seconds'	-	預設可見檢視。當元件檢視不受控制時使用。必須是來自 `views` 列表的有效選項。
orientation	'landscape' \| 'portrait'	-	強制以特定方向渲染。
reduceAnimations	bool	`@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` 符合 Android <10 或 iOS <13	若為 `true`，則停用繁重的動畫。
referenceDate	object	使用驗證 props 的最接近有效日期時間，除了像 `shouldDisable<...>` 這樣的回呼之外。	當 `value` 和 `defaultValue` 皆為空時，用於產生新值的日期。
shouldDisableTime	func	-	停用特定時間。簽名：`function(value: TDate, view: TimeView) => boolean` `value` 要檢查的值。 `view` timeValue 的時鐘類型。傳回值：若為 `true`，則時間將被停用。
slotProps	object	{}	用於每個元件 slot 的 props。
slots	object	{}	可覆寫的元件 slots。請參閱下方Slots API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
timezone	string	定義 `value` 或 `defaultValue` prop 的時區，否則為 'default'。	選擇用於值的時區。範例："default"、"system"、"UTC"、"America/New_York"。如果您將來自其他時區的值傳遞給某些 props，它們將在被使用前轉換為此時區。請參閱時區文件以取得更多詳細資訊。
value	object	-	選定的值。當元件受控制時使用。
view	'hours' \| 'minutes' \| 'seconds'	-	可見的檢視。當元件檢視受控制時使用。必須是來自 `views` 列表的有效選項。
viewRenderers	{ hours?: func, minutes?: func, seconds?: func }	-	為每個區段定義自訂檢視渲染器。若為 `null`，則區段將僅具有欄位編輯功能。若為 `undefined`，則將使用內部定義的檢視。
views	Array<'hours' \| 'minutes' \| 'seconds'>	-	可用的檢視。

ref 轉發到根元素。

Slots

Slot 名稱	預設元件	描述
actionBar	`PickersActionBar`	動作列的自訂元件，它放置在選擇器檢視下方。
layout		用於包裝版面配置的自訂元件。它包裝工具列、檢視、動作列和快捷鍵。
leftArrowIcon	`ArrowLeft`	顯示在左側檢視切換按鈕中的圖示。
nextIconButton	`IconButton`	允許切換到右側檢視的按鈕。
previousIconButton	`IconButton`	允許切換到左側檢視的按鈕。
rightArrowIcon	`ArrowRight`	顯示在右側檢視切換按鈕中的圖示。
shortcuts	`PickersShortcuts`	快捷鍵的自訂元件。
toolbar	`TimePickerToolbar`	在檢視上方渲染的工具列的自訂元件。

原始碼

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