MobileDatePickerAPI

React MobileDatePicker 組件的 API 參考文檔。了解此導出模組的屬性、CSS 和其他 API。

示範

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

導入

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

閱讀這份關於最小化 bundle 大小的指南，了解它們之間的差異。

屬性

名稱	類型	預設	描述
autoFocus	bool	-	如果為 `true`，則在首次掛載期間，主要元素會被聚焦。此主要元素為：- 可見檢視所選擇的元素（如果有的話）（即：`day` 檢視中選定的日期）。- 如果有欄位呈現，則為 `input` 元素。
closeOnSelect	bool	`true` 用於桌面版，`false` 用於行動版（基於所選的包裝器和 `desktopModeMediaQuery` 屬性）。	如果為 `true`，則在提交完整日期後，彈出視窗或模態視窗將會關閉。
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`，則今天的日期將以不帶圓圈高亮的方式呈現。
disableOpenPicker	bool	false	如果為 `true`，則不會呈現開啟選擇器按鈕（僅呈現欄位）。
disablePast	bool	false	如果為 `true`，則停用日期組件中當前日期之前的值，時間組件中當前時間之前的值，以及日期時間組件中兩者之前的值。
displayWeekNumber	bool	-	如果為 `true`，則週數將顯示在日曆中。
fixedWeekNumber	number	-	日期檢視將在當前月份結束後顯示所需的週數，以符合此值。設為 6 以在公曆中擁有固定的週數
format	string	-	日期在輸入中呈現時的格式。預設為基於所用 `views` 的本地化格式。
formatDensity	'dense' \| 'spacious'	"dense"	格式在輸入中呈現時的密度。將 `formatDensity` 設為 `\"spacious\"` 將在每個 `/`、`-` 和 `.` 字元前後新增一個空格。
inputRef	ref	-	將 ref 傳遞給 `input` 元素。
label	node	-	標籤內容。
loading	bool	false	如果為 `true`，則呼叫 `renderLoading` 而不是呈現日期日曆。可用於預載資訊並在日曆中顯示。
localeText	object	-	Locale for components texts. Allows overriding texts coming from `LocalizationProvider` and `theme`.
maxDate	object	2099-12-31	最大可選日期。
minDate	object	1900-01-01	最小可選日期。
monthsPerRow	3 \| 4	3	每行呈現的月份數。
name	string	-	欄位中 `input` 元素使用的名稱屬性。
onAccept	func	-	當值被接受時觸發的回調。簽名：`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 剛被接受的值。 `context` 包含當前值的驗證結果的上下文。
onChange	func	-	當值變更時觸發的回調。簽名：`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 新值。 `context` 包含當前值的驗證結果的上下文。
onClose	func	-	當彈出視窗請求關閉時觸發的回調。在受控模式下使用（請參閱 `open`）。
onError	func	-	當與當前值關聯的錯誤變更時觸發的回調。當檢測到驗證錯誤時，`error` 參數包含非空值。這可以用於呈現適當的表單錯誤。簽名：`function(error: TError, value: TValue) => void` `error` 當前值無效的原因。 `value` 與錯誤關聯的值。
onMonthChange	func	-	在月份變更時觸發的回調。簽名：`function(month: TDate) => void` `month` 新月份。
onOpen	func	-	當彈出視窗請求開啟時觸發的回調。在受控模式下使用（請參閱 `open`）。
onSelectedSectionsChange	func	-	當選定區段變更時觸發的回調。簽名：`function(newValue: FieldSelectedSections) => void` `newValue` 新的選定區段。
onViewChange	func	-	在檢視變更時觸發的回調。簽名：`function(view: TView) => void` `view` 新檢視。
onYearChange	func	-	在年份變更時觸發的回調。簽名：`function(year: TDate) => void` `year` 新年份。
open	bool	false	控制彈出視窗或對話框的開啟狀態。
openTo	'day' \| 'month' \| 'year'	-	預設可見檢視。當組件檢視不受控制時使用。必須是 `views` 列表中的有效選項。
orientation	'landscape' \| 'portrait'	-	強制以特定方向呈現。
reduceAnimations	bool	`@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` matches Android <10 or iOS <13	如果為 `true`，則停用繁重的動畫效果。
referenceDate	object	使用驗證屬性的最接近的有效日期時間，但 `shouldDisable<...>` 等回調除外。	當 `value` 和 `defaultValue` 都為空時，用於產生新值的日期。
renderLoading	func	() => <span>...</span>	當傳遞 `loading` 為 true 時顯示的組件。簽名：`function() => React.ReactNode` 返回：載入時要呈現的節點。
selectedSections	'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number	-	目前選定的區段。此屬性接受四種格式：1. 如果提供數字，則會選定此索引處的區段。2. 如果提供 `FieldSectionType` 類型的字串，則會選定具有該名稱的第一個區段。3. 如果提供 `\"all\"`，則會選定所有區段。4. 如果提供 `null`，則不會選定任何區段。如果未提供，則選定的區段將在內部處理。
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	{}	用於每個組件插槽的屬性。
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' \| '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	3	每行呈現的年份數。

`ref` 會轉發到根元素。

插槽

插槽名稱	預設組件	描述
actionBar	`PickersActionBar`	操作欄的自訂組件，它位於選擇器檢視下方。
calendarHeader	`PickersCalendarHeader`	日曆標題的自訂組件。請查看 PickersCalendarHeader 組件。
day	`PickersDay`	日期的自訂組件。請查看 PickersDay 組件。
dialog	`PickersModalDialogRoot`	對話框的自訂組件，在行動裝置上於其中呈現檢視。
field		用於使用鍵盤輸入日期的組件。
layout		用於包裝佈局的自訂組件。它包裝了工具欄、檢視、操作欄和快捷方式。
leftArrowIcon	`ArrowLeft`	在左檢視切換按鈕中顯示的圖示。
mobilePaper	`Paper from '@mui/material'.`	在行動裝置選擇器的對話框內呈現的紙張的自訂組件。
mobileTransition	`Fade from '@mui/material'.`	行動裝置對話框 Transition 的自訂組件。
monthButton	`MonthCalendarButton`	用於在 `month` 檢視中呈現單個月份的按鈕。
nextIconButton	`IconButton`	允許切換到右側檢視的按鈕。
previousIconButton	`IconButton`	Button allowing to switch to the left view.
rightArrowIcon	`ArrowRight`	在右檢視切換按鈕中顯示的圖示。
shortcuts	`PickersShortcuts`	快捷方式的自訂組件。
switchViewButton	`IconButton`	Button displayed to switch between different calendar views.
switchViewIcon	`ArrowDropDown`	在 SwitchViewButton 中顯示的圖示。當開啟的檢視為 `year` 時旋轉 180°。
textField	TextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.	具有輸入的表單控件，用於在預設欄位內呈現值。
toolbar	`DatePickerToolbar`	工具欄的自訂組件，它位於檢視上方。
yearButton	`YearCalendarButton`	用於在 `year` 檢視中呈現單個年份的按鈕。

原始碼

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