跳转到内容
编辑此页面

Date Range Picker

日期选择器让用户选择一系列的日期。

日期范围选择器让用户选择一个日期范围。

基本用法

请注意，你可以从 DatePicker 中传递几乎任何的属性。

to

静态模式

可以将任何选择器内嵌渲染。 这将启用自定义弹出提示/模态框的容器。

June 2022
July 2022
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePicker
    displayStaticWrapperAs="desktop"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}> to </Box>
        <TextField {...endProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

响应式

日期范围选择器组件是针对运行它的设备进行设计并优化的。

  • The MobileDateRangePicker component works best for touch devices and small screens.
  • The DesktopDateRangePicker component works best for mouse devices and large screens.

By default, the DateRangePicker component renders the desktop version if the media query @media (pointer: fine) matches. 你也可以使用 desktopModeMediaQuery 属性来自定义它。 你也可以使用 desktopModeMediaQuery 属性来自定义它。

to
to

Form props 表单的属性

The date range picker component can be disabled or read-only.

to
to

不同的月数

请注意，calendars 属性仅运行在桌面端。

1 calendar

to

2 calendars

to

3 calendars

to

禁用日期

禁用日期的行为与 DatePicker 相同。

to

自定义输入组件

你可以使用 renderInput 属性来渲染自定义的输入。 对于 DateRangePicker，它需要两个参数 – 分别是开始和结束输入。 如果你需要渲染自定义的输入，请确保将 ref 和 inputProps 都正确地传入到输入组件中。

to

自定义日期渲染

你可以通过 renderDay 函数属性来自定义所显示的日期。 You can take advantage of the internal DateRangePickerDay component.

June 2022
July 2022
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePicker
    displayStaticWrapperAs="desktop"
    label="date range"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    renderDay={renderWeekPickerDay}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}> to </Box>
        <TextField {...endProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

API