fix: #4401 monthsShown with MonthYearPicker or QuarterYearPicker

Hacker0x01 · Mar 16, 2024 · 6ca7ea7 · 6ca7ea7
1 parent 8ef2eef
commit 6ca7ea7
Show file tree

Hide file tree

Showing 2 changed files with 18 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(