如何让MUI X Date Range Picker移动端垂直显示所有月份？

核心思路 #

新版本MUI X Date Range Picker已移除showMonths属性，要实现类似Expedia的移动端垂直多月份展示，需结合响应式设备检测和自定义日历插槽样式，动态调整月份数量并修改日历布局方向。

具体实现步骤 #

1. 用MUI的useMediaQuery识别移动端设备
2. 移动端设置显示全部所需月份（比如12个月），桌面端保留默认横向双月布局
3. 通过slotProps修改日历容器的flex布局，移动端改为垂直排列

修改后的完整代码 #

import { useMediaQuery, useTheme } from '@mui/material';
import { LocalizationProvider, DateRangePicker } from '@mui/x-date-pickers-pro';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import Box from '@mui/material/Box';

// 你的其他导入及组件状态定义（startDate、endDate、handleDateChange等）

const YourComponent = () => {
  const theme = useTheme();
  // 检测移动端（可根据需求调整断点阈值）
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <LocalizationProvider
      dateAdapter={AdapterDayjs}
      localeText={{ start: startDateLabel, end: endDateLabel }}
    >
      <DateRangePicker
        value={[startDate, endDate]}
        onChange={(newValue) => {
          handleDateChange({
            startDate: new Date(newValue[0]),
            endDate: newValue[1] ? new Date(newValue[1]) : null,
          });
        }}
        inputFormat={'DD MMM'}
        maxDate={maximumDate ? new Date(maximumDate) : new Date(moment().add('12', 'months'))}
        minDate={minimumDate ? new Date(minimumDate) : new Date()}
        // 动态设置显示月份数
        numberOfMonths={isMobile ? 12 : 2}
        // 自定义日历插槽样式
        slotProps={{
          calendar: {
            sx: {
              '& .MuiCalendarPicker-root': {
                flexDirection: isMobile ? 'column' : 'row',
                overflowY: isMobile ? 'auto' : 'visible',
                maxHeight: isMobile ? '70vh' : 'unset',
              },
              '& .MuiPickersCalendarHeader-root': {
                position: 'sticky',
                top: 0,
                background: 'white',
                zIndex: 1,
              }
            }
          }
        }}
        renderInput={(startProps, endProps) => (
          <Box display={'flex'} gap={'10px'}>
            <StyledDatePickerTextField
              placeholder={'Add Date'}
              textfieldtype={textFieldType}
              style={{ background: 'white', borderRadius: 10, width: '100%' }}
              {...startProps}
              inputProps={{
                ...startProps.inputProps,
                placeholder: 'Add Date',
              }}
              InputLabelProps={{
                shrink: true,
              }}
            />
            <StyledDatePickerTextField
              style={{ marginLeft: 5, borderRadius: 10, background: 'white', width: '100%' }}
              {...endProps}
              textfieldtype={textFieldType}
              inputProps={{
                ...endProps.inputProps,
                placeholder: 'Add Date',
              }}
              InputLabelProps={{
                shrink: true,
              }}
            />
          </Box>
        )}
      />
    </LocalizationProvider>
  );
};

export default YourComponent;

关键说明 #

• 响应式适配：通过设备断点自动切换布局逻辑，兼顾桌面端和移动端体验
• 布局优化：移动端日历改为垂直排列并添加滚动，固定表头避免用户滚动时丢失月份导航
• 月份数量控制：按需设置numberOfMonths参数，确保移动端一次性展示所有可选月份

内容的提问来源于stack exchange，提问作者Rohit Thakur