跳到主要內容

DesktopTimePickerAPI

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

示範

導入

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

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

Props

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

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

ampmInClockbool在桌面上為 true，在行動裝置上為 false

在時鐘下方（而不是在工具列中）顯示 ampm 控制項。

autoFocusbool-

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

closeOnSelectbool桌面上為 true，行動裝置上為 false（根據選擇的包裝函式和 desktopModeMediaQuery prop）。

如果為 true，則在提交完整日期後，快顯視窗或對話框將會關閉。

defaultValueobject-

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

disabledboolfalse

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

disableFutureboolfalse

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

disableIgnoringDatePartForTimeValidationboolfalse

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

disableOpenPickerboolfalse

如果為 true，則不會呈現開啟選擇器按鈕（僅呈現欄位）。

disablePastboolfalse

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

formatstring-

在輸入中呈現時的日期格式。預設為根據使用的 views 本地化的格式。

formatDensity'dense'
| 'spacious'		"dense"

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

inputRefref-

將 ref 傳遞至 input 元素。

labelnode-

標籤內容。

localeTextobject-

元件文字的地區設定。允許覆寫來自 LocalizationProvider 和 theme 的文字。

maxTimeobject-

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

minTimeobject-

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

minutesStepnumber1

分鐘的步進。

namestring-

欄位中 input 元素使用的 Name 屬性。

onAcceptfunc-

在值被接受時觸發的回呼。

簽名：function(value: TValue, context: FieldChangeHandlerContext) => void
  • value 剛被接受的值。
  • context 包含目前值驗證結果的情境。
onChangefunc-

在值變更時觸發的回呼。

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

在快顯視窗請求關閉時觸發的回呼。在受控模式中使用（請參閱 open）。

onErrorfunc-

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

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

在快顯視窗請求開啟時觸發的回呼。在受控模式中使用（請參閱 open）。

onSelectedSectionsChangefunc-

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

簽名：function(newValue: FieldSelectedSections) => void
  • newValue 新的選取區塊。
onViewChangefunc-

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

簽名：function(view: TView) => void
  • view 新的檢視。
openboolfalse

控制快顯視窗或對話框的開啟狀態。

openTo'hours'
| 'meridiem'
| 'minutes'
| 'seconds'		-

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

orientation'landscape'
| 'portrait'		-

強制以特定方向呈現。

reduceAnimationsbool`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` 符合 Android <10 或 iOS <13

如果為 true，則停用繁重的動畫。

referenceDateobject使用驗證 props 的最接近有效日期時間，除了像 shouldDisable<...> 之類的回呼。

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

selectedSections'all'
| 'day'
| 'empty'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number		-

目前選取的區塊。此 prop 接受四種格式： 1. 如果提供數字，則會選取此索引處的區塊。 2. 如果提供 FieldSectionType 類型的字串，則會選取第一個具有該名稱的區塊。 3. 如果提供 "all"，則會選取所有區塊。 4. 如果提供 null，則不會選取任何區塊。如果未提供，則選取的區塊將在內部處理。

shouldDisableTimefunc-

停用特定時間。

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

傳回： 如果為 true，則時間將被停用。

skipDisabledboolfalse

如果為 true，則不會呈現已停用的數位時鐘項目。

slotPropsobject{}

用於每個元件插槽的 props。

slotsobject{}

可覆寫的元件插槽。

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

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

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

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

thresholdToRenderTimeInASingleColumnnumber24

使用單欄時間渲染器的時間選項數量之下或之上的臨界值。

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

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

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

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

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

valueobject-

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

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

可見檢視。當元件檢視受控制時使用。必須是 views 清單中的有效選項。

viewRenderers{ hours?: func, meridiem?: func, minutes?: func, seconds?: func }-

為每個區塊定義自訂檢視渲染器。如果為 null，則區塊將僅具有欄位編輯。如果為 undefined，將使用內部定義的檢視。

viewsArray<'hours'
| 'minutes'
| 'seconds'>		-

可用的檢視。

ref 會轉發到根元素。

插槽

插槽名稱類別名稱預設元件描述
actionBarPickersActionBar動作列的自訂元件，它放置在選擇器檢視下方。
clearButtonIconButton用於清除值的按鈕。
clearIconClearIcon用於在清除按鈕內顯示的圖示。
desktopPaperPickersPopperPaper用於在桌面選擇器的 Popper 內呈現的紙張的自訂元件。
desktopTransition當 reduceAnimations 為 true 時，從 '@mui/material' 成長或淡入淡出。用於桌面 popper Transition 的自訂元件。
desktopTrapFocus來自 '@mui/material' 的 TrapFocus。用於在桌面上將焦點鎖定在檢視內的自訂元件。
digitalClockItem來自 '@mui/material' 的 MenuItem負責呈現單個數位時鐘項目的元件。
digitalClockSectionItem來自 '@mui/material' 的 MenuItem負責呈現單個多區塊數位時鐘區塊項目的元件。
field用於使用鍵盤輸入日期的元件。
inputAdornmentInputAdornment在啟動或結束輸入裝飾上顯示的元件，用於在桌面上開啟選擇器。
layout用於包裝版面配置的自訂元件。它包裝工具列、檢視、動作列和快捷方式。
leftArrowIconArrowLeft在左側檢視切換按鈕中顯示的圖示。
nextIconButtonIconButton允許切換到右側檢視的按鈕。
openPickerButtonIconButton用於在桌面上開啟選擇器的按鈕。
openPickerIcon在桌面上開啟選擇器按鈕中顯示的圖示。
popper來自 '@mui/material' 的 Popper。用於在其中呈現桌面檢視的 popper 的自訂元件。
previousIconButtonIconButton允許切換到左側檢視的按鈕。
rightArrowIconArrowRight在右側檢視切換按鈕中顯示的圖示。
shortcutsPickersShortcuts快捷方式的自訂元件。
textField來自 '@mui/material' 的 TextField 或 PickersTextField（如果 enableAccessibleFieldDOMStructure 為 true）。具有輸入的表單控制項，用於在預設欄位內呈現值。
toolbarTimePickerToolbar在檢視上方呈現的工具列的自訂元件。

原始碼

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