DesktopDateRangePickerAPI

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

演示

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

导入

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

通过阅读本指南，了解有关最小化 bundle size 的区别。

Props

名称	类型	默认值	描述
autoFocus	布尔值	-	如果为 `true`，则在首次挂载期间，主要元素会获得焦点。此主要元素是： - 可见视图选择的元素（如果有）（即：`day` 视图上选定的日期）。 - 如果渲染了字段，则为 `input` 元素。
calendars	1 \| 2 \| 3	2	要在桌面端上渲染的日历数量。
closeOnSelect	布尔值	桌面端为 `true`，移动端为 `false`（基于所选的 wrapper 和 `desktopModeMediaQuery` prop）。	如果为 `true`，则在提交完整日期后，弹出框或模态框将关闭。
currentMonthCalendarPosition	1 \| 2 \| 3	1	当前月份渲染在哪个位置。
dayOfWeekFormatter	函数	(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()	格式化日历标题中显示的一周中的某天。签名:`function(date: TDate) => string` `date` 适配器提供的一周中某天的日期。返回值: 要显示的名称。
defaultRangePosition	'end' \| 'start'	'start'	编辑日期范围的初始位置。当组件不受控时使用。
defaultValue	Array<object>	-	默认值。当组件不受控时使用。
disableAutoMonthSwitching	布尔值	false	如果为 `true`，则在选择 `start` 日期后，日历不会自动切换到 `end` 日期的月份。
disabled	布尔值	false	如果为 `true`，则禁用选择器和文本字段。
disableDragEditing	布尔值	false	如果为 `true`，则禁用通过拖动编辑日期。
disableFuture	布尔值	false	如果为 `true`，则禁用日期组件的当前日期之后的值，时间组件的时间以及日期时间组件的两者。
disableHighlightToday	布尔值	false	如果为 `true`，则今天的日期在渲染时不会用圆圈突出显示。
disableOpenPicker	布尔值	false	如果为 `true`，则不会渲染打开选择器按钮（仅渲染字段）。
disablePast	布尔值	false	如果为 `true`，则禁用日期组件的当前日期之前的值，时间组件的时间以及日期时间组件的两者。
displayWeekNumber	布尔值	-	如果为 `true`，则周数将显示在日历中。
fixedWeekNumber	数字	-	日期视图将在当前月份结束后显示尽可能多的周数以匹配此值。将其设置为 6 以在公历中获得固定周数
format	字符串	-	日期在输入框中呈现时的格式。默认为基于使用的 `views` 的本地化格式。
formatDensity	'dense' \| 'spacious'	"dense"	输入框中呈现的格式密度。将 `formatDensity` 设置为 `"spacious"` 将在每个 `/`、`-` 和 `.` 字符前后添加一个空格。
inputRef	ref	-	将 ref 传递给 `input` 元素。如果字段有多个输入，则忽略此项。
label	节点	-	标签内容。如果字段有多个输入，则忽略此项。
loading	布尔值	false	如果为 `true`，则调用 `renderLoading` 而不是渲染日期日历。可用于预加载信息并在日历中显示。
localeText	对象	-	组件文本的区域设置。允许覆盖来自 `LocalizationProvider` 和 `theme` 的文本。
maxDate	对象	2099-12-31	最大可选择日期。
minDate	对象	1900-01-01	最小可选择日期。
name	字符串	-	Field 中 `input` 元素使用的 Name 属性。如果字段有多个输入，则忽略此项。
onAccept	函数	-	当值被接受时触发的回调。签名:`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 刚被接受的值。 `context` 包含当前值的验证结果的上下文。
onChange	函数	-	当值更改时触发的回调。签名:`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 新值。 `context` 包含当前值的验证结果的上下文。
onClose	函数	-	当弹出窗口请求关闭时触发的回调。在受控模式下使用（参见 `open`）。
onError	函数	-	当与当前值关联的错误更改时触发的回调。当检测到验证错误时，`error` 参数包含一个非空值。这可以用于渲染适当的表单错误。签名:`function(error: TError, value: TValue) => void` `error` 当前值无效的原因。 `value` 与错误关联的值。
onMonthChange	函数	-	在月份更改时触发的回调。签名:`function(month: TDate) => void` `month` 新月份。
onOpen	函数	-	当弹出窗口请求打开时触发的回调。在受控模式下使用（参见 `open`）。
onRangePositionChange	函数	-	当范围位置更改时触发的回调。签名:`function(rangePosition: RangePosition) => void` `rangePosition` 新的范围位置。
onSelectedSectionsChange	函数	-	当选定的 sections 更改时触发的回调。签名:`function(newValue: FieldSelectedSections) => void` `newValue` 新的选定 sections。
open	布尔值	false	控制弹出框或对话框的打开状态。
rangePosition	'end' \| 'start'	-	当前编辑的日期范围中的位置。当组件位置受控时使用。
reduceAnimations	布尔值	`@media(prefers-reduced-motion: reduce)` \|\| `navigator.userAgent` 匹配 Android <10 或 iOS <13	如果为 `true`，则禁用繁重的动画。
referenceDate	对象	使用验证 props 的最近有效日期时间，除了像 `shouldDisable<...>` 这样的回调。	当 `value` 和 `defaultValue` 都为空时，用于生成新值的日期。
renderLoading	函数	() => "..."	当 `props.loading` 为 true 时，在“day”视图上渲染的组件。签名:`function() => React.ReactNode` 返回值: 加载时要渲染的节点。
selectedSections	'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| 数字	-	当前选定的 sections。此 prop 接受四种格式：1. 如果提供了数字，则将选择此索引处的 section。2. 如果提供了 `FieldSectionType` 类型的字符串，则将选择具有该名称的第一个 section。3. 如果提供了 `"all"`，则将选择所有 section。4. 如果提供了 `null`，则不会选择任何 section。如果未提供，则选定的 section 将在内部处理。
shouldDisableDate	函数	-	禁用特定日期。警告：此函数可以被多次调用（例如，在渲染日期日历、检查焦点是否可以移动到某个日期等时）。昂贵的计算可能会影响性能。签名:`function(day: TDate, position: string) => boolean` `day` 要测试的日期。 `position` 要测试的日期，“start”或“end”。返回值: 如果应禁用该日期，则返回 `true`。
showDaysOutsideCurrentMonth	布尔值	false	如果为 `true`，则渲染当前月份之外的日期 - 如果定义了 `fixedWeekNumber`，则渲染日期以具有请求的周数。 - 如果未定义 `fixedWeekNumber`，则渲染日期以填充当前月份的第一周和最后一周。 - 如果 `calendars` 在范围选择器上等于多个 `1`，则忽略。
slotProps	对象	{}	用于每个组件 slot 的 props。
Slots	对象	{}	可覆盖的组件 slots。有关更多详细信息，请参阅下面的Slots API。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅`sx` 页面。
timezone	字符串	定义 `value` 或 `defaultValue` prop 的时区，否则为“default”。	选择要用于值的时区。示例：“default”、“system”、“UTC”、“America/New_York”。如果您将来自其他时区的值传递给某些 props，它们将在使用前转换为此时区。有关更多详细信息，请参阅时区文档。
value	Array<object>	-	选定的值。当组件受控时使用。
viewRenderers	{ day?: func }	-	为每个 section 定义自定义视图渲染器。如果为 `null`，则该 section 将仅具有字段编辑。如果为 `undefined`，则将使用内部定义的视图。

ref 被转发到根元素。

Slots

Slot 名称	默认组件	描述
actionBar	`PickersActionBar`	操作栏的自定义组件，它位于选择器视图下方。
calendarHeader	`PickersCalendarHeader`	日历标题的自定义组件。查看 PickersCalendarHeader 组件。
clearButton	`IconButton`	用于清除值的按钮。
clearIcon	`ClearIcon`	要在清除按钮内显示的图标。
day	`DateRangePickersDay`	范围选择器中日期的自定义组件。查看 DateRangePickersDay 组件。
desktopPaper	`PickersPopperPaper`	在桌面选择器的 Popper 内渲染的 paper 的自定义组件。
desktopTransition	`当 reduceAnimations 为 true 时，从 '@mui/material' Grow 或 Fade。`	桌面 popper Transition 的自定义组件。
desktopTrapFocus	`来自 '@mui/material' 的 TrapFocus。`	用于在桌面端捕获视图内焦点的自定义组件。
field
fieldRoot		在根目录渲染的元素。如果字段只有一个输入，则忽略此项。
fieldSeparator		在两个输入之间渲染的元素。如果字段只有一个输入，则忽略此项。
layout		用于包装布局的自定义组件。它包装了工具栏、视图、操作栏和快捷方式。
leftArrowIcon	`ArrowLeft`	在左侧视图切换按钮中显示的图标。
nextIconButton	`IconButton`	允许切换到右侧视图的按钮。
popper	`来自 '@mui/material' 的 Popper。`	popper 的自定义组件，视图在桌面端在此 popper 内渲染。
previousIconButton	`IconButton`	允许切换到左侧视图的按钮。
rightArrowIcon	`ArrowRight`	在右侧视图切换按钮中显示的图标。
shortcuts	`PickersShortcuts`	快捷方式的自定义组件。
switchViewButton	`IconButton`	用于在不同日历视图之间切换的按钮。
switchViewIcon	`ArrowDropDown`	在 SwitchViewButton 中显示的图标。当打开的视图为 `year` 时，旋转 180°。
textField	`来自 '@mui/material' 的 TextField 或 PickersTextField（如果 enableAccessibleFieldDOMStructure 为 true）。`	带有输入的表单控件，用于在默认字段内渲染日期或时间。它被渲染两次：一次用于起始元素，一次用于结束元素。
toolbar	`DateTimePickerToolbar`	在视图上方渲染的工具栏的自定义组件。

源代码

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