Titre réécrit comme : DateTimePicker intégré à React avec le formulaire de réaction-hook ne peut pas afficher correctement la date

Question

J'ai un formulaire auquel j'essaie d'ajouter un sélecteur de date/heure React, mais j'essaie également de l'intégrer avec react-hook-form pour qu'il fonctionne avec le reste du formulaire, mais cela ne semble pas fonctionner du tout .

Lors du premier rendu du formulaire, la date actuelle n'est pas affichée dans le sélecteur de date, seul "--------------" est affiché, et lorsque je sélectionne une date dans la fenêtre contextuelle, la date dans le champ ne s'affiche pas. ne change pas non plus.

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

On dirait que vous avez raison d'utiliser React-hook-form et React-datetime-picker. Le problème auquel vous êtes confronté peut être lié à la valeur initiale du champ de date mal définie.

Pour résoudre ce problème, vous pouvez définir la valeur initiale pour le champ de date en utilisant la propriété defaultValue dans le Controller. De plus, vous devez vous assurer que la valeur transmise à DateTimePicker est un objet Date, car React-datetime-picker attend une valeur Date.

Voici le code mis à jour :

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

En définissant defaultValue sur new Date(), le sélecteur de date devrait désormais afficher la date actuelle lors du premier rendu du formulaire. Assurez-vous également que lorsque vous transmettez la valeur au DateTimePicker à l’aide de new Date(value), il s’agit d’un objet Date.