fix: #4401 monthsShown with MonthYearPicker or QuarterYearPicker

Hacker0x01 · Mar 17, 2024 · f1c23ac · f1c23ac
1 parent 8ef2eef
commit f1c23ac
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 9 deletions.
diff --git 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
@@ -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(

diff --git 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";