react-datepicker 年份范围答案

【问题标题】：react-datepicker years rangereact-datepicker 年份范围
【发布时间】：2020-08-02 21:47:10
【问题描述】：

我正在使用 react-datepicker 包。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);

【问题讨论】：

标签： javascript reactjs datepicker

【解决方案1】：

使用下面的导入，文档中的所有代码都可以正常工作！

import { getMonth, getYear } from 'date-fns';
import range from "lodash/range";

【讨论】：

非常感谢，这应该在文档中提到。

【解决方案2】：

函数getYear和getMonth从date-fns库导入react-datepicker/src/date_utils.js

我不知道范围函数。我看到它在他们的site 的一个示例中被使用（只是一堆示例，没有文档），但没有别的。

您可以简单地从 date-fns（作为 DataPicker 的依赖项）导入并创建一个范围函数。

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()));
(...)

您可以查看工作演示 here。

【讨论】：