Merge pull request Hacker0x01#3915 from qburst/master

Calendar icon fix  Hacker0x01#3525

Author: martijnrusschen

docs-site/src/components/Examples/index.js

@@ -90,6 +90,7 @@ import SelectsRange from "../../examples/selectsRange";
 import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabledDates";
 import CalendarStartDay from "../../examples/calendarStartDay";
 import ExternalForm from "../../examples/externalForm";
+import CalendarIcon from "../../examples/calendarIcon";
 
 import "./style.scss";
 import "react-datepicker/dist/react-datepicker.css";
@@ -105,6 +106,10 @@ export default class exampleComponents extends React.Component {
       title: "Default",
       component: Default,
     },
+    {
+      title: "Calendar Icon",
+      component: CalendarIcon,
+    },
     {
       title: "Calendar container",
       component: CalendarContainer,

docs-site/src/examples/calendarIcon.js

@@ -0,0 +1,10 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+    />
+  );
+};

docs/datepicker.md

@@ -44,6 +44,7 @@ General datepicker component.
 | `injectTimes`                | `array`                        |                 |                                                                                               |
 | `inline`                     | `bool`                         |                 |                                                                                               |
 | `isClearable`                | `bool`                         |                 |                                                                                               |
+| `showIcon`                   | `bool`                         |                 |                                                                                               |
 | `locale`                     | `string`                       |                 |                                                                                               |
 | `maxDate`                    | `instanceOf(Date)`             |                 |                                                                                               |
 | `maxTime`                    | `instanceOf(Date)`             |                 |                                                                                               |

docs/index.md

@@ -52,6 +52,7 @@
 | `injectTimes`                | `array`                        |                    |             |
 | `inline`                     | `bool`                         |                    |             |
 | `isClearable`                | `bool`                         |                    |             |
+| `showIcon`                   | `bool`                         |                    |             |
 | `locale`                     | `union(string\|shape)`         |                    |             |
 | `maxDate`                    | `instanceOfDate`               |                    |             |
 | `maxTime`                    | `instanceOfDate`               |                    |             |

src/index.jsx

@@ -181,6 +181,7 @@ export default class DatePicker extends React.Component {
     injectTimes: PropTypes.array,
     inline: PropTypes.bool,
     isClearable: PropTypes.bool,
+    showIcon: PropTypes.bool,
     locale: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.shape({ locale: PropTypes.object }),
@@ -1176,8 +1177,22 @@ export default class DatePicker extends React.Component {
   };
 
   renderInputContainer() {
+    const { showIcon } = this.props;
     return (
-      <div className="react-datepicker__input-container">
+      <div
+        className={`react-datepicker__input-container ${
+          showIcon ? "react-datepicker__view-calendar-icon" : ""
+        }`}
+      >
+        {showIcon && (
+          <svg
+            className="react-datepicker__calendar-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 448 512"
+          >
+            <path d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z" />
+          </svg>
+        )}
         {this.renderAriaLiveRegion()}
         {this.renderDateInput()}
         {this.renderClearButton()}

src/stylesheets/datepicker.scss

@@ -517,6 +517,17 @@
   position: relative;
   display: inline-block;
   width: 100%;
+
+  .react-datepicker__calendar-icon {
+    position: absolute;
+    padding: 0.5rem;
+  }
+}
+
+.react-datepicker__view-calendar-icon {
+  input {
+    padding: 6px 10px 5px 25px;
+  }
 }
 
 .react-datepicker__year-read-view,
@@ -701,3 +712,9 @@
   width: 1px;
   white-space: nowrap;
 }
+
+.react-datepicker__calendar-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}

test/datepicker_test.js

@@ -2092,4 +2092,37 @@ describe("DatePicker", () => {
       );
     });
   });
+
+  it("should not customize the className attribute if showIcon is set to false", () => {
+    let datePicker = TestUtils.renderIntoDocument(
+      <DatePicker selected={utils.newDate("2021-04-15")} />
+    );
+    let showIconClass = TestUtils.findRenderedDOMComponentWithClass(
+      datePicker,
+      "react-datepicker__input-container "
+    ).getAttribute("class");
+    expect(showIconClass).to.equal("react-datepicker__input-container ");
+  });
+
+  it("should display the Calendar icon if showIcon is set to true", () => {
+    let datePicker = TestUtils.renderIntoDocument(
+      <DatePicker selected={utils.newDate("2021-04-15")} showIcon />
+    );
+    let showIconClass = TestUtils.findRenderedDOMComponentWithClass(
+      datePicker,
+      "react-datepicker__input-container"
+    ).getAttribute("class");
+    expect(showIconClass).to.equal(
+      "react-datepicker__input-container react-datepicker__view-calendar-icon"
+    );
+
+    datePicker = TestUtils.renderIntoDocument(
+      <DatePicker selected={utils.newDate("2021-04-15")} showIcon />
+    );
+    showIconClass = TestUtils.findRenderedDOMComponentWithClass(
+      datePicker,
+      "react-datepicker__calendar-icon"
+    ).getAttribute("class");
+    expect(showIconClass).to.equal("react-datepicker__calendar-icon");
+  });
 });