How to switch between month and year in react-day-picker date range selector

Question

I'm using date range selector from react day picker for my start and end dates. When date range selector is used it displays two calendars with some good UI when selecting both the dates.

Now, I want to switch month and year in both the calendars independently. I saw the documentation there is an example provided which works only if we have one calendar. Still I tried to add month and year drop down with the help of documentation but when switching I cannot detect from which calendar this event is triggered and to which calendar I have to update the dates.

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

In my case I have only one input field which has both start and end dates so I used range selector to display two calendars. Here YearMonthDropDown is a simple react component which displays month and year drops and handleYearMonthChange method don't know from which calendar the event is triggered.

Date range selector: https://react-day-picker.js.org/examples/selected-range-enter

Month and year switch drop down https://react-day-picker.js.org/examples/elements-year-navigation

score 1 · Answer 1 · answered Oct 06 '21 at 11:09

In this case, You must use two separate day-picker component:

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

With the numberOfMonths props, You have two months on screen, but only one instance of calendar is available and you can't manage the months independently.

How to switch between month and year in react-day-picker date range selector

1 Answers1