反应日期选择器未设置日期

Question

我在我的项目中使用 react date-picker 库。当前 date-picker 正在正确加载。但是当我 select 一个日期时 - 它没有设置为文本框。如何为我的文本框设置 select 编辑日期？

这是我的代码

  <DatePicker
     className="form-control form-control-sm"
     type="text"
     size="sm"
     placeholder=""
     onChange={handleChange}
     value={values}
  />

 const handleDateChange = (date) => {
    alert(date);
 };

如何设置select日期？

Answer 1

我认为它没有为您设置日期的原因是因为您使用的 DatePicker 错误。

您正在定义一个 handleDateChange 函数，但您没有在任何地方使用它。然后你在 DatePicker 中使用 handleChange 函数，但我认为它没有定义，因为你没有提供它的代码。接下来，您将 value 设置为 values，由于缺少提供的代码，我认为它也是未定义的。

不过，我可以给你一个提示。

要使用 DatePicker，您需要向 selected 属性提供日期，以便它可以 select 日期（例如今天的日期）。另外，如果你想存储那个日期，你需要为它创建一个状态，以便你以后可以使用它。最后，您需要在调用 DatePicker 之前定义一个函数，该函数将处理您所在州的新日期设置。如果你这样做，你将有一个工作 DatePicker。我还为您提供了一个如何使用 DatePicker 的小示例。我还建议阅读“react-datepicker”的文档，您可以在其中找到大部分信息以及更多信息。

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [date, setDate] = useState(new Date());

  const handleChange = (date) => {
    setDate(date);
  };

  return (
    <div>
      <DatePicker
        className="form-control form-control-sm"
        type="text"
        size="sm"
        placeholder=""
        selected={date}
        onChange={handleChange}
      />
    </div>
  );
}

反应日期选择器未设置日期

react date-picker not set the date

reactjs

react-datepicker