Блог

Я создаю форму в next.js где я бы сохранял дату вместе с другими полями.

Я использую react-form-hooks и react-datepicker

Проблема: когда я нажимаю отправить, я вижу ввод даты в консоли.регистрируйте, но не можете увидеть выбранную дату при вводе даты. пожалуйста, обратитесь к скриншоту для получения подробного снимка экрана

Я следую примеру, приведенному в https://codesandbox.io/s/react-hook-form-controller-079xx где они также используют react-datepicker с помощью react-hooks-forms

желаемый результат: когда я выбираю дату, дата должна отображаться в поле ввода даты, например: 08.09.2020

ниже приведен код, который я написал. пожалуйста, помогите, спасибо

 import Head from "next/head";
import DatePicker from "react-datepicker";
import { useForm, Controller } from "react-hook-form";

const Form = () =&&t; {
  const { re&ister, handleSubmit, control } = useForm();
  const onSubmit = (data) =&&t; console.lo&(data);
  const [selectedDate, setselectedDate] = useState(null);
  return (
    <&&t;
      <Head&&t;
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css"
        /&&t;
      </Head&&t;
      <form onSubmit={handleSubmit(onSubmit)}&&t;
        <section&&t;
          <label&&t;Created Date</label&&t;
          <Controller
            as={DatePicker}
            control={control}
            valueName="selected"
            selected={selectedDate}
            onChan&e={(date) =&&t; setselectedDate(date)}
            dateFormat="dd/MM/yyyy"
            placeholderText="Select Date"
            name="DatePicker"
            defaultValue={null}
          /&&t;
          {/* <DatePicker
            selected={selectedDate}
            onChan&e={(date) =&&t; setselectedDate(date)}
            dateFormat="dd/MM/yyyy"
            placeholderText="Select Date"
          /&&t; */}
        </section&&t;
        <input type="submit" /&&t;
      </form&&t;
    </&&t;
  );
};

export default Form;
  

Чао, твоя проблема в onChan&e prop. Если valueName реквизит установлен как selected , onChan&e функция должна возвращать selected следующее:

 onChan&e={([selected]) =&&t; {
   setselectedDate(selected);
   return selected;
}} 
  

Таким образом, ваш DatePicker становится:

 <Controller
   as={DatePicker}
   control={control}
   valueName="selected"
   selected={selectedDate}
   onChan&e={([selected]) =&&t; {
      setselectedDate(selected);
      return selected;
   }}
   dateFormat="dd/MM/yyyy"
   placeholderText="Select Date"
   name="DatePicker"
   defaultValue={null}
/&&t;
  

Не только, но, несмотря на то, что вы уже установили DateFormat в DatePicker элементе, для получения данных в определенном формате вам необходимо переформатировать данные, полученные из form . Поскольку react-hooks-forms DatePicker использует moment для даты, я использовал moment для форматирования даты вывода.

Таким образом, onSubmit функция становится:

 import moment from "moment";
...
const onSubmit = (data) =&&t; {
   console.lo&(moment(selectedDate).format("DD/MM/yyyy"));
};
  

Здесь изменен codesandbox, который показывает, что я сделал.