如何将MUI Datepicker选中的日期值转换为YYYY-MM-DD格式？

你当前用的是AdapterDayjs作为日期适配器，所以DatePicker的onChange回调返回的newValue是Dayjs对象，不是原生Date对象。直接把Dayjs对象传给moment()时，moment没法正确解析，会默认生成当前日期，这就是你拿到错误结果的原因。

两种处理方式任选其一即可：

方式一：改用Moment日期适配器 #

既然要用到moment.js，直接把MUI的日期适配器换成AdapterMoment，这样DatePicker会直接返回moment对象，不用额外转换：

import * as React from "react";
import moment from "moment";
import TextField from "@mui/material/TextField";
// 替换成Moment适配器
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export default function BasicDatePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterMoment}>
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          // 此时newValue是moment对象，直接格式化
          const formattedDate = newValue.format("YYYY-MM-DD");
          console.log("格式化后日期", formattedDate);
          setValue(newValue);
          // 这里可以把formattedDate作为请求payload使用
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

方式二：继续用Dayjs适配器，转换后处理 #

如果不想换适配器，先把Dayjs对象转成原生Date对象，再传给moment：

import * as React from "react";
import moment from "moment";
import TextField from "@mui/material/TextField";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export default function BasicDatePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DatePicker
        label="Basic example"
        value={value}
        onChange={(newValue) => {
          // 先将Dayjs对象转为原生Date
          const nativeDate = newValue.toDate();
          const formattedDate = moment(nativeDate).format("YYYY-MM-DD");
          console.log("格式化后日期", formattedDate);
          setValue(newValue);
          // 使用formattedDate作为请求payload
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

嫌麻烦的话，甚至可以直接用Dayjs自带的格式化方法，不用moment：

// 无需导入moment，直接用Dayjs的format方法
const formattedDate = newValue.format("YYYY-MM-DD");

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