Added datepickers in create short URL form

package.json

@@ -43,6 +43,7 @@
     "ramda": "^0.25.0",
     "react": "^16.3.2",
     "react-copy-to-clipboard": "^5.0.1",
+    "react-datepicker": "^1.5.0",
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.3.2",
     "react-moment": "^0.7.6",

src/short-urls/CreateShortUrl.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import './CreateShortUrl.scss';
 import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
 import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import DatePicker from 'react-datepicker';
 import { Collapse } from 'reactstrap';
 import ReactTags from 'react-tag-autocomplete';
 import { assoc, replace } from 'ramda';
+import './CreateShortUrl.scss';
+import '../../node_modules/react-datepicker/dist/react-datepicker.css'
 
 export default class CreateShortUrl extends React.Component {
   state = {
@@ -36,6 +38,12 @@ export default class CreateShortUrl extends React.Component {
         onChange={e => this.setState({ [id]: e.target.value })}
         {...props}
       />;
+      const createDateInput = (id, placeholder) =>
+        <DatePicker
+          selected={this.state[id]}
+          className="form-control"
+          placeholderText={placeholder}
+        />;
 
     return (
       <div className="short-urls-container">
@@ -74,10 +82,10 @@ export default class CreateShortUrl extends React.Component {
               </div>
               <div className="col-sm-6">
                 <div className="form-group">
-                  {renderOptionalInput('validSince', 'Enabled since...', 'date')}
+                  {createDateInput('validSince', 'Enabled since...')}
                 </div>
                 <div className="form-group">
-                  {renderOptionalInput('validUntil', 'Enabled until...', 'date')}
+                  {createDateInput('validUntil', 'Enabled until...')}
                 </div>
               </div>
             </div>

src/short-urls/CreateShortUrl.scss

@@ -17,3 +17,8 @@
   outline: 0;
   @include box-shadow(0 0 0 0.2rem rgba(0,123,255,.25));
 }
+
+.react-datepicker__input-container,
+.react-datepicker-wrapper {
+  display: block !important;
+}

yarn.lock

@@ -1509,7 +1509,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.3:
+classnames@^2.2.3, classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -6071,6 +6071,15 @@ react-copy-to-clipboard@^5.0.1:
     copy-to-clipboard "^3"
     prop-types "^15.5.8"
 
+react-datepicker@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-1.5.0.tgz#7eacd9609313189c84a21bb7421486054939a4b2"
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+    react-onclickoutside "^6.7.1"
+    react-popper "^0.9.1"
+
 react-dev-utils@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613"
@@ -6115,6 +6124,10 @@ react-moment@^0.7.6:
   version "0.7.6"
   resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-0.7.6.tgz#d94e63fe47d07fb794a7fa96a89711e834496c4a"
 
+react-onclickoutside@^6.7.1:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.7.1.tgz#6a5b5b8b4eae6b776259712c89c8a2b36b17be93"
+
 react-popper@^0.10.4:
   version "0.10.4"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.10.4.tgz#af2a415ea22291edd504678d7afda8a6ee3295aa"
@@ -6122,6 +6135,13 @@ react-popper@^0.10.4:
     popper.js "^1.14.1"
     prop-types "^15.6.1"
 
+react-popper@^0.9.1:
+  version "0.9.5"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.9.5.tgz#02a24ef3eec33af9e54e8358ab70eb0e331edd05"
+  dependencies:
+    popper.js "^1.14.1"
+    prop-types "^15.6.1"
+
 react-reconciler@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"