標題重寫為：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物件。