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
to
to
1 calendar
to
2 calendars
to
3 calendars
to
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>