use date picker in visualization page

pdb-js/src/app/components/datepicker/date-picker-test.component.ts

@@ -1,12 +1,29 @@
-import { Component} from '@angular/core';
+import { Component } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { DateValue } from "./date-picker.component";
 
 @Component({
-  selector: 'app-date-picker-test',
-  templateUrl: './date-picker-test.component.html'
+  selector: "app-date-picker-test",
+  templateUrl: "./date-picker-test.component.html",
 })
 export class DatePickerTestComponent {
-  
-  constructor(){
+  datePicker = new FormControl<DateValue>(
+    new DateValue(
+      "ABSOLUTE",
+      "2019-10-05 12:34:56 - 2019-10-11 23:59:59",
+      "2019-10-05 12:34:56 - 2019-10-11 23:59:59",
+    ),
+  );
+
+  output = "";
+
+  readValue() {
+    this.output = this.datePicker.value?.type + " " +
+      this.datePicker.value?.value;
   }
 
+  dateChanged(e: any) {
+    console.log("dateChanged", e);
+    this.output += "dateChanged: " + e;
+  }
 }