Tajuk ditulis semula sebagai: React bersepadu DateTimePicker dengan react-hook-form tidak boleh memaparkan tarikh dengan betul

Question

Saya mempunyai borang yang saya cuba tambahkan pemilih tarikh React, tetapi saya juga cuba menyepadukannya dengan react-hook-form supaya ia berfungsi dengan borang yang lain, tetapi ia nampaknya tidak berfungsi sama sekali .

Apabila borang mula-mula dipaparkan, tarikh semasa tidak dipaparkan dalam pemilih tarikh, hanya "----------" dipaparkan dan apabila saya memilih tarikh daripada pop timbul, tarikh dalam medan akan dipaparkan. tak berubah pun.

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

Nampaknya anda betul dalam menggunakan react-hook-form dan react-datetime-picker. Masalah yang anda hadapi mungkin berkaitan dengan nilai awal medan tarikh yang ditetapkan dengan tidak betul.

Untuk menyelesaikan masalah ini, anda boleh menetapkan nilai awal untuk medan tarikh menggunakan sifat defaultValue dalam Pengawal. Selain itu, anda harus memastikan bahawa nilai yang dihantar kepada DateTimePicker ialah objek Date, kerana react-datetime-picker menjangkakan nilai Date.

Berikut ialah kod yang dikemas kini:

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

Dengan menetapkan defaultValue kepada new Date(), pemilih tarikh kini harus memaparkan tarikh semasa apabila borang mula-mula dipaparkan. Juga, pastikan bahawa apabila menghantar nilai kepada DateTimePicker menggunakan Date(value) baharu ia adalah objek Date.