跳到內容

DesktopDateRangePickerAPI

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

示範

Import

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

透過閱讀此關於最小化套件大小的指南，瞭解它們之間的差異。

Props

名稱類型預設值描述
autoFocusbool-

如果 true，則主要元素會在首次掛載期間取得焦點。此主要元素為：- 可見視圖所選取的元素（如果有的話）（即：day 視圖上選取的日期）。- 如果有渲染欄位，則為 input 元素。

calendars1
| 2
| 3		2

要在桌面版上渲染的日曆數量。

closeOnSelectbool桌面上為 true，行動裝置上為 false（基於選取的包裝函式和 desktopModeMediaQuery 屬性）。

如果 true，則在提交完整日期後，快顯視窗或模式視窗將會關閉。

currentMonthCalendarPosition1
| 2
| 3		1

目前月份在其中渲染的日曆位置。

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

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

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

傳回值： 要顯示的名稱。

defaultRangePosition'end'
| 'start'		'start'

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

defaultValueArray<object>-

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

disableAutoMonthSwitchingboolfalse

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

disabledboolfalse

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

disableDragEditingboolfalse

如果 true，則停用拖曳編輯日期。

disableFutureboolfalse

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

disableHighlightTodayboolfalse

如果 true，則今天的日期將在不使用圓圈醒目提示的情況下渲染。

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

最大可選日期。

minDateobject1900-01-01

最小可選日期。

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 與錯誤關聯的值。
onMonthChangefunc-

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

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

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

onRangePositionChangefunc-

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

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

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

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

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

rangePosition'end'
| 'start'		-

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

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

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

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

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

renderLoadingfunc() => "..."

當 props.loading 為 true 時，在「day」視圖上渲染的元件。

簽名：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, position: string) => boolean
    • day 要測試的日期。
    • position 要測試的日期，'start' 或 'end'。

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

    showDaysOutsideCurrentMonthboolfalse

    如果 true，則會渲染目前月份之外的日期
    - 如果定義了 fixedWeekNumber，則渲染日期以符合要求的週數。
    - 如果未定義 fixedWeekNumber，則渲染日期以填滿目前月份的第一週和最後一週。
    - 如果範圍選擇器上的 calendars 等於多個 1，則會忽略。

    slotPropsobject{}

    用於每個元件插槽的 props。

    slotsobject{}

    可覆寫的元件插槽。

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

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

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

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

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

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

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

    valueArray<object>-

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

    viewRenderers{ day?: func }-

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

    ref 會轉發到根元素。

    插槽

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

    原始碼

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