能否控制MUI DatePicker的view属性实现自定义视图切换逻辑？

我想要实现以下DatePicker视图切换流程：

• 用户点击切换视图按钮时，流程为 day -> month -> year：默认打开day视图，点击切换按钮显示month视图，再次点击显示year视图
• 从日历中选择月份时，流程为 month -> day
• 选择年份时，流程为 year -> month -> day

我尝试通过控制MUI DatePicker的view属性来实现，但效果不符合预期，它还是遵循views属性设定的默认流程。是不是我误解了它的工作方式？

代码示例：

export default function DatePickerViews() {
  const [view, setView] = useState<"day" | "year" | "month">("day");

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        views={["day", "month", "year"]}
        view={view}
        slotProps={{
          switchViewButton: {
            onClick: (event) => {
              switch (view) {
                case "day":
                  setView("month");
                  break;
                case "month":
                  setView("year");
                  break;
                case "year":
                  setView("month");
                  break;
              }
            },
          },
        }}
        onMonthChange={(event) => {
          setView("day");
        }}
        onYearChange={(event) => {
          setView("month");
        }}
      />
    </LocalizationProvider>
  );
}

MUI DatePicker的view属性确实能控制当前显示的视图，但默认情况下，组件会在用户选择日期/月份/年份时自动按照views数组的顺序切换视图，这会覆盖你手动设置的view状态。要实现自定义逻辑，需要阻止这种默认行为，同时结合openTo属性手动控制视图。

修改后的代码 #

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

export default function DatePickerViews() {
  const [view, setView] = useState<"day" | "month" | "year">("day");

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        views={["day", "month", "year"]}
        view={view}
        openTo={view}
        slotProps={{
          switchViewButton: {
            onClick: (event) => {
              event.preventDefault();
              switch (view) {
                case "day":
                  setView("month");
                  break;
                case "month":
                  setView("year");
                  break;
                case "year":
                  setView("month");
                  break;
              }
            },
          },
        }}
        onMonthChange={(event) => {
          event.preventDefault();
          setView("day");
        }}
        onYearChange={(event) => {
          event.preventDefault();
          setView("month");
        }}
      />
    </LocalizationProvider>
  );
}

关键说明 #

1. 阻止默认行为：在切换按钮点击事件、onMonthChange和onYearChange中调用event.preventDefault()，避免组件自动按views顺序切换视图，确保自定义逻辑生效。
2. 设置openTo属性：将openTo与view状态绑定，保证DatePicker打开时显示正确的初始视图。
3. 手动控制视图：完全通过setView控制视图切换，严格遵循你定义的三个流程：
   • 点击切换按钮时，按day→month→year→month循环切换
   • 选择月份后直接切到day视图
   • 选择年份后先切到month视图，选完月份再切到day视图

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