Невозможно отобразить дату с помощью response-datepicker с формами react-hooks-forms на экране

Question

Невозможно отобразить дату с помощью response-datepicker с формами react-hooks-forms на экране

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

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

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

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

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

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

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

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

export default Form;

1

reactjs next.js datepicker react-hook-form react-datepicker

Источник

user10321762 09 авг '20 в 21:35

1 ответ

Решение

Другие вопросы по тегам reactjs next.js datepicker react-hook-form react-datepicker

user13897065 09 авг '20 в 23:39 2020-08-09 23:39 · Accepted Answer · 2020-08-09 23:39

Чао, твоя проблема в onChangeопора ЕслиvalueName Опора установлена как selected, onChange функция должна возвращать selected как это:

onChange={([selected]) => {
   setselectedDate(selected);
   return selected;
}}

Так что ваши DatePicker становится:

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

Не только, но, несмотря на то, что вы уже установили dateFormat в DatePicker элемент, чтобы получить данные в определенном формате, которые необходимо переформатировать, данные поступают из form. Поскольку формы реакции-хукиDatePicker использует moment на сегодняшний день я использовал moment для форматирования даты вывода.

Так onSubmit функция стала:

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

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