跳到主要內容

DateTimePickerAPI

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

示範

匯入

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

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

Props

名稱類型預設值描述
ampm布林值utils.is12HourCycleInCurrentLocale()

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

ampmInClock布林值桌上型電腦為 true，行動裝置為 false

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

autoFocus布林值-

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

closeOnSelect布林值桌上型電腦為 true，行動裝置為 false（根據選取的包裝函式和 desktopModeMediaQuery 屬性）。

如果為 true，彈出視窗或模式視窗將在提交完整日期後關閉。

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

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

簽名：function(date: TDate) => string
  • date 星期幾的日期，由 adapter 提供。

傳回： 要顯示的名稱。

defaultValue物件-

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

desktopModeMediaQuery字串'@media (pointer: fine)'

當 Mobile 模式將變更為 Desktop 時的 CSS 媒體查詢。

disabled布林值布林值

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

disableFuture布林值布林值

布林值

disableHighlightToday布林值布林值

布林值

disableIgnoringDatePartForTimeValidation布林值布林值

布林值

disableOpenPicker布林值布林值

布林值

disablePast布林值布林值

布林值

displayWeekNumber布林值-

布林值

fixedWeekNumber數字-

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

format字串-

字串

formatDensity字串
| 'spacious'		"dense"

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

inputRefref-

將 ref 傳遞至 input 元素。

label節點-

標籤內容。

loading布林值布林值

布林值

localeText物件-

物件

maxDate物件2099-12-31

物件

maxDateTime物件-

物件

maxTime物件-

物件

minDate物件1900-01-01

物件

minDateTime物件-

物件

minTime物件-

物件

minutesStep數字1

數字

monthsPerRow3
數字		3

| 4

name字串-

字串

onAccept函式-

函式

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

函式

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

函式

onError函式-

函式

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

函式

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

函式

onSelectedSectionsChange函式-

函式

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

函式

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

函式

簽名：function(year: TDate) => void
  • year 新年份。
open布林值布林值

布林值

openTo字串
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'		-

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

orientation字串
| 'portrait'		-

強制以特定方向呈現。

reduceAnimations布林值布林值

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

referenceDate物件物件

當 value 和 defaultValue 皆為空時，用於產生新值的最接近有效日期時間。

renderLoading函式func

當傳遞 loading true 時顯示的元件。

簽名：function() => React.ReactNode

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

    selectedSections字串
    | 'day'
    | 'empty'
    | 'hours'
    | 'meridiem'
    | 'minutes'
    | 'month'
    | 'seconds'
    | 'weekDay'
    | 'year'
    | 數字    		-

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

    shouldDisableDate函式-

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

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

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

    shouldDisableMonth函式-

    func

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

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

    shouldDisableTime函式-

    func

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

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

    shouldDisableYear函式-

    func

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

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

    showDaysOutsideCurrentMonth布林值布林值

    布林值
    - 如果定義了 fixedWeekNumber，則呈現天數以符合要求的週數。
    - 如果未定義 fixedWeekNumber，則呈現天數以填滿當前月份的第一週和最後一週。
    - 如果 calendars 在範圍選擇器上等於多個 1，則會忽略。

    skipDisabled布林值布林值

    布林值

    slotProps物件{}

    物件

    slots物件{}

    物件

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

    sxArray<func
    | 物件
    | 布林值>
    | 函式
    | 物件    		-

    系統屬性，可讓您定義系統覆寫以及其他 CSS 樣式。

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

    thresholdToRenderTimeInASingleColumn數字24

    數字

    timeSteps物件{ hours: 1, minutes: 5, seconds: 5 }

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

    timezone字串字串

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

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

    value物件-

    物件

    view字串
    | 'hours'
    | 'meridiem'
    | 'minutes'
    | 'month'
    | 'seconds'
    | 'year'    		-

    字串

    viewRenderers物件-

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

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

    可用的檢視。

    yearsOrder字串
    | 'desc'    		字串

    年份預設以升序（依時間順序）顯示。如果為 desc，則年份以降序顯示。

    yearsPerRow3
    數字    		數字

    桌上型電腦為 4，行動裝置為 3

    ref 會轉發到根元素。

    Slots

    插槽名稱類別名稱預設元件描述
    actionBarPickersActionBar動作列的自訂元件，它放置在選擇器檢視下方。
    calendarHeaderPickersCalendarHeader日曆標題的自訂元件。檢查 PickersCalendarHeader 元件。
    clearButtonIconButton用於清除值的按鈕。
    clearIconClearIcon在清除按鈕內顯示的圖示。
    dayPickersDay日的自訂元件。檢查 PickersDay 元件。
    desktopPaperPickersPopperPaper用於在桌上型電腦選擇器的 Popper 內呈現的紙張的自訂元件。
    desktopTransitionGrow 或 Fade，來自 '@mui/material'，當 `reduceAnimations` 為 `true` 時。用於桌上型電腦 popper Transition 的自訂元件。
    desktopTrapFocusTrapFocus，來自 '@mui/material'。用於在桌上型電腦上將焦點鎖定在檢視內的自訂元件。
    dialogPickersModalDialogRoot用於在其中呈現行動裝置上檢視的對話方塊的自訂元件。
    digitalClockItemMenuItem，來自 '@mui/material'負責呈現單一數位時鐘項目的元件。
    digitalClockSectionItemMenuItem，來自 '@mui/material'負責呈現單一多區段數位時鐘區段項目的元件。
    field字串
    inputAdornmentInputAdornment在開始或結束輸入裝飾上顯示的元件，用於在桌上型電腦上開啟選擇器。
    layout版面配置的自訂元件。它包裝工具列、檢視、動作列和快捷鍵。
    leftArrowIconArrowLeft在左側檢視切換按鈕中顯示的圖示。
    mobilePaperPaper，來自 '@mui/material'。用於在行動裝置選擇器的對話方塊內呈現的紙張的自訂元件。
    mobileTransitionFade，來自 '@mui/material'。用於行動裝置對話方塊 Transition 的自訂元件。
    monthButtonMonthCalendarButton顯示以在 month 檢視中呈現單一月份的按鈕。
    nextIconButtonIconButton允許切換到正確檢視的按鈕。
    openPickerButtonIconButton用於在桌上型電腦上開啟選擇器的按鈕。
    openPickerIcon在桌上型電腦上的開啟選擇器按鈕中顯示的圖示。
    popperPopper，來自 '@mui/material'。用於在其中呈現桌上型電腦上檢視的 popper 的自訂元件。
    previousIconButtonIconButton允許切換到左側檢視的按鈕。
    rightArrowIconArrowRight在右側檢視切換按鈕中顯示的圖示。
    shortcutsPickersShortcuts快捷鍵的自訂元件。
    switchViewButtonIconButton顯示以在不同日曆檢視之間切換的按鈕。
    switchViewIconArrowDropDown在 SwitchViewButton 中顯示的圖示。當開啟的檢視為 year 時旋轉 180°。
    tabsDateTimePickerTabs啟用在日期和時間選擇器之間切換的分頁。
    textFieldTextField，來自 '@mui/material'，或 PickersTextField（如果 `enableAccessibleFieldDOMStructure` 為 `true`）。具有輸入的表單控制項，可在預設欄位內呈現值。
    toolbarDateTimePickerToolbar在檢視上方呈現的工具列的自訂元件。
    yearButtonYearCalendarButton顯示以在 year 檢視中呈現單一年份的按鈕。

    原始碼

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