add date picker component

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

@@ -38,8 +38,9 @@
     (click)="isOpen = !isOpen"
     cdkOverlayOrigin
     #trigger="cdkOverlayOrigin"
+    [attr.disabled]="isDisabled ? 'disabled' : null"
   >
-    {{ dateValue.display }}
+    {{ datePickerControl.value?.display }}
   </button>
 </div>
 
@@ -190,17 +191,13 @@
         <button mat-button (click)="applyRelativeTimeRange()">Apply</button>
       </mat-tab>
       <mat-tab label="Absolute">
-        <form [formGroup]="dateRangeFormGroup">
-          <mat-form-field class="date-picker-form-field">
-            <mat-label>Date Range:</mat-label>
-            <input
-              matInput
-              [formControl]="dateRangeFormGroup.controls.dateRange"
-              name="dates"
-            />
-          </mat-form-field>
-          <button mat-button (click)="applyAbsoluteTime()">Apply</button>
-        </form>
+        <mat-form-field class="date-picker-form-field">
+          <mat-label>Date Range:</mat-label>
+          <input matInput [formControl]="dateRange" name="dates" />
+        </mat-form-field>
+        <button mat-button (click)="applyAbsoluteTime()">Apply</button>
+
+        <p>Value: {{ dateRange.value }}</p>
       </mat-tab>
     </mat-tab-group>
   </div>