Repository: Hacker0x01/react-datepicker (ts)

Issue:
Is there any way to show 2 years months in month range select.
Is there any way to show 2 years months in month range select. 
With monthsShown={2} its render same year in two section


![image](https://github.com/Hacker0x01/react-datepicker/assets/107095297/93ae367e-9836-434b-af71-2ea9c9b80d0c)

tried with following code: -

<DatesPicker
      selected={startDate}
      monthsShown={2}
      showMonthYearPicker
      onChange={onChanges}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      dateFormat="MM/yyyy"
   />

Thanks!!

Pull request description:
fix: #4401 monthsShown with MonthYearPicker or QuarterYearPicker
## Description
**Linked issue**:  close #4401

**Problem**
See issue #4401

**Changes**
- In the loop process that creates the Month component, modified to add the year instead of the month if it is a MonthYearPicker or QuarterYearPicker.
- Modified to take year into account in determining `XX--keyboard-selected` class.

## Screenshots
<!-- If applicable, add screenshots to help explain your improvements -->

## To reviewers
<!-- Additional comments for reviewers -->

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.


Patch:
diff --git a/src/calendar.jsx b/src/calendar.jsx
index e9447c52..5d5fe939 100644
--- a/src/calendar.jsx
+++ b/src/calendar.jsx
@@ -843,13 +843,15 @@ export default class Calendar extends React.Component {
     );
   };
 
