StaticDateTimePickerAPI

React StaticDateTimePicker 組件的 API 參考文件。瞭解此匯出模組的屬性、CSS 和其他 API。

示範

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

匯入

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

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

屬性

名稱	類型	預設	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	小時選擇時鐘的 12 小時/24 小時檢視。
ampmInClock	bool	在桌面上為 true，在行動裝置上為 false	在時鐘下方（而不是在工具列中）顯示 ampm 控制項。
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`，則今天的日期在呈現時不會以圓圈突出顯示。
disableIgnoringDatePartForTimeValidation	bool	false	驗證最小/最大時間時，不要忽略日期部分。
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	最大可選日期。
maxDateTime	object	-	具有日期綁定的最大可選時間點，若要設定每天的最大時間，請使用 `maxTime`。
maxTime	object	-	最大可選時間。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否則物件的日期部分將被忽略。
minDate	object	1900-01-01	最小可選日期。
minDateTime	object	-	具有日期綁定的最小可選時間點，若要設定每天的最小時間，請使用 `minTime`。
minTime	object	-	最小可選時間。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否則物件的日期部分將被忽略。
minutesStep	number	1	分鐘的步進值。
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` 參數包含非 null 值。這可用於渲染適當的表單錯誤。簽章：`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' \| 'hours' \| 'minutes' \| 'month' \| 'seconds' \| 'year'	-	預設可見檢視。當組件檢視不受控制時使用。必須是來自 `views` 清單的有效選項。
orientation	'landscape' \| 'portrait'	-	強制以特定方向渲染。
reduceAnimations	bool	`@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` 符合 Android <10 或 iOS <13	如果為 `true`，則停用繁重的動畫。
referenceDate	object	使用驗證屬性的最接近有效日期時間，但回呼（例如 `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`，則會停用該月份。
shouldDisableTime	func	-	停用特定時間。簽章：`function(value: TDate, view: TimeView) => boolean` `value` 要檢查的值。 `view` timeValue 的時鐘類型。傳回值：如果為 `true`，則會停用該時間。
shouldDisableYear	func	-	停用特定年份。簽章：`function(year: TDate) => boolean` `year` 要測試的年份。傳回值：如果為 `true`，則會停用該年份。
showDaysOutsideCurrentMonth	bool	false	如果為 `true`，則會渲染目前月份之外的日期 - 如果定義了 `fixedWeekNumber`，則渲染日期以符合要求的週數。 - 如果未定義 `fixedWeekNumber`，則渲染日期以填滿當前月份的第一週和最後一週。 - 如果範圍選擇器上的 `calendars` 等於多個 `1`，則忽略。
slotProps	object	{}	用於每個組件插槽的屬性。
slots	object	{}	可覆寫的組件插槽。請參閱下方的插槽 API 以取得更多詳細資訊。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統屬性。請參閱 `sx` 頁面以取得更多詳細資訊。
timezone	string	已定義 `value` 或 `defaultValue` 屬性的時區，否則為 'default'。	選擇要用於值的時區。範例：「default」、「system」、「UTC」、「America/New_York」。如果您將來自其他時區的值傳遞給某些屬性，它們將在被使用前轉換為此時區。請參閱時區文件以取得更多詳細資訊。
value	object	-	選取的值。當組件受控制時使用。
view	'day' \| 'hours' \| 'minutes' \| 'month' \| 'seconds' \| 'year'	-	可見檢視。當組件檢視受控制時使用。必須是來自 `views` 清單的有效選項。
viewRenderers	{ day?: func, hours?: func, minutes?: func, month?: func, seconds?: func, year?: func }	-	為每個區段定義自訂檢視渲染器。如果為 `null`，則該區段將僅具有欄位編輯功能。如果為 `undefined`，則將使用內部定義的檢視。
views	Array<'day' \| 'hours' \| 'minutes' \| 'month' \| 'seconds' \| 'year'>	-	可用的檢視。
yearsOrder	'asc' \| 'desc'	'asc'	預設情況下，年份以升序（依時間順序）顯示。如果為 `desc`，則年份以降序顯示。
yearsPerRow	3 \| 4	當 `displayStaticWrapperAs === 'desktop'` 時為 `4`，否則為 `3`。	每列渲染的年份數。

ref 會轉發到根元素。

插槽

插槽名稱	預設組件	描述
actionBar	`PickersActionBar`	動作列的自訂組件，它放置在選擇器檢視下方。
calendarHeader	`PickersCalendarHeader`	日曆標頭的自訂組件。查看 PickersCalendarHeader 組件。
day	`PickersDay`	日期的自訂組件。查看 PickersDay 組件。
layout		用於包裝佈局的自訂組件。它包裝了工具列、檢視、動作列和快捷鍵。
leftArrowIcon	`ArrowLeft`	顯示在左檢視切換按鈕中的圖示。
monthButton	`MonthCalendarButton`	按鈕，顯示以在 `month` 檢視中渲染單個月份。
nextIconButton	`IconButton`	允許切換到右側檢視的按鈕。
previousIconButton	`IconButton`	允許切換到左側檢視的按鈕。
rightArrowIcon	`ArrowRight`	顯示在右檢視切換按鈕中的圖示。
shortcuts	`PickersShortcuts`	快捷鍵的自訂組件。
switchViewButton	`IconButton`	按鈕，顯示以在不同的日曆檢視之間切換。
switchViewIcon	`ArrowDropDown`	顯示在 SwitchViewButton 中的圖示。當開啟的檢視為 `year` 時，旋轉 180°。
tabs	`DateTimePickerTabs`	啟用在日期和時間選擇器之間切換的索引標籤。
toolbar	`DateTimePickerToolbar`	工具列的自訂組件，渲染在檢視上方。
yearButton	`YearCalendarButton`	按鈕，顯示以在 `year` 檢視中渲染單一年份。

原始碼

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