DateRangeCalendarAPI

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

示範

如需此 React 組件的使用範例與詳細資訊，請造訪組件示範頁面

匯入

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

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

Props

原生組件的 Props 也可用。

名稱	類型	預設值	描述
autoFocus	bool	-	若為 `true`，則主要元素會在首次掛載時獲得焦點。此主要元素為： - 可見檢視所選取的元素（若有的話）（亦即：`day` 檢視中選取的日期）。 - 若有呈現欄位，則為 `input` 元素。
availableRangePositions	Array<'end' \| 'start'>	['start', 'end']	可用於選取的範圍位置。此清單會在檢查是否可以選取下一個範圍位置時進行檢查。用於具有目前 `rangePosition` 的日期時間範圍選擇器，以在僅選取一個範圍位置後強制執行 `finish` 選取。
calendars	1 \| 2 \| 3	2	要呈現的日曆數量。
classes	object	-	覆寫或擴充套用至組件的樣式。請參閱下方的 CSS 類別 API 以取得更多詳細資訊。
currentMonthCalendarPosition	1 \| 2 \| 3	1	目前月份呈現所在的位置。
dayOfWeekFormatter	func	(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()	格式化日曆標題中顯示的星期幾。簽名：`function(date: TDate) => string` `date` 轉接器提供的星期幾日期。傳回值：要顯示的名稱。
defaultRangePosition	'end' \| 'start'	'start'	編輯日期範圍中的初始位置。當組件不受控制時使用。
defaultValue	Array<object>	-	預設選取值。當組件不受控制時使用。
disableAutoMonthSwitching	bool	false	若為 `true`，則在選取 `start` 日期後，日曆將不會自動切換至 `end` 日期的月份。
disabled	bool	false	若為 `true`，則停用選擇器和文字欄位。
disableDragEditing	bool	false	若為 `true`，則停用拖曳編輯日期。
disableFuture	bool	false	若為 `true`，則停用日期組件的目前日期之後的值、時間組件的時間以及日期時間組件的兩者。
disableHighlightToday	bool	false	若為 `true`，則今天的日期在呈現時不會以圓圈醒目提示。
disablePast	bool	false	若為 `true`，則停用日期組件的目前日期之前的值、時間組件的時間以及日期時間組件的兩者。
displayWeekNumber	bool	-	若為 `true`，則週數將顯示在日曆中。
fixedWeekNumber	number	-	日期檢視將顯示當月結束後所需的週數，以符合此值。設定為 6 可在格里曆中固定週數
focusedView	'day'	-	受控制的焦點檢視。
loading	bool	false	若為 `true`，則呼叫 `renderLoading` 而不是呈現日期日曆。可用於預先載入資訊並在日曆中顯示。
maxDate	object	2099-12-31	可選取的最晚日期。
minDate	object	1900-01-01	可選取的最早日期。
onChange	func	-	值變更時觸發的回呼。簽名：`function(value: TValue, selectionState: PickerSelectionState \| undefined, selectedView: TView \| undefined) => void` `value` 新值。 `selectionState` 指示日期選取是否完成。 `selectedView` 指示進行選取的檢視。
onFocusedViewChange	func	-	焦點檢視變更時觸發的回呼。簽名：`function(view: TView, hasFocus: boolean) => void` `view` 要聚焦或不聚焦的新檢視。 `hasFocus` 若檢視應聚焦，則為 `true`。
onMonthChange	func	-	月份變更時觸發的回呼。簽名：`function(month: TDate) => void` `month` 新月份。
onRangePositionChange	func	-	範圍位置變更時觸發的回呼。簽名：`function(rangePosition: RangePosition) => void` `rangePosition` 新範圍位置。
onViewChange	func	-	檢視變更時觸發的回呼。簽名：`function(view: TView) => void` `view` 新檢視。
openTo	'day'	-	預設可見檢視。當組件檢視不受控制時使用。必須是 `views` 清單中的有效選項。
rangePosition	'end' \| 'start'	-	目前編輯的日期範圍中的位置。當組件位置受控制時使用。
readOnly	bool	false	使選擇器成為唯讀。
reduceAnimations	bool	`@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` 符合 Android <10 或 iOS <13	若為 `true`，則停用大量動畫。
referenceDate	object	使用驗證 props 的最接近有效日期，回呼（例如 `shouldDisableDate`）除外。	當 `value` 和 `defaultValue` 皆為空時，用於產生新值的日期。
renderLoading	func	() => "..."	當 `props.loading` 為 true 時，在「日期」檢視上呈現的組件。簽名：`function() => React.ReactNode` 傳回值：載入時要呈現的節點。
shouldDisableDate	func	-	停用特定日期。警告：此函式可能會被呼叫多次（例如，當呈現日期日曆、檢查焦點是否可以移至特定日期等）。昂貴的計算可能會影響效能。簽名：`function(day: TDate, position: string) => boolean` `day` 要測試的日期。 `position` 要測試的日期，'start' 或 'end'。傳回值：若應停用日期，則傳回 `true`。
showDaysOutsideCurrentMonth	bool	false	若為 `true`，則會呈現目前月份以外的日期 - 若已定義 `fixedWeekNumber`，則會呈現日期以符合要求的週數。 - 若未定義 `fixedWeekNumber`，則會呈現日期以填滿當月的第一週和最後一週。 - 若 `calendars` 在範圍選擇器上等於超過 `1`，則會忽略。
slotProps	object	{}	用於每個組件插槽的 props。
slots	object	{}	可覆寫的組件插槽。請參閱下方的插槽 API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
timezone	string	定義 `value` 或 `defaultValue` prop 的時區，否則為 'default'。	選擇要用於值的時區。範例："default"、"system"、"UTC"、"America/New_York"。若您將來自其他時區的值傳遞至某些 props，則這些值會在用於之前轉換為此時區。請參閱時區文件以取得更多詳細資訊。
value	Array<object>	-	選取的值。當組件受控制時使用。
view	'day'	-	可見檢視。當組件檢視受控制時使用。必須是 `views` 清單中的有效選項。
views	Array<'day'>	-	可用的檢視。

ref 會轉發至根元素。

主題預設 props

您可以使用 MuiDateRangeCalendar 透過主題變更此組件的預設 props。

插槽

插槽名稱	預設組件	描述
calendarHeader	`PickersCalendarHeader`	日曆標題的自訂組件。請查看 PickersCalendarHeader 組件。
day	`DateRangePickersDay`	範圍選擇器中日期的自訂組件。請查看 DateRangePickersDay 組件。
leftArrowIcon	`ArrowLeft`	在左側檢視切換按鈕中顯示的圖示。
nextIconButton	`IconButton`	允許切換至右側檢視的按鈕。
previousIconButton	`IconButton`	允許切換至左側檢視的按鈕。
rightArrowIcon	`ArrowRight`	在右側檢視切換按鈕中顯示的圖示。
switchViewButton	`IconButton`	顯示以在不同日曆檢視之間切換的按鈕。
switchViewIcon	`ArrowDropDown`	在 SwitchViewButton 中顯示的圖示。當開啟的檢視為 `year` 時旋轉 180°。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時套用至組件的插槽。

類別名稱	規則名稱	描述
.MuiDateRangeCalendar-dayDragging	dayDragging	拖曳時套用至日期日曆容器的樣式
.MuiDateRangeCalendar-monthContainer	monthContainer	套用至月份容器的樣式。
.MuiDateRangeCalendar-root	root	套用至根元素的樣式。

您可以使用下列其中一個自訂選項覆寫組件的樣式

使用全域類別名稱。
使用規則名稱作為自訂主題中組件的 styleOverrides 屬性的一部分。

原始碼

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