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

Question

我在 React-Hook-Form 中使用 MUI

DatePicker

组件。当我控制台记录日期值时，我发现它是一个字符串。

ReactDOM.createRoot(document.getElementById('root')).render(
    <LocalizationProvider dateAdapter={AdapterDayjs}>
        <Demo />
    </LocalizationProvider>
)

import {Controller, useForm} from "react-hook-form";

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

    return (
        <form>
            <Controller
                name="dateOfBirth"
                control={control}
                rules={{valueAsDate: true}}
                render={({field: {onChange}}) => (
                    <DatePicker
                        label="Date of Birth"
                        format="YYYY-MM-DD"
                        onChange={date => onChange(dayjs(date).format("YYYY-MM-DD"))}
                    />
                )}
            />
        </form>
    )
}

在此输入图片描述

由于我的 Spring Boot 后端请求 dateOfBirth 值的数据类型为 Date 对象，因此我将

rules={{valueAsDate: true}}

添加到

<Controller/>

但它不起作用。有人可以教我如何将值从字符串转换为日期吗？

Answer 1

我在过去的一个项目中遇到了这个问题，问题是我发送到后端的结构是错误的。例如，后端想要一个格式为

dayjs(data.order_date).format("YYYY-MM-DD HH:mm:ss")

的日期，但我发送了

dayjs(data.order_date).format("YYYY-MM-DD")

并且我收到了与您相同的错误。您可能没有以正确的格式发送日期。

如果有办法检查 spring-boot 后端以了解可接受的格式，那么你就会知道 dayjs 需要什么