用户选择的日期不显示在输入框中答案

【问题标题】：user selected date doesnt show in the input box用户选择的日期不显示在输入框中
【发布时间】：2020-01-20 05:28:30
【问题描述】：

我正在使用 react-hook-form 和 Datepicker。我试图显示用户选择一个但没有显示的日期。但是数据仍然通过onsubmit。我尝试用 Controller 包装它并进行控制

import DatePicker from "react-datepicker";
import { useForm, Controller } from "react-hook-form";

<Controller
  as={<DatePicker />}
  name="end"
  control={control}
  onChange={([selected]) => {
    return { value: selected };
  }}
/>

【问题讨论】：

标签： reactjs datepicker react-hooks

【解决方案1】：

要显示选定的日期，您必须将 selected 属性传递给 react-datepicker 包的 DatePicker 组件。试试这个：

<DatePicker
  selected={this.state.startDate}
  onChange={this.handleChange}
/>

【讨论】：

【解决方案2】：

您需要通过您选择的日期。

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
    const App = () => {
      const [startDate, setStartDate] = useState(new Date());
      return (
        <DatePicker
          selected={startDate}
          onChange={date => setStartDate(date)}
          showTimeSelect
          timeFormat="HH:mm"
          timeIntervals={15}
          timeCaption="time"
          dateFormat="MMMM d, yyyy h:mm aa"
        />
      );
    };

Demo

【讨论】：

【解决方案3】：

react-select 的 selected 属性需要一个 moment.js 日期，而不是普通的 javascript 日期。请尝试以下操作：

<Controller
  as={<DatePicker />}
  name="end"
  control={control}
  onChange={([selected]) => {
    return { value: moment(selected) };
  }}
/>

【讨论】：