[英]react-datepicker years range
我正在使用反应日期选择器 package.https://reactdatepicker.com/
我正在尝试按照他们的示例创建一个具有年份范围的自定义日期选择器,但我无法使该range
起作用。 我什至不确定我是否从正确的地方导入那个range
。
我的代码:
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";
函数 getYear 和 getMonth 从date-fns库导入到react-datepicker/src/date_utils.js
我不知道范围 function。我看到它在他们站点的一个示例中使用(只是一堆示例,没有文档),但没有别的。
您可以简单地从 date-fns(作为 DataPicker 的依赖项)导入并创建一个范围 function。
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import getYear from "date-fns/getYear";
import getMonth from "date-fns/getYear";
import "react-datepicker/dist/react-datepicker.css";
const Foo = () => {
const [startDate, setStartDate] = useState(new Date());
const range = (start, end) => {
return new Array(end - start).fill().map((d, i) => i + start);
};
const years = range(1990, getYear(new Date()));
(...)
您可以在此处查看工作演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.