标题重写为：React集成DateTimePicker与react-hook-form无法正确显示日期

Question

我有一个表单，我正在尝试在其中添加一个React日期时间选择器，但我也试图将其与react-hook-form集成，以便它与表单的其余部分一起工作，但似乎根本不起作用。

当表单首次渲染时，日期选择器中不显示当前日期，只显示"----------"，而且当我从弹出窗口中选择日期时，字段中的日期也不会改变。

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, watch, formState: { errors } } = useForm();

    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 } }) => (
                        <DateTimePicker
                            onChange={onChange}
                            selected={value}
                        />
                    )}
                />
            </div>
        </form>
    )
}

Answer 1

看起来你在使用react-hook-form和react-datetime-picker方面是正确的。你面临的问题可能与日期字段的初始值设置不正确有关。

要解决这个问题，你可以使用Controller中的defaultValue属性为日期字段设置初始值。此外，你应该确保传递给DateTimePicker的值是一个Date对象，因为react-datetime-picker期望一个Date值。

下面是更新后的代码：

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();

  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"
          defaultValue={new Date()} // 将初始值设置为当前日期
          render={({ field: { onChange, value } }) => (
            <DateTimePicker onChange={onChange} value={value ? new Date(value) : null} />
          )}
        />
      </div>
    </form>
  );
};

通过将defaultValue设置为new Date()，日期选择器现在应该在表单首次渲染时显示当前日期。另外，确保使用new Date(value)将值传递给DateTimePicker时是一个Date对象。