如何使用react-datepicker

Question

我试图使用react-datepicker添加一个日期拾取器，但当我在codesandbox中尝试时，我得到了这个错误消息:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

尽管我已经把import { DatePicker } from "react-datepicker";和react-datepicker包添加到依赖列表中。

这是我的代码:

import { useState } from "react";
import { DatePicker } from "react-datepicker";
export default function App() {
const [startDate, setStartDate] = useState(new Date());
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div>
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
/>
</div>
</div>
);
}

Answer 1

第二行改为:import DatePicker from "react-datepicker";

这应该能解决你的问题!

Answer 2

下面是一个例子。在本例中，我们从日期选择器中选择一个月。

import React, { useCallback, useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const YourComponent = () => {
const [date, setDate] = useState<Date>(null);

const onDateChangeHandler = useCallback(date => setDate(date), [date]);
return (
<div className="position-relative">
<DatePicker
className="form-control w-100 text-center"
placeholderText="Select date"
selected={date}
onChange={onDateChangeHandler}
dateFormat="MM/yyyy"
showMonthYearPicker
showFullMonthYearPicker
showTwoColumnMonthYearPicker
dropdownMode="select"
/>
</div>
);
};

进一步阅读

反应DatePicker

Answer 3

我在代码中做了一些改变，试一下它应该可以工作。

import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function App() {
const [startDate, setStartDate] = useState(new Date());
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div>
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
/>
</div>
</div>
);
}