Merge pull request #3709 from DanielSharp01/master

fix(months): monthClassName is passed the month instead of the current day

Author: martijnrusschen

docs-site/src/examples/excludeDatesMonthPicker.js

@@ -5,8 +5,10 @@
       selected={startDate}
       onChange={(date) => setStartDate(date)}
       dateFormat="MM/yyyy"
-      excludeDates={[1661990400000, 1664582400000, 1667260800000, 1672531200000]}
+      excludeDates={[
+        1661990400000, 1664582400000, 1667260800000, 1672531200000,
+      ]}
       showMonthYearPicker
     />
   );
-};
+};

docs-site/src/examples/includeDatesMonthPicker.js

@@ -5,8 +5,10 @@
       selected={startDate}
       onChange={(date) => setStartDate(date)}
       dateFormat="MM/yyyy"
-      includeDates={[1661990400000, 1664582400000, 1667260800000, 1672531200000]}
+      includeDates={[
+        1661990400000, 1664582400000, 1667260800000, 1672531200000,
+      ]}
       showMonthYearPicker
     />
   );
-};
+};

src/month.jsx

@@ -339,7 +339,9 @@ export default class Month extends React.Component {
       excludeDates,
       includeDates,
     } = this.props;
-    const _monthClassName = monthClassName ? monthClassName(day) : undefined;
+    const _monthClassName = monthClassName
+      ? monthClassName(utils.setMonth(day, m))
+      : undefined;
     const labelDate = utils.setMonth(day, m);
     return classnames(
       "react-datepicker__month-text",
@@ -355,7 +357,8 @@ export default class Month extends React.Component {
           selected
         ),
         "react-datepicker__month-text--keyboard-selected":
-            !this.props.disabledKeyboardNavigation && utils.getMonth(preSelection) === m,
+          !this.props.disabledKeyboardNavigation &&
+          utils.getMonth(preSelection) === m,
         "react-datepicker__month--in-range": utils.isMonthinRange(
           startDate,
           endDate,

test/datepicker_test.js

@@ -1984,7 +1984,7 @@ describe("DatePicker", () => {
       expect(utils.getMinutes(date)).to.equal(22);
     });
   });
-  
+
   it("should selected month when specified minDate same month", () => {
     const selected = utils.newDate("2023-01-09");
     let date = null;

test/month_test.js

@@ -935,7 +935,7 @@ describe("Month", () => {
 
   describe("if keyboard navigation is disabled", () => {
     const renderMonth = (props) =>
-        mount(<Month showMonthYearPicker {...props} />);
+      mount(<Month showMonthYearPicker {...props} />);
 
     it("should not have the selected class", () => {
       let preSelected = utils.newDate("2015-08-01");
@@ -952,9 +952,9 @@ describe("Month", () => {
       });
 
       expect(
-          monthComponent
-              .find(".react-datepicker__month--selected")
-              .hasClass("react-datepicker__month-text--keyboard-selected")
+        monthComponent
+          .find(".react-datepicker__month--selected")
+          .hasClass("react-datepicker__month-text--keyboard-selected")
       ).to.equal(false);
     });
   });