add date range field

It is (again) surprisingly hard to find a decent date+time-range
picker that works with Angular. Daterangepicker, which I used with
my VueJS application does not work with Angular. I can't get the
angularized version
https://github.com/fragaria/angular-daterangepicker) to work either.
And and a native Angular date picker
(https://github.com/GNURub/ngx-daterangepicker) doesn't work either.

pdb-js/src/app/visualization-page/visualization-page.component.html

@@ -7,18 +7,13 @@
       <input matInput placeholder="Query" value="{{query}}" />
   </div>
   <div id="filters">
-    <button mat-button (click)="plot()">
-      <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
-      Plot
-    </button>
-    <!--
-    <button mat-button (click)="gallery()">
-      <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
-      Gallery
-    </button>
-    -->
     
     
+    <mat-form-field>
+      <mat-label>Date Range:</mat-label>
+      <input matInput [formControl]="dateRange" />
+    </mat-form-field>
+  
     <mat-form-field>
       <mat-label>Type:</mat-label>
       <mat-select [formControl]="selectedPlotType">
@@ -67,6 +62,21 @@
     [(maxYValue)]="maxYValue"
    ></pdb-y-axis-range>
    
+   
+    <div>
+      <button mat-button (click)="plot()">
+        <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
+        Plot
+      </button>
+    
+      <!--
+      <button mat-button (click)="gallery()">
+        <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
+        Gallery
+      </button>
+      -->
+    
+    </div>
   </div>
   <div id="results"></div>
 </div>

pdb-js/src/app/visualization-page/visualization-page.component.ts

@@ -11,6 +11,8 @@ import { FormControl } from '@angular/forms';
 })
 export class VisualizationPageComponent implements OnInit {
   
+  dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
+  
   availablePlotTypes = {};
   
   selectedPlotType = new FormControl('');