fix/render-custom-day (Hacker0x01#1637)

* fix/render-custom-day

* updated test

* update day to date

* add  default day render

* code coverage

* code cov Hacker0x01#2

* backwards compatible

Author: mkosir

docs-site/src/example_components.jsx

@@ -52,6 +52,7 @@ import IncludeTimes from "./examples/include_times";
 import InjectTimes from "./examples/inject_times";
 import DontCloseOnSelect from "./examples/dont_close_onSelect";
 import RenderCustomHeader from "./examples/render_custom_header";
+import RenderCustomDay from "./examples/render_custom_day";
 import TimeInput from "./examples/timeInput";
 import StrictParsing from "./examples/strict_parsing";
 import "react-datepicker/dist/react-datepicker.css";
@@ -263,6 +264,10 @@ export default class exampleComponents extends React.Component {
       title: "Custom header",
       component: <RenderCustomHeader />
     },
+    {
+      title: "Custom Day",
+      component: <RenderCustomDay />
+    },
     {
       title: "Input time",
       component: <TimeInput />

docs-site/src/examples/render_custom_day.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import getDate from "date-fns/getDate";
+
+export default class RenderCustomDay extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      startDate: new Date()
+    };
+  }
+
+  handleChange = date => {
+    this.setState({
+      startDate: date
+    });
+  };
+
+  renderDayContents = (day, date) => {
+    const tooltipText = `Tooltip for date: ${date}`;
+    return <span title={tooltipText}>{getDate(date)}</span>;
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <pre className="column example__code">
+          <code className="jsx">
+            {`
+<DatePicker
+    selected={this.state.startDate}
+    onChange={this.handleChange}
+    renderDayContents={this.renderDayContents}
+/>
+`}
+          </code>
+        </pre>
+        <div className="column">
+          <DatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            renderDayContents={this.renderDayContents}
+          />
+        </div>
+      </div>
+    );
+  }
+}

src/day.jsx

@@ -203,7 +203,10 @@ export default class Day extends React.Component {
         role="option"
       >
         {this.props.renderDayContents
-          ? this.props.renderDayContents(getDate(this.props.day))
+          ? this.props.renderDayContents(
+              getDate(this.props.day),
+              this.props.day
+            )
           : getDate(this.props.day)}
       </div>
     );

test/day_test.js

@@ -37,8 +37,9 @@ describe("Day", () => {
 
     it("should render custom day contents", () => {
       const day = newDate();
-      function renderDayContents(day) {
-        return <span>{day}</span>;
+      function renderDayContents(day, date) {
+        const tooltipText = `Tooltip for date: ${date}`;
+        return <span title={tooltipText}>{getDate(date)}</span>;
       }
       const shallowDay = renderDay(day, { renderDayContents });
       expect(shallowDay.find("span"));