diff --git a/docs-site/src/examples/renderCustomMonth.js b/docs-site/src/examples/renderCustomMonth.js index 2646d1eb8..d9ffa1798 100644 --- 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 {shortMonth}; }; return ( diff --git a/src/month.jsx b/src/month.jsx index c8f597eb6..db7fd71d9 100644 --- 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()} ); } diff --git a/test/month_test.test.js b/test/month_test.test.js index 31ccee3d1..beefafb61 100644 --- 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 custom render; + function renderMonthContent(_, __, ___, day) { + return custom render; } + const day = utils.newDate(); + const monthComponent = mount( , ); 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(