Merge pull request #4405 from omarhoumz/feature/add-day-to-renderMont…

…hContent feature: Add day parameter to renderMonthContent function
Hacker0x01 · Dec 7, 2023 · 5cabc76 · 5cabc76
2 parents f92c727 + 7105690
commit 5cabc76
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/docs-site/src/examples/renderCustomMonth.js b/docs-site/src/examples/renderCustomMonth.js
@@ -1,6 +1,8 @@
 () => {
-  const renderMonthContent = (month, shortMonth, longMonth) => {
-    const tooltipText = `Tooltip for month: ${longMonth}`;
+  const renderMonthContent = (month, shortMonth, longMonth, day) => {
+    const fullYear = new Date(day).getFullYear();
+    const tooltipText = `Tooltip for month: ${longMonth} ${fullYear}`;
+
     return <span title={tooltipText}>{shortMonth}</span>;
   };
   return (

diff --git a/src/month.jsx b/src/month.jsx
@@ -626,11 +626,12 @@ export default class Month extends React.Component {
   };
 
   getMonthContent = (m) => {
-    const { showFullMonthYearPicker, renderMonthContent, locale } = this.props;
+    const { showFullMonthYearPicker, renderMonthContent, locale, day } =
+      this.props;
     const shortMonthText = utils.getMonthShortInLocale(m, locale);
     const fullMonthText = utils.getMonthInLocale(m, locale);
     if (renderMonthContent) {
-      return renderMonthContent(m, shortMonthText, fullMonthText);
+      return renderMonthContent(m, shortMonthText, fullMonthText, day);
     }
     return showFullMonthYearPicker ? fullMonthText : shortMonthText;
   };
@@ -753,8 +754,8 @@ export default class Month extends React.Component {
         {showMonthYearPicker
           ? this.renderMonths()
           : showQuarterYearPicker
-          ? this.renderQuarters()
-          : this.renderWeeks()}
+            ? this.renderQuarters()
+            : this.renderWeeks()}
       </div>
     );
   }

diff --git a/test/month_test.test.js b/test/month_test.test.js
@@ -826,18 +826,22 @@ describe("Month", () => {
 
   describe("custom renders", () => {
     it("should render custom month content", () => {
-      function renderMonthContent() {
-        return <span>custom render</span>;
+      function renderMonthContent(_, __, ___, day) {
+        return <span data-day={day}>custom render</span>;
       }
+      const day = utils.newDate();
+
       const monthComponent = mount(
         <Month
-          day={utils.newDate()}
+          day={day}
           renderMonthContent={renderMonthContent}
           showMonthYearPicker
         />,
       );
       const month = monthComponent.find(".react-datepicker__month-text").at(0);
-      expect(month.find("span").at(0).text()).toBe("custom render");
+      const span = month.find("span").at(0);
+      expect(span.text()).toBe("custom render");
+      expect(span.prop("data-day")).toBe(day);
     });
 
     it("should render custom quarter content", () => {
@@ -921,7 +925,7 @@ describe("Month", () => {
           setPreSelection: setPreSelection,
           preSelection: preSelected,
           disabledKeyboardNavigation: true,
-          showQuarterYearPicker: true
+          showQuarterYearPicker: true,
         });
 
         expect(