StaticDatePickerAPI

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

示範

有關此 React 組件用法的範例和詳細資訊，請訪問組件示範頁面

引入

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

瞭解更多關於最小化 bundle size 的指南。

屬性

名稱	類型	預設值	描述
autoFocus	bool	-	如果 `true`，則在首次掛載期間主要元素會獲得焦點。此主要元素為：- 可見視圖選擇的元素（如果有的話）（即：`day` 視圖中選定的日期）。- 如果有渲染欄位，則為 `input` 元素。
dayOfWeekFormatter	func	(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()	格式化日曆標題中顯示的星期幾。簽名：`function(date: TDate) => string` `date` 适配器提供的星期幾的日期。返回：要顯示的名稱。
defaultValue	object	-	預設值。當組件不受控制時使用。
disabled	bool	false	如果 `true`，則禁用選擇器和文字欄位。
disableFuture	bool	false	如果 `true`，則為日期組件禁用當前日期之後的值，為時間組件禁用時間，為日期時間組件禁用兩者。
disableHighlightToday	bool	false	如果 `true`，今天的日期將在沒有圓圈高亮的情況下呈現。
disablePast	bool	false	如果 `true`，則為日期組件禁用當前日期之前的值，為時間組件禁用時間，為日期時間組件禁用兩者。
displayStaticWrapperAs	'desktop' \| 'mobile'	"mobile"	強制靜態包裝器內部組件以行動裝置或桌面模式呈現。
displayWeekNumber	bool	-	如果 `true`，則星期數將顯示在日曆中。
fixedWeekNumber	number	-	日期視圖將顯示當前月份結束後所需的週數，以匹配此值。設定為 6 可在格里曆中固定週數
loading	bool	false	如果 `true`，則調用 `renderLoading` 而不是渲染日期日曆。可用於預載資訊並在日曆中顯示。
localeText	object	-	組件文字的語言環境。允許覆蓋來自 `LocalizationProvider` 和 `theme` 的文字。
maxDate	object	2099-12-31	最大可選日期。
minDate	object	1900-01-01	最小可選日期。
monthsPerRow	3 \| 4	3	每行渲染的月份數。
onAccept	func	-	在值被接受時觸發的回調。簽名：`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 剛被接受的值。 `context` 包含當前值的驗證結果的上下文。
onChange	func	-	在值更改時觸發的回調。簽名：`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 新值。 `context` 包含當前值的驗證結果的上下文。
onClose	func	-	當組件請求關閉時觸發的回調。可以在選擇值（預設在 `desktop` 模式下）或清除值時觸發。已棄用－請避免使用，因為它將在下一個主要版本中移除。
onError	func	-	當與當前值相關聯的錯誤更改時觸發的回調。當檢測到驗證錯誤時，`error` 參數包含非空值。這可用於渲染適當的表單錯誤。簽名：`function(error: TError, value: TValue) => void` `error` 當前值無效的原因。 `value` 與錯誤關聯的值。
onMonthChange	func	-	在月份更改時觸發的回調。簽名：`function(month: TDate) => void` `month` 新月份。
onViewChange	func	-	在視圖更改時觸發的回調。簽名：`function(view: TView) => void` `view` 新視圖。
onYearChange	func	-	在年份更改時觸發的回調。簽名：`function(year: TDate) => void` `year` 新年份。
openTo	'day' \| 'month' \| 'year'	-	預設可見視圖。當組件視圖不受控制時使用。必須是 `views` 列表中的有效選項。
orientation	'landscape' \| 'portrait'	-	強制以特定方向渲染。
reduceAnimations	bool	`@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` 匹配 Android <10 或 iOS <13	如果 `true`，則禁用大量動畫。
referenceDate	object	使用驗證 props 的最接近有效日期時間，除了像 `shouldDisable<...>` 這樣的回調。	當 `value` 和 `defaultValue` 都為空時，用於生成新值的日期。
renderLoading	func	() => <span>...</span>	當傳遞 `loading` true 時顯示的組件。簽名：`function() => React.ReactNode` 返回：加載時要渲染的節點。
shouldDisableDate	func	-	禁用特定日期。警告：此函數可以被多次調用（例如，當渲染日期日曆時，檢查是否可以將焦點移動到特定日期等）。昂貴的計算可能會影響性能。簽名：`function(day: TDate) => boolean` `day` 要測試的日期。返回：如果 `true`，則日期將被禁用。
shouldDisableMonth	func	-	禁用特定月份。簽名：`function(month: TDate) => boolean` `month` 要測試的月份。返回：如果 `true`，則月份將被禁用。
shouldDisableYear	func	-	禁用特定年份。簽名：`function(year: TDate) => boolean` `year` 要測試的年份。返回：如果 `true`，則年份將被禁用。
showDaysOutsideCurrentMonth	bool	false	如果 `true`，則渲染當前月份之外的日期 - 如果定義了 `fixedWeekNumber`，則渲染日期以具有請求的週數。 - 如果未定義 `fixedWeekNumber`，則渲染日期以填充當前月份的第一週和最後一週。 - 如果範圍選擇器上的 `calendars` 等於多個 `1`，則忽略。
slotProps	object	{}	用於每個組件插槽的 props。
slots	object	{}	可覆蓋的組件插槽。有關更多詳細資訊，請參閱下面的插槽 API。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆蓋以及其他 CSS 樣式的系統 prop。有關更多詳細資訊，請參閱 `sx` 頁面。
timezone	string	已定義 `value` 或 `defaultValue` prop 的時區，否則為 'default'。	選擇要用於值的時區。範例："default"、"system"、"UTC"、"America/New_York"。如果您將來自其他時區的值傳遞給某些 props，它們將在被使用之前轉換為此時區。有關更多詳細資訊，請參閱時區文檔。
value	object	-	選定的值。當組件受控制時使用。
view	'day' \| 'month' \| 'year'	-	可見視圖。當組件視圖受控制時使用。必須是 `views` 列表中的有效選項。
viewRenderers	{ day?: func, month?: func, year?: func }	-	為每個部分定義自訂視圖渲染器。如果為 `null`，則該部分將僅具有欄位編輯。如果為 `undefined`，將使用內部定義的視圖。
views	Array<'day' \| 'month' \| 'year'>	-	可用視圖。
yearsOrder	'asc' \| 'desc'	'asc'	預設情況下，年份以升序（按時間順序）顯示。如果為 `desc`，則年份以降序顯示。
yearsPerRow	3 \| 4	`4` 當 `displayStaticWrapperAs === 'desktop'` 時，否則為 `3`。	每行渲染的年份數。

ref 被轉發到根元素。

插槽

插槽名稱	預設組件	描述
actionBar	`PickersActionBar`	操作欄的自訂組件，它位於選擇器視圖下方。
calendarHeader	`PickersCalendarHeader`	日曆標題的自訂組件。查看 PickersCalendarHeader 組件。
day	`PickersDay`	日期的自訂組件。查看 PickersDay 組件。
layout		用於包裝佈局的自訂組件。它包裝工具欄、視圖、操作欄和快捷方式。
leftArrowIcon	`ArrowLeft`	在左視圖切換按鈕中顯示的圖示。
monthButton	`MonthCalendarButton`	顯示以在 `month` 視圖中渲染單個月份的按鈕。
nextIconButton	`IconButton`	允許切換到右側視圖的按鈕。
previousIconButton	`IconButton`	Button allowing to switch to the left view.
rightArrowIcon	`ArrowRight`	在右視圖切換按鈕中顯示的圖示。
shortcuts	`PickersShortcuts`	快捷方式的自訂組件。
switchViewButton	`IconButton`	顯示以在不同日曆視圖之間切換的按鈕。
switchViewIcon	`ArrowDropDown`	在 SwitchViewButton 中顯示的圖示。當打開的視圖為 `year` 時旋轉 180°。
toolbar	`DatePickerToolbar`	在視圖上方渲染的工具欄的自訂組件。
yearButton	`YearCalendarButton`	顯示以在 `year` 視圖中渲染單個年份的按鈕。

原始碼

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