如何在MUI X DatePicker组件中实现双日历单日期选择？

要实现单日期选择同时显示两个日历，可通过以下两种方式实现：

方法一：自定义Calendar插槽（推荐，基础版组件即可用） #

利用MUI X的MultiViewCalendar组件支持多月份显示的特性，替换DatePicker默认的日历组件：

1. 导入所需组件：

import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { MultiViewCalendar } from '@mui/x-date-pickers/MultiViewCalendar';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import { useState } from 'react';

2. 编写组件代码：

export default function DualCalendarDatePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs());

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="选择日期"
        value={selectedDate}
        onChange={setSelectedDate}
        slotProps={{
          calendar: ({ value, onChange, ...rest }) => (
            <MultiViewCalendar
              {...rest}
              numberOfMonths={2} // 设置显示2个日历
              value={value}
              onChange={(newValue) => onChange(newValue)}
            />
          )
        }}
      />
    </LocalizationProvider>
  );
}

方法二：改造DateRangePicker（适用于Pro版本） #

若使用MUI X Pro版的DateRangePicker，可通过隐藏结束日期输入框，强制实现单日期选择：

import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TextField } from '@mui/material';
import dayjs from 'dayjs';
import { useState } from 'react';

export default function DualCalendarSinglePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs());

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateRangePicker
        calendars={2} // 设置显示2个日历
        value={[selectedDate, null]}
        onChange={([newDate]) => setSelectedDate(newDate)}
        slots={{
          startInput: (props) => <TextField {...props} label="选择日期" />,
          endInput: () => null, // 隐藏结束日期输入框
        }}
      />
    </LocalizationProvider>
  );
}

两种方法都能实现单日期选择+双日历显示的效果，方法一无需依赖Pro版本，兼容性更强。

内容的提问来源于stack exchange，提问作者alireza tafreshi