React Datepicker-添加上一年和下一年的按钮

Question

我正在将react-datepicker用于需要用户确切出生日期的项目。在这种情况下，必须使用日期选择器，因此下拉菜单在这里不起作用。

问题在于，只有按钮可以一次跳过几个月。如果用户选择20年前的日期，则必须单击240次，而不是出色的用户体验。我没有在library docs中找到有关添加此选项的任何内容。我发现最接近的是日期选择器中一个月和一年的下拉菜单-不太优雅。

如何在下面的模型中添加按钮？

请注意，添加了双箭头以一次跳过一年。

Answer 1

通过修改文档中的customHeader示例来找到解决方案。仍然需要进行调整，例如如果超出范围则禁用按钮，设计按钮等，但是认为它在当前状态下可能很有用。

const years = range(1990, new Date().getFullYear());
const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];

/* then adding this prop to your already-configured datepicker */

renderCustomHeader={({
  date,
  changeYear,
  changeMonth,
  decreaseMonth,
  increaseMonth,
  prevMonthButtonDisabled,
  nextMonthButtonDisabled,
  prevYearButtonDisabled,
  nextYearButtonDisabled,
  increaseYear,
  decreaseYear
}) => (
  <div
    style={{
      margin: 10,
      display: "flex",
      justifyContent: "center"
    }}
  >
    <button onClick={decreaseYear} disabled={prevYearButtonDisabled}>
    {"<<"}
    </button>
    <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
    {"<"}
    </button>
    <p>{months[date.getMonth()]} {date.getFullYear()}</p>

    <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
    {">"}
    </button>
    <button onClick={increaseYear} disabled={nextYearButtonDisabled}>
    {">>"}
    </button>
  </div>
)}