跳到主要內容

MobileTimePickerAPI

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

示範

匯入

import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
// or
import { MobileTimePicker } from '@mui/x-date-pickers';
// or
import { MobileTimePicker } 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-

Field 中 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'
| '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，則會停用時間。

slotPropsobject{}

用於每個元件 slot 的 props。

slotsobject{}

可覆寫的元件 slot。

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

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

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

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

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

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

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

valueobject-

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

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

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

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

為每個區段定義自訂檢視轉譯器。若為 null，則區段將僅具有欄位編輯。若為 undefined，則會使用內部定義的檢視。

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

可用的檢視。

ref 轉發至根元素。

Slots

Slot 名稱類別名稱預設元件描述
actionBarPickersActionBar動作列的自訂元件，放置於選擇器檢視下方。
dialogPickersModalDialogRoot用於對話方塊的自訂元件，檢視會在行動裝置上於其中呈現。
field用於使用鍵盤輸入日期的元件。
layout用於包裝版面配置的自訂元件。它會包裝工具列、檢視、動作列和快捷方式。
leftArrowIconArrowLeft顯示於左側檢視切換按鈕中的圖示。
mobilePaper來自 '@mui/material' 的 Paper。用於行動裝置選擇器 Dialog 內呈現的 paper 的自訂元件。
mobileTransition來自 '@mui/material' 的 Fade。用於行動裝置對話方塊 Transition 的自訂元件。
nextIconButtonIconButton允許切換至右側檢視的按鈕。
previousIconButtonIconButton允許切換至左側檢視的按鈕。
rightArrowIconArrowRight顯示於右側檢視切換按鈕中的圖示。
shortcutsPickersShortcuts快捷方式的自訂元件。
textField來自 '@mui/material' 的 TextField 或 PickersTextField（若 `enableAccessibleFieldDOMStructure` 為 `true`）。具有輸入的表單控制項，可在預設欄位內呈現值。
toolbarTimePickerToolbar呈現於檢視上方的工具列的自訂元件。

原始碼

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