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(