react-datepicker年范围 [英] react-datepicker years range
本文介绍了react-datepicker年范围的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用react-datepicker软件包.https://reactdatepicker.com/
I am using the react-datepicker package.https://reactdatepicker.com/
按照他们的示例,我试图创建一个具有年份范围的自定义日期选择器,但是我无法使 range
起作用.我什至不确定是否要从正确的位置tbh导入该 range
.
I am trying to create a custom date picker with a years range, following their example but I can not make the range
work. I am not even sure if I am importing that range
from the right place 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);
推荐答案
在下面的导入中使用,文档中的所有代码都可以正常工作!
Use below imports and all the code in documentation will work fine!
import { getMonth, getYear } from 'date-fns';
import range from "lodash/range";
这篇关于react-datepicker年范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文