跳到主要內容

DateTimeRangePickerAPI

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

示範

Import

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

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

Props

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

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

autoFocus布林值-

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

calendars1
| 2
| 3		1

要在桌面版上呈現的日曆數量。

closeOnSelect布林值桌面版為 true，行動版為 false（根據選擇的 wrapper 和 desktopModeMediaQuery 屬性）。

若為 true，則在提交完整日期後，彈出視窗或對話方塊將會關閉。

currentMonthCalendarPosition1
| 2
| 3		1

目前月份呈現的位置。

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

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

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

傳回值： 要顯示的名稱。

defaultRangePosition'end'
| 'start'		'start'

編輯日期範圍中的初始位置。當組件不受控制時使用。

defaultValueArray<object>-

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

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

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

disableAutoMonthSwitching布林值false

若為 true，則在選取 start 日期後，日曆將不會自動切換到 end 日期的月份。

disabled布林值false

若為 true，則選擇器和文字欄位會停用。

disableDragEditing布林值false

若為 true，則停用拖曳編輯日期。

disableFuture布林值false

若為 true，則停用日期組件的目前日期之後的值，時間組件的時間，以及日期時間組件的兩者。

disableHighlightToday布林值false

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

disableIgnoringDatePartForTimeValidation布林值false

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

disableOpenPicker布林值false

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

disablePast布林值false

若為 true，則停用日期組件的目前日期之前的值，時間組件的時間，以及日期時間組件的兩者。

displayWeekNumber布林值-

若為 true，則週數將會顯示在日曆中。

fixedWeekNumber數字-

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

format字串-

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

formatDensity'dense'
| 'spacious'		"dense"

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

inputRefref-

將 ref 傳遞至 input 元素。如果欄位有多個輸入，則會忽略。

label節點-

標籤內容。如果欄位有多個輸入，則會忽略。

loading布林值false

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

localeText物件-

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

maxDate物件2099-12-31

最大可選日期。

maxDateTime物件-

具有日期綁定的最大可選時間點，若要設定每天的最大時間，請使用 maxTime。

maxTime物件-

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

minDate物件1900-01-01

最小可選日期。

minDateTime物件-

具有日期綁定的最小可選時間點，若要設定每天的最小時間，請使用 minTime。

minTime物件-

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

minutesStep數字1

分鐘的步進值。

name字串-

欄位中 input 元素使用的 Name 屬性。如果欄位有多個輸入，則會忽略。

onAccept函式-

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

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

當值變更時觸發的回呼。

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

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

onError函式-

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

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

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

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

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

onRangePositionChange函式-

當範圍位置變更時觸發的回呼。

簽名：function(rangePosition: RangePosition) => void
  • rangePosition 新範圍位置。
onSelectedSectionsChange函式-

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

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

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

簽名：function(view: TView) => void
  • view 新檢視。
open布林值false

控制彈出視窗或對話方塊的開啟狀態。

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

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

rangePosition'end'
| 'start'		-

目前編輯的日期範圍中的位置。當組件位置受控制時使用。

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

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

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

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

renderLoading函式() => "..."

當 props.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，則不會選取任何區段。若未提供，則選取的區段將在內部處理。

    shouldDisableDate函式-

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

    簽名：function(day: TDate, position: string) => boolean
    • day 要測試的日期。
    • position 要測試的日期，'start' 或 'end'。

    傳回值： 若應停用日期，則傳回 true。

    shouldDisableTime函式-

    停用特定時間。

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

    傳回值： 若為 true，則將停用時間。

    showDaysOutsideCurrentMonth布林值false

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

    skipDisabled布林值false

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

    slotProps物件{}

    用於每個組件插槽的 props。

    slots物件{}

    可覆寫的組件插槽。

    請參閱下方的插槽 API 以瞭解更多詳細資訊。

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

    系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

    請參閱 `sx` 頁面 以瞭解更多詳細資訊。

    thresholdToRenderTimeInASingleColumn數字24

    單欄時間呈現器使用的時間選項數量下限或上限。

    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。

    timezone字串已定義 value 或 defaultValue prop 的時區，否則為 'default'。

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

    請參閱 時區文件 以瞭解更多詳細資訊。

    valueArray<object>-

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

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

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

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

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

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

    可用的檢視。

    ref 會轉發到根元素。

    插槽

    插槽名稱類別名稱預設組件描述
    actionBarPickersActionBar動作列的自訂組件，放置在選擇器檢視下方。
    calendarHeaderPickersCalendarHeader日曆標題的自訂組件。請查看 PickersCalendarHeader 組件。
    clearButtonIconButton用於清除值的按鈕。
    clearIconClearIcon要在清除按鈕內顯示的圖示。
    dayDateRangePickersDay範圍選擇器中日期的自訂組件。請查看 DateRangePickersDay 組件。
    desktopPaperPickersPopperPaper在桌面版選擇器的 Popper 內呈現的紙張自訂組件。
    desktopTransition當 reduceAnimations 為 true 時，從 '@mui/material' 成長或淡出。桌面版 popper 的自訂組件 Transition。
    desktopTrapFocus來自 '@mui/material' 的 TrapFocus。用於在桌面版上將焦點鎖定在檢視內的自訂組件。
    dialogPickersModalDialogRoot在行動版上呈現檢視的對話方塊自訂組件。
    digitalClockItem來自 '@mui/material' 的 MenuItem負責呈現單一數位時鐘項目的組件。
    digitalClockSectionItem來自 '@mui/material' 的 MenuItem負責呈現單一多區段數位時鐘區段項目的組件。
    field
    fieldRoot在根目錄呈現的元素。如果欄位只有一個輸入，則會忽略。
    fieldSeparator在兩個輸入之間呈現的元素。如果欄位只有一個輸入，則會忽略。
    layout用於包裝版面配置的自訂組件。它包裝了工具列、檢視、動作列和快捷鍵。
    leftArrowIconArrowLeft在左側檢視切換按鈕中顯示的圖示。
    mobilePaper來自 '@mui/material' 的 Paper。在行動版選擇器的對話方塊內呈現的紙張自訂組件。
    mobileTransition來自 '@mui/material' 的 Fade。行動版對話方塊的自訂組件 Transition。
    nextIconButtonIconButton允許切換到右側檢視的按鈕。
    popper來自 '@mui/material' 的 Popper。在桌面版上呈現檢視的 popper 自訂組件。
    previousIconButtonIconButton允許切換到左側檢視的按鈕。
    rightArrowIconArrowRight在右側檢視切換按鈕中顯示的圖示。
    shortcutsPickersShortcuts快捷鍵的自訂組件。
    switchViewButtonIconButton顯示用於在不同日曆檢視之間切換的按鈕。
    switchViewIconArrowDropDown在 SwitchViewButton 中顯示的圖示。當開啟的檢視為 year 時旋轉 180°。
    tabsDateTimeRangePickerTabs啟用在日期和時間選擇器之間切換的分頁。
    textField來自 '@mui/material' 的 TextField 或 PickersTextField（若 enableAccessibleFieldDOMStructure 為 true）。具有輸入的表單控制項，用於在預設欄位內呈現日期或時間。它會呈現兩次：一次用於開始元素，一次用於結束元素。
    toolbarDateTimeRangePickerToolbar在檢視上方呈現的工具列自訂組件。

    原始碼

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