MUI X Date Picker点击按钮增减日期异常跳转至1970年求助

你的问题出在直接操作原生Date对象并以数字形式更新state：datePicker.$d是dayjs包装的原生Date对象，datePicker.$d + 1会将Date转为毫秒级时间戳后加1，得到的是一个数字而非dayjs实例，DatePicker接收这个数字后会解析为1970-01-01加上该毫秒数，所以才会跳到1970年。

MUI X DatePicker完全支持自定义增减日期的功能，不需要更换组件，只需用dayjs提供的API来正确处理日期：

修复步骤： #

• 用dayjs的add(1, 'day')和subtract(1, 'day')方法来增减天数，这两个方法会返回新的dayjs实例，符合state的类型要求
• 避免依赖按钮的innerText判断操作类型，直接传递动作标识更可靠
• 加1天时需判断是否超过maxDate（当前日期），避免违反disableFuture的限制

修改后的完整代码： #

import React, { useState } from "react";

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

function AddEntry(props) {
  const [datePicker, setDatePicker] = useState(dayjs(new Date()));
  const maxDate = dayjs(new Date()); // 用dayjs统一处理日期

  const handleArrows = (action) => {
    if (action === "next") {
      const newDate = datePicker.add(1, 'day');
      // 不超过最大日期才更新
      if (!newDate.isAfter(maxDate)) {
        setDatePicker(newDate);
      }
    } else {
      setDatePicker(datePicker.subtract(1, 'day'));
    }
  };

  return (
    <>
      <label className="date-label">Date:</label>
      <div className="date-field">
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <button
            className="arrow-btn"
            onClick={() => handleArrows("prev")}
          >
            {"<"}
          </button>
          <DatePicker
            disableFuture
            openTo="day"
            views={["month", "day"]}
            value={datePicker}
            maxDate={maxDate} // 统一用dayjs对象
            onChange={(newDate) => {
              setDatePicker(newDate);
            }}
            inputFormat="MM/DD/YYYY"
            renderInput={(params) => <TextField {...params} />}
          />
          <button
            className="arrow-btn"
            onClick={() => handleArrows("next")}
          >
            {">"}
          </button>
        </LocalizationProvider>
      </div>
    </>
  );
}
export default AddEntry;

关键说明： #

1. 所有日期都用dayjs实例处理，保持类型统一，避免原生Date和dayjs对象混用导致的解析问题
2. add和subtract方法会返回新的dayjs对象，符合React state的不可变更新原则
3. 增加了maxDate的判断，确保点击“>”按钮时不会选中未来日期，和disableFuture属性保持一致

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