How to switch between month and year in date range selector calendars independently when having one input field.

[gudapraveenkumar]

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