React DateTimePicker与react-hook-form集成后无法渲染日期的问题

你的问题出在两个关键地方：

• 未设置表单初始值：react-hook-form默认不会给字段赋初始值，startdate一开始是undefined，导致DateTimePicker无法识别，显示----------
• 组件属性名错误：你用了selected属性，但react-datetime-picker接收的是value属性，这会导致选择日期后无法同步到表单状态

修正步骤： #

1. 给useForm添加defaultValues，初始化startdate为当前日期或者null
2. 将DateTimePicker的selected改为value
3. 可选：添加clearIcon允许用户清空日期

修正后的代码： #

import { Controller, useForm } from 'react-hook-form'
import DateTimePicker from 'react-datetime-picker'
import 'react-datetime-picker/dist/DateTimePicker.css'
import 'react-calendar/dist/Calendar.css'

const Jobs = () => {
    // 初始化表单字段默认值
    const { control, register, handleSubmit, formState: { errors } } = useForm({
        defaultValues: {
            firstname: '',
            startdate: new Date() // 也可设为null实现初始空状态
        }
    });

    const onSubmit = handleSubmit(async ({ firstname, startdate }) => {
        console.log(startdate)
    })

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div>
                <input
                    id="firstname"
                    name="firstname"
                    type="text"
                    { ...register("firstname") }
                />
            </div>

            <div>
                <Controller
                    control={control}
                    name='startdate'
                    render={({ field: { onChange, value } }) => (
                        // 替换selected为react-datetime-picker的正确属性value
                        <DateTimePicker
                            onChange={onChange}
                            value={value}
                            clearIcon // 可选：启用清空按钮
                        />
                    )}
                />
            </div>
            <button type="submit">提交</button>
        </form>
    )
}

额外说明： #

• 如果需要初始空状态，把defaultValues里的startdate设为null即可，用户选择日期后会正常同步
• react-datetime-picker的onChange直接返回Date对象，react-hook-form的Controller能自动处理该类型，提交时可直接拿到正确的日期值

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