Date Range Picker ⚡️ 日期范围选择器
日期选择器让用户选择一系列的日期。
⚠️ 高级组件
时间范围选择器组件适用于 Material-UI X, 它是基于在社区版本（MIT 协议）的 Material-UI 上建立的。
该付费扩展将包括更高级的组件（大数据栅格，时间范围选择器，可拖动的树形视图 & 拖放组件等等）。 你现在可以以实惠的价格 提前使用。
日期范围选择器让用户选择一个日期范围。
要求
该组件依赖于你所使用的日期管理库。 它支持 date-fns，luxon，dayjs，moment 以及其他任何使用公共 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
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
mm/dd/yyyy
to
mm/dd/yyyy
自定义输入组件
你可以使用 renderInput 属性来渲染自定义的输入。 对于 DateRangePicker，它需要两个参数 – 分别是开始和结束输入。 如果你需要渲染自定义的输入，请确保将 ref 和 inputProps 都正确地传入到输入组件中。
<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>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>