跳转到内容

Date Range Picker ⚡️ 日期范围选择器

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

⚠️ 高级组件

时间范围选择器组件适用于 Material-UI X, 它是基于在社区版本(MIT 协议)的 Material-UI 上建立的。

该付费扩展将包括更高级的组件(大数据栅格,时间范围选择器,可拖动的树形视图 & 拖放组件等等)。 你现在可以以实惠的价格 提前使用

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

要求

该组件依赖于你所使用的日期管理库。 它支持 date-fnsluxondayjsmoment 以及其他任何使用公共 dateAdapter 接口的库。

请安装这些库中的任何一个,并使用 LocalizationProvider 来包裹到你的 root(或者包裹到该选择器你想要应用的最高位置)来设置正确的日期引擎。

// 或者使用 @material-ui/lab/Adapter{dayjs,luxon,moment} 或者使用任何可适用的 date-io 适配器
import DateFnsAdapter from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

function App() {
  return (
    <LocalizationProvider dateAdapter={DateFnsAdapter}>...</LocalizationProvider>
  );
}

基本用法

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

mm/dd/yyyy

to

mm/dd/yyyy

响应式

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

  • “手机(Mobile)”版本最适合触控设备和小型屏幕。
  • “桌面(Mobile)”版本最适合鼠标设备和大型屏幕。

默认情况下, DateRangePicker 组件使用 @media (pointer: fine) 媒体查询来确定使用哪个版本。 你也可以使用 desktopModeMediaQuery 属性来自定义它。

mm/dd/yyyy

to

mm/dd/yyyy

mm/dd/yyyy

to

mm/dd/yyyy

不同的月数

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

1 calendar

mm/dd/yyyy

to

mm/dd/yyyy

2 calendars

mm/dd/yyyy

to

mm/dd/yyyy

3 calendars

mm/dd/yyyy

to

mm/dd/yyyy

禁用日期

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

mm/dd/yyyy

to

mm/dd/yyyy

自定义输入组件

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

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DateRangePicker
    label="Advanced keyboard"
    value={selectedDate}
    onChange={(date) => handleDateChange(date)}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <input ref={startProps.inputRef} {...startProps.inputProps} />
        <input ref={endProps.inputRef} {...endProps.inputProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

静态模式

你可以在没有模态框或弹出提示的情况下渲染任何选择器。 为此你需要使用 StaticDateRangePicker

December 2020
January 2021
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePicker
    displayStaticWrapperAs="desktop"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} variant="standard" />
        <DateRangeDelimiter> to </DateRangeDelimiter>
        <TextField {...endProps} variant="standard" />
      </React.Fragment>
    )}
  />
</LocalizationProvider>