无法在屏幕上使用带有 react-hooks-forms 的 react-datepicker 显示日期答案

【问题标题】：Cannot display date with react-datepicker with react-hooks-forms on screen无法在屏幕上使用带有 react-hooks-forms 的 react-datepicker 显示日期
【发布时间】：2020-08-09 18:35:33
【问题描述】：

我正在 next.js 中制作一个表单，我将在其中存储日期和其他字段。

我正在使用 react-form-hooks 和 react-datepicker

问题：当我点击提交时，我可以在 console.log 中看到日期条目，但在日期输入中看不到所选日期。详情请参考截图 screenshot

我遵循https://codesandbox.io/s/react-hook-form-controller-079xx 中给出的示例，他们也使用 react-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;

【问题讨论】：

标签： reactjs datepicker next.js react-datepicker react-hook-form

【解决方案1】：

Ciao，你的问题出在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}
/>

不仅如此，尽管您已经在 DatePicker 元素中设置了 dateFormat，但要获取特定格式的数据，您需要重新格式化来自 form 的数据。由于 react-hooks-forms DatePicker 使用 moment 作为日期，我使用 moment 格式化输出日期。

所以onSubmit函数变成了：

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

Here 代码框已修改，显示我所做的。

【讨论】：

它仍然对我不起作用，我已经复制粘贴了您的解决方案，但它仍然不会在我的日期输入框中显示选定的日期。但我想说我的问题不是 console.log 中的输出，而是所选日期不会出现在日期输入框中的事实。就像当您通过日期选择器选择任何日期时，所选日期应该出现在日期输入框中，在我的情况下，它不会，占位符仍然存在并且不会消失，当我点击提交时，日期会被输出。跨度>
Ciao，我发现了你的问题。我修改了我的答案和代码框示例。
嘿，还是不行，我创建了一个代码框并粘贴了你提供的代码，问题是我已经检查了你提供的链接，它在那里工作正常，但在我的代码中不起作用, codesandbox.io/s/react-hook-form-err-date-picker-rhcig?file=/… 这是我的代码框的链接，请看一下代码。
哦，我找到了为什么你的例子不起作用。我们正在使用不同的 react-hook-form 版本！在您的代码沙箱中，您使用的是 v. 6.3.1 。在我的代码沙箱中，我使用 v. 5.5.1 。我刚刚在您的示例中更改了版本，并且一切正常。检查here
谢谢，伙计，成功了！不敢相信这是版本问题。您是否知道为什么它不能在最新版本中运行但在旧版本中运行的任何原因？