DateRangePickerDayAPI

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

示範

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

匯入

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

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

Props

也提供原生元件的 Props。

名稱	類型	預設值	描述
day*	object	-	要顯示的日期。
isEndOfHighlighting*	bool	-	如果 `day` 是醒目提示日期範圍的結尾，則設定為 `true`。
isEndOfPreviewing*	bool	-	如果 `day` 是預覽日期範圍的結尾，則設定為 `true`。
isFirstVisibleCell*	bool	-	如果 `true`，則 day 是月份的第一個可見儲存格。取決於 `showDaysOutsideCurrentMonth`，可能是月份的第一天或當週的第一天。
isHighlighting*	bool	-	如果 `day` 在醒目提示日期範圍內，則設定為 `true`。
isLastVisibleCell*	bool	-	如果 `true`，則 day 是月份的最後一個可見儲存格。取決於 `showDaysOutsideCurrentMonth`，可能是月份的最後一天或當週的最後一天。
isPreviewing*	bool	-	如果 `day` 在預覽日期範圍內，則設定為 `true`。
isStartOfHighlighting*	bool	-	如果 `day` 是醒目提示日期範圍的開始，則設定為 `true`。
isStartOfPreviewing*	bool	-	如果 `day` 是預覽日期範圍的開始，則設定為 `true`。
outsideCurrentMonth*	bool	-	如果 `true`，則 day 在月份之外，將會被隱藏。
action	func \| { current?: { focusVisible: func } }	-	用於命令式動作的 ref。目前僅支援 `focusVisible()` 動作。
centerRipple	bool	false	如果 `true`，漣漪會置中。它們不會從游標互動位置開始。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以了解更多詳細資訊。
disabled	bool	false	如果 `true`，則以停用狀態渲染。
disableHighlightToday	bool	false	如果 `true`，今天的日期在渲染時不會以圓圈醒目提示。
disableMargin	bool	false	如果 `true`，日期在渲染時不會有邊距。適用於顯示連結的日期範圍。
disableRipple	bool	false	如果 `true`，則停用漣漪效果。 ⚠️ 沒有漣漪效果時，預設不會有 :focus-visible 的樣式。請務必使用 `.Mui-focusVisible` 類別套用個別樣式來醒目提示元素。
disableTouchRipple	bool	false	如果 `true`，則停用觸控漣漪效果。
draggable	bool	false	如果 `true`，則可以拖曳日期來變更目前的日期範圍。
focusRipple	bool	false	如果 `true`，則基本按鈕將具有鍵盤焦點漣漪。
focusVisibleClassName	string	-	此 prop 可以協助識別哪個元素具有鍵盤焦點。當元素透過鍵盤互動獲得焦點時，將會套用類別名稱。它是 CSS :focus-visible 選取器的 polyfill。使用此功能的理由在此處說明。如果需要，可以使用 polyfill 將 `focus-visible` 類別套用至其他元件。
isVisuallySelected	bool	-	表示日期是否應在視覺上被選取。
onFocusVisible	func	-	當元件透過鍵盤獲得焦點時觸發的回呼。我們也會觸發 `onFocus` 回呼。
selected	bool	false	如果 `true`，則以選取狀態渲染。
showDaysOutsideCurrentMonth	bool	false	如果 `true`，則會渲染目前月份以外的日期 - 如果已定義 `fixedWeekNumber`，則渲染日期以符合要求的週數。 - 如果未定義 `fixedWeekNumber`，則渲染日期以填滿目前月份的第一週和最後一週。 - 如果範圍選擇器上的 `calendars` 等於 `1` 以上，則會忽略此設定。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以了解更多詳細資訊。
today	bool	false	如果 `true`，則以今天的日期渲染。
TouchRippleProps	object	-	套用至 `TouchRipple` 元素的 Props。
touchRippleRef	func \| { current?: { pulsate: func, start: func, stop: func } }	-	指向 `TouchRipple` 元素的 ref。

ref 會轉發到根元素。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。

類別名稱	規則名稱	描述
.MuiDateRangePickerDay-day	day	套用至日期元素的樣式。
.MuiDateRangePickerDay-dayInsideRangeInterval	dayInsideRangeInterval	如果 `selected=false` 且 `isHighlighting=true`，則套用至日期元素的樣式。
.MuiDateRangePickerDay-dayOutsideRangeInterval	dayOutsideRangeInterval	如果 `isHighlighting=false`，則套用至日期元素的樣式。
.MuiDateRangePickerDay-endOfMonth	endOfMonth	如果 `day` 是月底，則套用至根元素的樣式。
.MuiDateRangePickerDay-firstVisibleCell	firstVisibleCell	如果 `day` 是月份的第一個可見儲存格，則套用至根元素的樣式。
.MuiDateRangePickerDay-hiddenDayFiller	hiddenDayFiller	如果它是用於填滿週的空儲存格，則套用至根元素的樣式。
.MuiDateRangePickerDay-lastVisibleCell	lastVisibleCell	如果 `day` 是月份的最後一個可見儲存格，則套用至根元素的樣式。
.MuiDateRangePickerDay-notSelectedDate	notSelectedDate	如果 `selected=false`，則套用至日期元素的樣式。
.MuiDateRangePickerDay-outsideCurrentMonth	outsideCurrentMonth	如果 `outsideCurrentMonth=true`，則套用至根元素的樣式
.MuiDateRangePickerDay-rangeIntervalDayHighlight	rangeIntervalDayHighlight	如果 `isHighlighting=true`，則套用至根元素的樣式。
.MuiDateRangePickerDay-rangeIntervalDayHighlightEnd	rangeIntervalDayHighlightEnd	如果 `isEndOfHighlighting=true`，則套用至根元素的樣式。
.MuiDateRangePickerDay-rangeIntervalDayHighlightStart	rangeIntervalDayHighlightStart	如果 `isStartOfHighlighting=true`，則套用至根元素的樣式。
.MuiDateRangePickerDay-rangeIntervalDayPreview	rangeIntervalDayPreview	如果 `isPreviewing=true`，則套用至根元素的樣式。
.MuiDateRangePickerDay-rangeIntervalDayPreviewEnd	rangeIntervalDayPreviewEnd	如果 `isEndOfPreviewing=true`，則套用至根元素的樣式。
.MuiDateRangePickerDay-rangeIntervalDayPreviewStart	rangeIntervalDayPreviewStart	如果 `isStartOfPreviewing=true`，則套用至根元素的樣式。
.MuiDateRangePickerDay-rangeIntervalPreview	rangeIntervalPreview	套用至預覽元素的樣式。
.MuiDateRangePickerDay-root	root	套用至根元素的樣式。
.MuiDateRangePickerDay-startOfMonth	startOfMonth	如果 `day` 是月初，則套用至根元素的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

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

原始碼

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