From 765d3ac5e71c2087938f4c8549f45120c3a74696 Mon Sep 17 00:00:00 2001 From: Omar Houmz Date: Mon, 4 Dec 2023 14:22:42 +0100 Subject: [PATCH 1/3] feature: Add day parameter to renderMonthContent function --- docs-site/src/examples/renderCustomMonth.js | 2 +- src/month.jsx | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/docs-site/src/examples/renderCustomMonth.js b/docs-site/src/examples/renderCustomMonth.js index 2646d1eb8..11a810a05 100644 --- a/docs-site/src/examples/renderCustomMonth.js +++ b/docs-site/src/examples/renderCustomMonth.js @@ -1,5 +1,5 @@ () => { - const renderMonthContent = (month, shortMonth, longMonth) => { + const renderMonthContent = (month, shortMonth, longMonth, day) => { const tooltipText = `Tooltip for month: ${longMonth}`; return {shortMonth}; }; 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()} ); } From 86d46a1b2dbaa1a18bdceeeadd4535d43ace6e2c Mon Sep 17 00:00:00 2001 From: Omar Houmz Date: Mon, 4 Dec 2023 17:30:32 +0100 Subject: [PATCH 2/3] test: add assertion for day --- test/month_test.test.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) 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( From 7105690fe35d64a266a0d1f6cd2cca48d1778f3c Mon Sep 17 00:00:00 2001 From: Omar Houmz Date: Mon, 4 Dec 2023 22:34:58 +0100 Subject: [PATCH 3/3] feature: use day in renderCustomMonth example --- docs-site/src/examples/renderCustomMonth.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs-site/src/examples/renderCustomMonth.js b/docs-site/src/examples/renderCustomMonth.js index 11a810a05..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, day) => { - const tooltipText = `Tooltip for month: ${longMonth}`; + const fullYear = new Date(day).getFullYear(); + const tooltipText = `Tooltip for month: ${longMonth} ${fullYear}`; + return {shortMonth}; }; return (