迁移至MUI X MobileDatePicker后，如何设置初始日期？

在从material-ui-pickers-mui5的DatePicker迁移到@mui/x-date-pickers的MobileDatePicker时，原组件的initialFocusedDate属性确实已被移除，你可以根据实际需求选择以下两种方案：

1. 设置初始选中的日期（默认值） #

如果需要设置组件加载时默认选中的日期，直接使用defaultValue（非受控模式）或value（受控模式）即可：

非受控模式示例： #

import { MobileDatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs from "dayjs";

function MyDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <MobileDatePicker
        label="选择日期"
        defaultValue={dayjs("2024-05-15")} // 设置初始选中的日期
        onChange={(date) => console.log(date)}
      />
    </LocalizationProvider>
  );
}

受控模式示例： #

import { useState } from "react";
import { MobileDatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs from "dayjs";

function MyControlledDatePicker() {
  const [selectedDate, setSelectedDate] = useState(dayjs("2024-05-15"));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <MobileDatePicker
        label="选择日期"
        value={selectedDate}
        onChange={(date) => setSelectedDate(date)}
      />
    </LocalizationProvider>
  );
}

2. 设置日历面板初始显示/聚焦的日期（替代原initialFocusedDate） #

如果你的需求是打开日历面板时，默认显示某个特定日期的视图（而非选中该日期），可以使用initialVisibleMonth属性：

import { MobileDatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs from "dayjs";

function MyDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <MobileDatePicker
        label="选择日期"
        defaultValue={null} // 初始选中日期可以为空
        // 设置打开时显示2024年6月的视图
        initialVisibleMonth={() => dayjs("2024-06-01")}
        onChange={(date) => console.log(date)}
      />
    </LocalizationProvider>
  );
}

initialVisibleMonth接受一个返回日期对象的函数，用来指定日历面板打开时默认渲染的月份（或日期），完全可以替代原initialFocusedDate的功能——让用户打开面板时直接看到目标日期区域。

内容的提问来源于stack exchange，提问作者Sohaib Najjar