跳到主要內容

MobileDateTimePickerAPI

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

範例

匯入

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

閱讀這篇關於最小化 bundle size 的指南，以了解差異。

Props

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

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

ampmInClockbool桌面版為 true，行動版為 false

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

autoFocusbool-

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

closeOnSelectbool桌面版為 true，行動版為 false（根據選取的 wrapper 和 desktopModeMediaQuery prop）。

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

dayOfWeekFormatterfunc(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

格式化日曆標題中顯示的星期幾。

簽名：function(date: TDate) => string
  • date 轉接器提供的星期幾的日期。

傳回值： 要顯示的名稱。

defaultValueobject-

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

disabledboolfalse

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

disableFutureboolfalse

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

disableHighlightTodayboolfalse

如果為 true，則今天的日期在呈現時不會以圓圈醒目提示。

disableIgnoringDatePartForTimeValidationboolfalse

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

disableOpenPickerboolfalse

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

disablePastboolfalse

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

displayWeekNumberbool-

如果為 true，則會在日曆中顯示週數。

fixedWeekNumbernumber-

日期檢視將在目前月份結束後顯示所需週數，以符合此值。設定為 6 可在格里曆中擁有固定週數

formatstring-

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

formatDensity'dense'
| 'spacious'		"dense"

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

inputRefref-

將 ref 傳遞至 input 元素。

labelnode-

標籤內容。

loadingboolfalse

如果為 true，則呼叫 renderLoading 而非呈現日期日曆。可用於預先載入資訊並在日曆中顯示。

localeTextobject-

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

maxDateobject2099-12-31

最大可選日期。

maxDateTimeobject-

最大可選時間點，與日期繫結，若要設定每天的最大時間，請使用 maxTime。

maxTimeobject-

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

minDateobject1900-01-01

最小可選日期。

minDateTimeobject-

最小可選時間點，與日期繫結，若要設定每天的最小時間，請使用 minTime。

minTimeobject-

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

minutesStepnumber1

分鐘間隔。

monthsPerRow3
| 4		3

每列呈現的月份數。

namestring-

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

onAcceptfunc-

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

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

當值變更時觸發的回呼。

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

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

onErrorfunc-

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

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

在月份變更時觸發的回呼。

簽名：function(month: TDate) => void
  • month 新月份。
onOpenfunc-

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

onSelectedSectionsChangefunc-

當選取的區段變更時觸發的回呼。

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

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

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

在年份變更時觸發的回呼。

簽名：function(year: TDate) => void
  • year 新年份。
openboolfalse

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

openTo'day'
| 'hours'
| 'minutes'
| 'month'
| 'seconds'
| 'year'		-

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

orientation'landscape'
| 'portrait'		-

強制以特定方向呈現。

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

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

referenceDateobject使用驗證 props 的最接近有效日期時間，但 shouldDisable<...> 等回呼除外。

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

renderLoadingfunc() => <span>...</span>

傳遞 loading true 時顯示的元件。

簽名：function() => React.ReactNode

    傳回值： 載入時要呈現的節點。

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

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

    shouldDisableDatefunc-

    停用特定日期。
    警告：此函式可能會被多次呼叫（例如，當呈現日期日曆、檢查焦點是否可以移至特定日期等時）。昂貴的運算可能會影響效能。

    簽名：function(day: TDate) => boolean
    • day 要測試的日期。

    傳回值： 如果為 true，則停用日期。

    shouldDisableMonthfunc-

    停用特定月份。

    簽名：function(month: TDate) => boolean
    • month 要測試的月份。

    傳回值： 如果為 true，則停用月份。

    shouldDisableTimefunc-

    停用特定時間。

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

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

    shouldDisableYearfunc-

    停用特定年份。

    簽名：function(year: TDate) => boolean
    • year 要測試的年份。

    傳回值： 如果為 true，則停用年份。

    showDaysOutsideCurrentMonthboolfalse

    如果為 true，則會呈現目前月份以外的日期
    - 如果已定義 fixedWeekNumber，則呈現日期以符合要求的週數。
    - 如果未定義 fixedWeekNumber，則呈現日期以填滿目前月份的第一週和最後一週。
    - 如果範圍選擇器上的 calendars 大於 1，則會忽略。

    slotPropsobject{}

    用於每個元件 slot 的 props。

    slotsobject{}

    可覆寫的元件 slot。

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

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

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

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

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

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

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

    valueobject-

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

    view'day'
    | 'hours'
    | 'minutes'
    | 'month'
    | 'seconds'
    | 'year'    		-

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

    viewRenderers{ day?: func, hours?: func, minutes?: func, month?: func, seconds?: func, year?: func }-

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

    viewsArray<'day'
    | 'hours'
    | 'minutes'
    | 'month'
    | 'seconds'
    | 'year'>    		-

    可用的檢視。

    yearsOrder'asc'
    | 'desc'    		'asc'

    預設情況下，年份以遞增（時間順序）順序顯示。如果為 desc，則年份以遞減順序顯示。

    yearsPerRow3
    | 4    		3

    每列呈現的年份數。

    ref 會轉發到根元素。

    插槽

    插槽名稱類別名稱預設元件描述
    actionBarPickersActionBar動作列的自訂元件，位於選擇器檢視下方。
    calendarHeaderPickersCalendarHeader日曆標題的自訂元件。請查看 PickersCalendarHeader 元件。
    dayPickersDay日期的自訂元件。請查看 PickersDay 元件。
    dialogPickersModalDialogRoot對話方塊的自訂元件，檢視會在行動裝置上於其中呈現。
    field用於使用鍵盤輸入日期的元件。
    layout用於包裝版面的自訂元件。它會包裝工具列、檢視、動作列和捷徑。
    leftArrowIconArrowLeft在左檢視切換按鈕中顯示的圖示。
    mobilePaper來自 '@mui/material' 的 Paper。紙張的自訂元件，在行動裝置選擇器的對話方塊內呈現。
    mobileTransition來自 '@mui/material' 的 Fade。行動裝置對話方塊 Transition 的自訂元件。
    monthButtonMonthCalendarButton顯示以在 month 檢視中呈現單一月份的按鈕。
    nextIconButtonIconButton允許切換到右檢視的按鈕。
    previousIconButtonIconButton允許切換到左檢視的按鈕。
    rightArrowIconArrowRight在右檢視切換按鈕中顯示的圖示。
    shortcutsPickersShortcuts捷徑的自訂元件。
    switchViewButtonIconButton顯示以在不同日曆檢視之間切換的按鈕。
    switchViewIconArrowDropDown在 SwitchViewButton 中顯示的圖示。當開啟的檢視為 year 時，旋轉 180°。
    tabsDateTimePickerTabs啟用在日期和時間選擇器之間切換的索引標籤。
    textField來自 '@mui/material' 的 TextField 或 PickersTextField（如果 enableAccessibleFieldDOMStructure 為 true）。表單控制項，具有一個輸入欄位，可在預設欄位內呈現值。
    toolbarDateTimePickerToolbar工具列的自訂元件，在檢視上方呈現。
    yearButtonYearCalendarButton顯示以在 year 檢視中呈現單一年份的按鈕。

    原始碼

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