我正在使用 react-datepicker 包。https://reactdatepicker.com/
我正在尝试按照他们的示例创建一个具有年份范围的自定义日期选择器,但我无法制作 range
工作。我什至不确定我是否要导入 range
从正确的地方tbh。
我的代码:
import DatePicker, {getYear, getMonth, range} from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";
const Foo = () => {
const [startDate, setStartDate] = useState(new Date());
const years = range(1990, getYear(new Date()) + 1, 1);
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
return (
<DatePicker
renderCustomHeader={({
date,
changeYear,
changeMonth,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled
}) => (
<div
style={{
margin: 10,
display: "flex",
justifyContent: "center"
}}
>
<button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
{"<"}
</button>
<select
value={getYear(date)}
onChange={({ target: { value } }) => changeYear(value)}
>
{years.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<select
value={months[getMonth(date)]}
onChange={({ target: { value } }) =>
changeMonth(months.indexOf(value))
}
>
{months.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
{">"}
</button>
</div>
)}
selected={startDate}
onChange={date => setStartDate(date)}
/>
);
};
我的错误:TypeError: Object(...) is not a function
const years = range(1990, getYear(new Date()) + 1, 1);
最佳答案
使用下面的导入,文档中的所有代码都可以正常工作!
import { getMonth, getYear } from 'date-fns';
import range from "lodash/range";
关于javascript - react-datepicker 年份范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63221355/