DateTimePickerAPI

React DateTimePicker 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

导入

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

通过阅读此关于最小化捆绑包大小的指南，了解它们之间的区别。

Props

名称	类型	默认	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	小时选择时钟的 12 小时/24 小时视图。
ampmInClock	bool	桌面端为 true，移动端为 false	在时钟下方（而不是在工具栏中）显示 ampm 控件。
autoFocus	bool	-	如果为 `true`，则在首次挂载期间，主要元素将获得焦点。此主要元素是： - 可见视图选择的元素（如果有）（即：`day` 视图中选定的日期）。- 如果渲染了字段，则为 `input` 元素。
closeOnSelect	bool	桌面端为 `true`，移动端为 `false`（基于所选的包装器和 `desktopModeMediaQuery` prop）。	如果为 `true`，则在提交完整日期后，弹出框或模态框将关闭。
dayOfWeekFormatter	func	(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()	格式化日历标题中显示的星期几。签名：`function(date: TDate) => string` `date` 适配器提供的星期几的日期。返回：要显示的名称。
defaultValue	object	-	默认值。当组件不受控制时使用。
desktopModeMediaQuery	string	'@media (pointer: fine)'	当 `Mobile` 模式将更改为 `Desktop` 时的 CSS 媒体查询。
disabled	bool	false	如果为 `true`，则禁用选择器和文本字段。
disableFuture	bool	false	如果为 `true`，则日期组件禁用当前日期之后的值，时间组件禁用当前时间之后的值，日期时间组件禁用两者。
disableHighlightToday	bool	false	如果为 `true`，则今天的日期将不使用圆圈高亮渲染。
disableIgnoringDatePartForTimeValidation	bool	false	在验证最小/最大时间时，不忽略日期部分。
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	-	组件文本的语言环境。允许覆盖来自 `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	每行渲染的月份数。
name	string	-	Field 中 `input` 元素使用的 Name 属性。
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' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| '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` 返回：加载时要渲染的节点。
selectedSections	'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number	-	当前选定的部分。此 prop 接受四种格式：1. 如果提供数字，则将选择此索引处的部分。2. 如果提供 `FieldSectionType` 类型的字符串，则将选择具有该名称的第一个部分。3. 如果提供 `"all"`，则将选择所有部分。4. 如果提供 `null`，则不会选择任何部分。如果未提供，则选定的部分将在内部处理。
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`，则忽略。
skipDisabled	bool	false	如果为 `true`，则不会渲染禁用的数字时钟项。
slotProps	object	{}	用于每个组件插槽的 props。
slots	object	{}	可覆盖的组件插槽。有关更多详细信息，请参见下方的 Slots API。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参见 `sx` 页面。
thresholdToRenderTimeInASingleColumn	number	24	使用单列时间渲染器的下方或时间选项的数量。
timeSteps	{ hours?: number, minutes?: number, seconds?: number }	{ hours: 1, minutes: 5, seconds: 5 }	两个时间单位选项之间的时间步长。例如，如果 `timeStep.minutes = 8`，则可用的分钟选项将为 `[0, 8, 16, 24, 32, 40, 48, 56]`。当使用单列时间渲染器时，将仅使用 `timeStep.minutes`。
timezone	string	`value` 或 `defaultValue` prop 的时区已定义，否则为 'default'。	选择用于值的时区。示例：“default”、“system”、“UTC”、“America/New_York”。如果您将来自其他时区的值传递给某些 props，则它们将在使用前转换为此时区。有关更多详细信息，请参见时区文档。
value	object	-	选定的值。当组件受控时使用。
view	'day' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'year'	-	可见视图。当组件视图受控时使用。必须是 `views` 列表中的有效选项。
viewRenderers	{ day?: func, hours?: func, meridiem?: 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	桌面端为 4，移动端为 3	每行渲染的年份数。

ref 被转发到根元素。

Slots

插槽名称	默认组件	描述
actionBar	`PickersActionBar`	操作栏的自定义组件，它位于选择器视图下方。
calendarHeader	`PickersCalendarHeader`	日历标题的自定义组件。查看 PickersCalendarHeader 组件。
clearButton	`IconButton`	用于清除值的按钮。
clearIcon	`ClearIcon`	显示在清除按钮内部的图标。
day	`PickersDay`	day 的自定义组件。查看 PickersDay 组件。
desktopPaper	`PickersPopperPaper`	在桌面选择器的 Popper 内部渲染的纸张的自定义组件。
desktopTransition	`当 reduceAnimations 为 true 时，从 '@mui/material' 增长或淡入。`	桌面 popper Transition 的自定义组件。
desktopTrapFocus	`来自 '@mui/material' 的 TrapFocus。`	用于捕获桌面视图内焦点的自定义组件。
dialog	`PickersModalDialogRoot`	在移动设备上视图渲染在其中的对话框的自定义组件。
digitalClockItem	`来自 '@mui/material' 的 MenuItem`	负责渲染单个数字时钟项的组件。
digitalClockSectionItem	`来自 '@mui/material' 的 MenuItem`	负责渲染单个多部分数字时钟部分项的组件。
field		用于使用键盘输入日期的组件。
inputAdornment	`InputAdornment`	显示在开始或结束输入装饰上的组件，用于在桌面上打开选择器。
layout		用于包装布局的自定义组件。它包装了工具栏、视图、操作栏和快捷方式。
leftArrowIcon	`ArrowLeft`	显示在左视图切换按钮中的图标。
mobilePaper	`来自 '@mui/material' 的 Paper。`	在移动选择器的对话框内部渲染的纸张的自定义组件。
mobileTransition	`来自 '@mui/material' 的 Fade。`	移动对话框 Transition 的自定义组件。
monthButton	`MonthCalendarButton`	显示在 `month` 视图中以渲染单个月份的按钮。
nextIconButton	`IconButton`	允许切换到右侧视图的按钮。
openPickerButton	`IconButton`	用于在桌面上打开选择器的按钮。
openPickerIcon		显示在桌面上的打开选择器按钮中的图标。
popper	`来自 '@mui/material' 的 Popper。`	在桌面设备上视图渲染在其中的 popper 的自定义组件。
previousIconButton	`IconButton`	允许切换到左侧视图的按钮。
rightArrowIcon	`ArrowRight`	显示在右视图切换按钮中的图标。
shortcuts	`PickersShortcuts`	快捷方式的自定义组件。
switchViewButton	`IconButton`	显示用于在不同日历视图之间切换的按钮。
switchViewIcon	`ArrowDropDown`	显示在 SwitchViewButton 中的图标。当打开的视图为 `year` 时，旋转 180°。
tabs	`DateTimePickerTabs`	启用在日期和时间选择器之间切换的选项卡。
textField	`来自 '@mui/material' 的 TextField 或 PickersTextField（如果 enableAccessibleFieldDOMStructure 为 true）。`	带有输入框的表单控件，用于在默认字段内渲染值。
toolbar	`DateTimePickerToolbar`	在视图上方渲染的工具栏的自定义组件。
yearButton	`YearCalendarButton`	显示在 `year` 视图中以渲染单一年份的按钮。

源代码

如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。