Средство выбора даты реакции не устанавливает дату
Я использую библиотеку react date-picker в своем проекте. В настоящее время date-picker загружается правильно. Но когда я выбираю дату, она не устанавливается в текстовое поле. Как установить выбранную дату для моего текстового поля?
это мой код
<DatePicker
className = "form-control form-control-sm"
type = "text"
size = "sm"
placeholder = ""
onChange = {handleChangeEvent}
value = {values}
/>
const handleDateChange = (date) => {
alert(date);
};
Как установить выбранную дату?
Ответы 1
Я думаю, что причина, по которой он не устанавливает дату для вас, заключается в том, что вы неправильно используете DatePicker.
Вы определяете функцию handleDateChange, но нигде ее не используете. Тогда вы используете функцию handleChangeEvent в DatePicker, но я предполагаю, что она не определена, поскольку вы не предоставили для нее код. Затем вы устанавливаете 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 handleChangeEvent = (date) => {
setDate(date);
};
return (
<div>
<DatePicker
className = "form-control form-control-sm"
type = "text"
size = "sm"
placeholder = ""
selected = {date}
onChange = {handleChangeEvent}
/>
</div>
);
}