react日期选择器未设置日期

Question

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

这是我的代码

<DatePicker
className="form-control form-control-sm"
type="text"
size="sm"
placeholder=""
onChange={handleChange}
value={values}
/>
const handleDateChange = (date) => {
alert(date);
};

如何设置所选日期？

Answer 1

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

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

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

要使用DatePicker，您需要为selected属性提供一个日期，以便它可以选择日期(例如，今天的日期(。此外，如果你想存储该日期，你需要为它创建一个状态，以便以后可以使用它。最后，你需要在调用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>
);
}