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

Question

我正在使用react datepicker进行一个需要用户确切出生日期的项目。此实例中必须使用日期选择器，因此下拉列表在此处不起作用。

问题是一次只能跳过几个月的按钮。如果用户选择一个20年前的日期，他们将不得不点击它240次，这不是很好的用户体验。我在库文档中没有找到任何关于添加此选项的内容。我发现的最接近的是日期选择器中月份和年度的下拉列表——没有那么优雅。

我怎样才能像下面的实物模型一样添加按钮？

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

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>
)}