如何在 react-day-picker 日期范围选择器中切换月份和年份答案

【问题标题】：How to switch between month and year in react-day-picker date range selector如何在 react-day-picker 日期范围选择器中切换月份和年份
【发布时间】：2021-05-06 20:33:37
【问题描述】：

我正在使用来自 react 日期选择器的日期范围选择器作为我的开始日期和结束日期。当使用日期范围选择器时，它会在选择两个日期时显示两个带有良好 UI 的日历。

现在，我想在两个日历中分别切换月份和年份。我看到了文档，其中提供了一个示例，该示例仅在我们有一个日历时才有效。我仍然尝试在文档的帮助下添加月份和年份下拉列表，但是在切换时我无法检测到触发此事件的日历以及我必须更新日期的日历。

<DayPicker
          className="Range"
          numberOfMonths={2}
          selectedDays={selectedDays}
          disabledDays={disabledDays}
          modifiers={modifiers}
          onDayClick={handleDayClick}
          onDayMouseEnter={handleDayMouseEnter}
          captionElement={({ date, localeUtils }) => (
            <YearMonthDropDown
              date={date}
              localeUtils={localeUtils}
              onChange={handleYearMonthChange}
            />
          )}
        />

在我的情况下，我只有一个输入字段，它同时具有开始日期和结束日期，因此我使用范围选择器来显示两个日历。这里的 YearMonthDropDown 是一个简单的反应组件，它显示月份和年份的下降，handleYearMonthChange 方法不知道事件是从哪个日历触发的。

日期范围选择器： https://react-day-picker.js.org/examples/selected-range-enter

月份和年份切换下拉 https://react-day-picker.js.org/examples/elements-year-navigation

【问题讨论】：

标签： reactjs react-day-picker

【解决方案1】：

在这种情况下，您必须使用两个单独的日期选择器组件：

<div>
  <DayPicker
    className="Range"
    selectedDays={selectedDays}
    disabledDays={disabledDays}
    modifiers={modifiers}
    onDayClick={handleDayClick}
    onDayMouseEnter={handleDayMouseEnter}
    captionElement={({ date, localeUtils }) => (
      <YearMonthDropDown
        date={date}
        localeUtils={localeUtils}
        onChange={handleYearMonthChange}
        id="first-year-dropdown"
      />
    )}
  />
</div>
<div>
  <DayPicker
    className="Range"
    selectedDays={selectedDays}
    disabledDays={disabledDays}
    modifiers={modifiers}
    onDayClick={handleDayClick}
    onDayMouseEnter={handleDayMouseEnter}
    captionElement={({ date, localeUtils }) => (
      <YearMonthDropDown
        date={date}
        localeUtils={localeUtils}
        onChange={handleYearMonthChange}
        id="second-year-dropdown"
      />
    )}
  />
</div>

使用 numberOfMonths 道具，您可以在屏幕上显示两个月，但只有一个日历实例可用，您无法独立管理月份。

【讨论】：