Make datetimepicker clear work

Signed-off-by: Julius Volz <julius.volz@gmail.com>

src/App.css

@@ -80,6 +80,7 @@ button.execute-btn {
 
 .graph-controls .endtime-input input {
     width: 160px;
+    border-right: none;
 }
 
 .graph-controls input.resolution-input {
@@ -90,6 +91,14 @@ button.execute-btn {
     margin-left: 20px;
 }
 
+.graph-controls .clear-endtime-btn {
+    background: #fff;
+    border-left: none;
+    border-top: 1px solid #ced4da;
+    border-bottom: 1px solid #ced4da;
+    color: #495057;
+}
+
 .tabpane-alert {
     margin: 10px;
 }

src/App.js

@@ -52,7 +52,6 @@ import {
   faArrowUp,
   faArrowDown,
   faCalendarCheck,
-  faTrash,
   faTimes,
 } from '@fortawesome/free-solid-svg-icons';
 library.add(
@@ -69,10 +68,9 @@ library.add(
   faArrowUp,
   faArrowDown,
   faCalendarCheck,
-  faTrash,
   faTimes,
 );
-dom.watch() // Needed to also replace <i> within the date picker.
+dom.watch() // Sadly needed to also replace <i> within the date picker, since it's not a React component.
 
 class App extends Component {
   render() {
@@ -739,16 +737,20 @@ class GraphControls extends Component {
     this.$endTime.datetimepicker('date', endTime);
   }
 
+  clearEndTime = (event) => {
+    this.props.onChangeEndTime(null);
+    this.$endTime.datetimepicker('date', null);
+  }
+
   componentDidMount() {
     this.$endTime = window.$(this.endTimeRef.current);
 
     this.$endTime.datetimepicker({
       icons: {
-        clear: 'fas fa-trash',
         today: 'fas fa-calendar-check',
       },
       buttons: {
-        showClear: true,
+        //showClear: true,
         showClose: true,
         showToday: true,
       },
@@ -760,6 +762,7 @@ class GraphControls extends Component {
     });
 
     this.$endTime.on('change.datetimepicker', e => {
+      console.log("CHANGE", e)
       if (e.date) {
         this.props.onChangeEndTime(e.date);
       } else {
@@ -768,6 +771,10 @@ class GraphControls extends Component {
     });
   }
 
+  componentWillUnmount() {
+    this.$endTime.datetimepicker('destroy');
+  }
+
   render() {
     return (
       <Form inline className="graph-controls" onSubmit={e => e.preventDefault()}>
@@ -800,16 +807,22 @@ class GraphControls extends Component {
             // onChange={this.props.onChangeEndTime}
             onFocus={() => this.$endTime.datetimepicker('show')}
             onBlur={() => this.$endTime.datetimepicker('hide')}
-            onKeyDown={(e) => e.key === 'Escape' && this.$endTime.datetimepicker('hide')}
+            onKeyDown={(e) => ['Escape', 'Enter'].includes(e.key) && this.$endTime.datetimepicker('hide')}
           />
-          {/* <input type="text" className="form-control datetimepicker-input" id="foo" data-toggle="datetimepicker" data-target="#foo"/> */}
+
+          {/* CAUTION: While the datetimepicker also has an option to show a 'clear' button,
+              that functionality is broken, so we create an external solution instead. */}
+          {this.props.endTime &&
+            <InputGroupAddon addonType="append">
+              <Button className="clear-endtime-btn" title="Clear end time" onClick={this.clearEndTime}><FontAwesomeIcon icon="times" fixedWidth/></Button>
+            </InputGroupAddon>
+          }
 
           <InputGroupAddon addonType="append">
             <Button title="Increase end time" onClick={this.increaseEndTime}><FontAwesomeIcon icon="chevron-right" fixedWidth/></Button>
           </InputGroupAddon>
         </InputGroup>
 
-        {/* TODO: validate resolution and only update when valid */}
         <Input
           placeholder="Res. (s)"
           className="resolution-input"