Updated DateInput to be clearable

src/common/DateInput.js

@@ -3,6 +3,7 @@ import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import React from 'react';
 import DatePicker from 'react-datepicker';
 import './DateInput.scss';
+import { isNil } from 'ramda';
 
 export default class DateInput extends React.Component {
   constructor(props) {
@@ -11,6 +12,9 @@ export default class DateInput extends React.Component {
   }
 
   render() {
+    const { isClearable, selected } = this.props;
+    const showCalendarIcon = !isClearable || isNil(selected);
+
     return (
       <div className="date-input-container">
         <DatePicker
@@ -20,11 +24,11 @@ export default class DateInput extends React.Component {
           readOnly
           ref={this.inputRef}
         />
-        <FontAwesomeIcon
+        {showCalendarIcon && <FontAwesomeIcon
           icon={calendarIcon}
           className="date-input-container__icon"
           onClick={() => this.inputRef.current.input.focus()}
-        />
+        />}
       </div>
     );
   }

src/common/DateInput.scss

@@ -1,4 +1,5 @@
 @import '../utils/mixins/vertical-align';
+@import '../utils/base';
 
 .date-input-container {
   position: relative;
@@ -11,6 +12,18 @@
 
 .date-input-container__icon {
   @include vertical-align();
-  right: 15px;
+  right: .75rem;
   cursor: pointer;
 }
+
+.react-datepicker__close-icon.react-datepicker__close-icon {
+  @include vertical-align();
+  right: 0;
+}
+
+.react-datepicker__close-icon.react-datepicker__close-icon::after {
+  right: .75rem;
+  line-height: 11px;
+  background-color: #333;
+  font-size: 14px;
+}

src/short-urls/CreateShortUrl.js

@@ -48,6 +48,7 @@ export class CreateShortUrl extends React.Component {
         selected={this.state[id]}
         placeholderText={placeholder}
         onChange={date => this.setState({ [id]: date })}
+        isClearable
         {...props}
       />;
     const formatDate = date => isNil(date) ? date : date.format();

src/short-urls/ShortUrlVisits.js

@@ -150,6 +150,7 @@ export class ShortUrlsVisits extends React.Component {
               <DateInput
                 selected={this.state.startDate}
                 placeholderText="Since"
+                isClearable
                 onChange={date => this.setState({ startDate: date }, () => this.loadVisits())}
               />
             </div>
@@ -157,6 +158,7 @@ export class ShortUrlsVisits extends React.Component {
               <DateInput
                 selected={this.state.endDate}
                 placeholderText="Until"
+                isClearable
                 onChange={date => this.setState({ endDate: date }, () => this.loadVisits())}
                 className="short-url-visits__date-input"
               />