跳到內容

DateRangePickerAPI

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

示範

匯入

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

請閱讀這份關於最小化 bundle size 的指南，以瞭解差異。

Props

名稱類型預設值描述
autoFocusbool-

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

calendars1
| 2
| 3		2

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

closeOnSelectbool桌面版為 true，行動版為 false（基於所選的 wrapper 和 desktopModeMediaQuery prop）。

若為 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>-

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

desktopModeMediaQuerystring'@media (pointer: fine)'

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

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-

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 參數包含非空值。這可用於渲染適當的表單錯誤。

簽名：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。用於在桌面版上將焦點鎖定在視圖內的自訂元件。
    dialogPickersModalDialogRoot在行動版上渲染視圖的對話方塊的自訂元件。
    field
    fieldRoot在根部渲染的元素。如果欄位只有一個輸入，則忽略。
    fieldSeparator在兩個輸入之間渲染的元素。如果欄位只有一個輸入，則忽略。
    layout用於包裝佈局的自訂元件。它包裝了工具列、視圖、動作列和快捷鍵。
    leftArrowIconArrowLeft顯示在左視圖切換按鈕中的圖示。
    mobilePaper來自 '@mui/material' 的 Paper。在行動版選擇器的 Dialog 內渲染的紙張的自訂元件。
    mobileTransition來自 '@mui/material' 的 Fade。行動版對話方塊 Transition 的自訂元件。
    nextIconButtonIconButton允許切換到右側視圖的按鈕。
    popper來自 '@mui/material' 的 Popper。在桌面版上渲染視圖的 Popper 的自訂元件。
    previousIconButtonIconButton允許切換到左側視圖的按鈕。
    rightArrowIconArrowRight顯示在右視圖切換按鈕中的圖示。
    shortcutsPickersShortcuts快捷鍵的自訂元件。
    switchViewButtonIconButton顯示用於在不同日曆視圖之間切換的按鈕。
    switchViewIconArrowDropDown顯示在 SwitchViewButton 中的圖示。當開啟的視圖為 year 時旋轉 180°。
    textField來自 '@mui/material' 的 TextField 或 PickersTextField（若 enableAccessibleFieldDOMStructure 為 true）。表單控制項，具有一個輸入，用於在預設欄位內渲染日期或時間。它會渲染兩次：一次用於開始元素，一次用於結束元素。
    toolbarDateTimePickerToolbar在視圖上方渲染的工具列的自訂元件。

    原始碼

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