Calender icon fix #3525

Author: feba.baby

src/index.jsx

@@ -1178,6 +1178,14 @@ export default class DatePicker extends React.Component {
   renderInputContainer() {
     return (
       <div className="react-datepicker__input-container">
+        <svg
+          className="react-datepicker__calender-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+          onClick={this.renderDateInput()}
+        >
+          <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,13 @@
   position: relative;
   display: inline-block;
   width: 100%;
+  .react-datepicker__calender-icon {
+    position: absolute;
+    padding: 0.5rem;
+  }
+  input {
+    padding: 6px 10px 5px 25px;
+  }
 }
 
 .react-datepicker__year-read-view,
@@ -701,3 +708,9 @@
   width: 1px;
   white-space: nowrap;
 }
+
+.react-datepicker__calender-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}