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

【问题标题】：React Datepicker - Add previous and next year buttonsReact Datepicker - 添加上一年和下一年的按钮
【发布时间】：2020-07-28 05:37:14
【问题描述】：

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

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

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

注意添加的双箭头一次跳过一年。

【问题讨论】：

标签： reactjs react-datepicker

【解决方案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>
)}

【讨论】：