-  renderYearHeader = () => {
-    const { date } = this.state;
+  renderYearHeader = ({ monthDate }) => {
     const { showYearPicker, yearItemNumber } = this.props;
-    const { startPeriod, endPeriod } = getYearsPeriod(date, yearItemNumber);
+    const { startPeriod, endPeriod } = getYearsPeriod(
+      monthDate,
+      yearItemNumber,
+    );
     return (
       <div className="react-datepicker__header react-datepicker-year-header">
-        {showYearPicker ? `${startPeriod} - ${endPeriod}` : getYear(date)}
+        {showYearPicker ? `${startPeriod} - ${endPeriod}` : getYear(monthDate)}
       </div>
     );
   };
@@ -876,11 +878,17 @@ export default class Calendar extends React.Component {
     const monthsToSubtract = this.props.showPreviousMonths
       ? this.props.monthsShown - 1
       : 0;
-    const fromMonthDate = subMonths(this.state.date, monthsToSubtract);
+    const fromMonthDate =
+      this.props.showMonthYearPicker || this.props.showQuarterYearPicker
+        ? addYears(this.state.date, monthsToSubtract)
+        : subMonths(this.state.date, monthsToSubtract);
     const monthSelectedIn = this.props.monthSelectedIn ?? monthsToSubtract;
     for (let i = 0; i < this.props.monthsShown; ++i) {
       const monthsToAdd = i - monthSelectedIn + monthsToSubtract;
-      const monthDate = addMonths(fromMonthDate, monthsToAdd);
+      const monthDate =
+        this.props.showMonthYearPicker || this.props.showQuarterYearPicker
+          ? addYears(fromMonthDate, monthsToAdd)
+          : addMonths(fromMonthDate, monthsToAdd);
       const monthKey = `month-${i}`;
       const monthShowsDuplicateDaysEnd = i < this.props.monthsShown - 1;
       const monthShowsDuplicateDaysStart = i > 0;
@@ -975,7 +983,7 @@ export default class Calendar extends React.Component {
     if (this.props.showYearPicker) {
       return (
         <div className="react-datepicker__year--container">
-          {this.renderHeader()}
+          {this.renderHeader({ monthDate: this.state.date })}
           <Year
             onDayClick={this.handleDayClick}
             selectingDate={this.state.selectingDate}
diff --git a/src/month.jsx b/src/month.jsx
index cb0f901f..801f1959 100644
--- a/src/month.jsx
+++ b/src/month.jsx
@@ -563,7 +563,7 @@ export default class Month extends React.Component {
         ),
         "react-datepicker__month-text--keyboard-selected":
           !this.props.disabledKeyboardNavigation &&
-          utils.getMonth(preSelection) === m,
+          this.isSelectedMonth(day, m, preSelection),
         "react-datepicker__month-text--in-selecting-range":
           this.isInSelectingRangeMonth(m),
         "react-datepicker__month-text--in-range": utils.isMonthInRange(
@@ -643,7 +643,8 @@ export default class Month extends React.Component {
           selected,
         ),
         "react-datepicker__quarter-text--keyboard-selected":
-          !disabledKeyboardNavigation && utils.getQuarter(preSelection) === q,
+          !disabledKeyboardNavigation &&
+          this.isSelectedQuarter(day, q, preSelection),
         "react-datepicker__quarter-text--in-selecting-range":
           this.isInSelectingRangeQuarter(q),
         "react-datepicker__quarter-text--in-range": utils.isQuarterInRange(


Test patch:
diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
index 0eb71222..bd2c7b37 100644
--- a/test/datepicker_test.test.js
+++ b/test/datepicker_test.test.js
@@ -2517,6 +2517,100 @@ describe("DatePicker", () => {
     });
   });
 
+  describe("multiple MonthYearPicker", () => {
+    const selected = utils.newDate("2023-05-15");
+
+    it("should contain a different year all headers.", () => {
+      let instance;
+      // 2 Years
+      const { rerender } = render(
+        <DatePicker
+          ref={(node) => {
+            instance = node;
+          }}
+          monthsShown={2}
+          selected={selected}
+          showMonthYearPicker
+        />,
+      );
+      fireEvent.click(instance.input);
+      const headers = instance.calendar.componentNode.querySelectorAll(
+        ".react-datepicker__header",
+      );
+      expect(headers).toHaveLength(2);
+      expect(headers[0].textContent).toBe("2023");
+      expect(headers[1].textContent).toBe("2024");
+
+      // 4 Years
+      rerender(
+        <DatePicker
+          ref={(node) => {
+            instance = node;
+          }}
+          monthsShown={4}
+          selected={selected}
+          showMonthYearPicker
+        />,
+      );
+      fireEvent.click(instance.input);
+      const headersMore = instance.calendar.componentNode.querySelectorAll(
+        ".react-datepicker__header",
+      );
+      expect(headersMore).toHaveLength(4);
+      expect(headersMore[0].textContent).toBe("2023");
+      expect(headersMore[1].textContent).toBe("2024");
+      expect(headersMore[2].textContent).toBe("2025");
+      expect(headersMore[3].textContent).toBe("2026");
+    });
+  });
+
+  describe("multiple QuarterYearPicker", () => {
+    const selected = utils.newDate("2023-05-15");
+
+    it("should contain a different year all headers.", () => {
+      let instance;
+      // 2 Years
+      const { rerender } = render(
+        <DatePicker
+          ref={(node) => {
+            instance = node;
+          }}
+          monthsShown={2}
+          selected={selected}
+          showQuarterYearPicker
+        />,
+      );
+      fireEvent.click(instance.input);
+      const headers = instance.calendar.componentNode.querySelectorAll(
+        ".react-datepicker__header",
+      );
+      expect(headers).toHaveLength(2);
+      expect(headers[0].textContent).toBe("2023");
+      expect(headers[1].textContent).toBe("2024");
+
+      // 4 Years
+      rerender(
+        <DatePicker
+          ref={(node) => {
+            instance = node;
+          }}
+          monthsShown={4}
+          selected={selected}
+          showQuarterYearPicker
+        />,
+      );
+      fireEvent.click(instance.input);
+      const headersMore = instance.calendar.componentNode.querySelectorAll(
+        ".react-datepicker__header",
+      );
+      expect(headersMore).toHaveLength(4);
+      expect(headersMore[0].textContent).toBe("2023");
+      expect(headersMore[1].textContent).toBe("2024");
+      expect(headersMore[2].textContent).toBe("2025");
+      expect(headersMore[3].textContent).toBe("2026");
+    });
+  });
+
   describe("shouldFocusDayInline state", () => {
     const dateFormat = "yyyy-MM-dd";