如何在React-Hook-Form中将字符串日期转为Date对象？

你的核心问题有两个：

• 错误地将valueAsDate放在了rules对象中（它是Controller的直接props，而非校验规则）
• 在DatePicker的onChange中手动将日期转为字符串，导致React Hook Form无法正确转换为Date对象

下面是两种可行的解决方案：

方案一：直接传递原生Date对象（推荐） #

MUI DatePicker搭配AdapterDayjs时，onChange返回的是dayjs实例，直接调用toDate()即可得到原生Date对象，传给React Hook Form的onChange：

import { Controller, useForm } from "react-hook-form";
import dayjs from "dayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export const Demo = () => {
  const { control, watch } = useForm({
    defaultValues: {
      dateOfBirth: null,
    }
  });

  // 可通过watch查看当前值类型
  const dateValue = watch("dateOfBirth");
  console.log("当前日期类型：", typeof dateValue, dateValue);

  return (
    <form>
      <Controller
        name="dateOfBirth"
        control={control}
        render={({ field: { onChange, value } }) => (
          <DatePicker
            label="Date of Birth"
            format="YYYY-MM-DD"
            // 将Date对象转为dayjs实例供DatePicker显示
            value={value ? dayjs(value) : null}
            // 将dayjs实例转为原生Date对象传给React Hook Form
            onChange={(date) => onChange(date?.toDate())}
          />
        )}
      />
    </form>
  );
};

方案二：修正valueAsDate的位置并传递标准格式字符串 #

如果你坚持要传递字符串格式的日期，需将valueAsDate从rules移到Controller的props中，确保传递的字符串能被原生Date构造函数正确解析：

import { Controller, useForm } from "react-hook-form";
import dayjs from "dayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export const Demo = () => {
  const { control, watch } = useForm({
    defaultValues: {
      dateOfBirth: null,
    }
  });

  const dateValue = watch("dateOfBirth");
  console.log("当前日期类型：", typeof dateValue, dateValue);

  return (
    <form>
      <Controller
        name="dateOfBirth"
        control={control}
        valueAsDate={true} // 正确放置位置：Controller的直接props
        render={({ field: { onChange, value } }) => (
          <DatePicker
            label="Date of Birth"
            format="YYYY-MM-DD"
            value={value ? dayjs(value) : null}
            onChange={(date) => onChange(dayjs(date).format("YYYY-MM-DD"))}
          />
        )}
      />
    </form>
  );
};

两种方案最终都能让dateOfBirth字段成为原生Date对象，符合Spring Boot后端的接收要求。

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