fix: TT-230 implement datepicker safari on Reports

Author: LEON12699

src/app/modules/reports/components/time-range-form/time-range-form.component.ts

@@ -29,8 +29,8 @@ export class TimeRangeFormComponent implements OnInit {
 
   setInitialDataOnScreen() {
     this.reportForm.setValue({
-      startDate: formatDate(moment().startOf('week').toString(), DATE_FORMAT, 'en'),
-      endDate: formatDate(moment().endOf('week').toString(), DATE_FORMAT, 'en')
+      startDate: formatDate(moment().startOf('week').format('l'), DATE_FORMAT, 'en'),
+      endDate: formatDate(moment().endOf('week').format('l'), DATE_FORMAT, 'en')
     });
     this.onSubmit();
   }

src/app/modules/shared/components/input-date/input-date.component.html

@@ -1,10 +1,12 @@
 <input
   [value]="value"
   [disabled]="isDisabled"
-  (input)="onInput($event.target.value)"
-  type="date"
+  (dateInput)="onInput($event.target.value.format('YYYY-MM-DD'))"
   class="form-control"
   aria-label="Small"
   aria-describedby="inputGroup-sizing-sm"
   required="required"
+  [matDatepicker]="datepicker"
+  (click)="openOrCloseDatePicker(datepicker)"
 />
+<mat-datepicker #datepicker ></mat-datepicker>

src/app/modules/shared/components/input-date/input-date.component.spec.ts

@@ -1,16 +1,23 @@
-import {waitForAsync, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
-import {InputDateComponent} from './input-date.component';
+import { waitForAsync, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { InputDateComponent } from './input-date.component';
+import * as moment from 'moment';
 
 describe('InputDateComponent', () => {
   let component: InputDateComponent;
   let fixture: ComponentFixture<InputDateComponent>;
   let input;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [InputDateComponent]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [InputDateComponent],
+        imports: [MatInputModule, MatDatepickerModule, MatMomentDateModule],
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InputDateComponent);
@@ -25,7 +32,7 @@ describe('InputDateComponent', () => {
   });
 
   it('should insert the provided text into the component', fakeAsync(() => {
-    setInputValue('input', '2020-05-20');
+    setInputValue('input', moment('2020-05-20').format('l'));
 
     expect(component.value).toEqual('2020-05-20');
   }));

src/app/modules/shared/components/input-date/input-date.component.ts

@@ -1,5 +1,6 @@
 import {Component, forwardRef} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { MatDatepicker } from '@angular/material/datepicker';
 
 @Component({
   selector: 'app-input-date',
@@ -47,4 +48,8 @@ export class InputDateComponent implements ControlValueAccessor {
   setDisabledState(isDisabled: boolean): void {
     this.isDisabled = isDisabled;
   }
+
+  openOrCloseDatePicker(datepicker: MatDatepicker<Date>): void {
+    return datepicker.opened ? datepicker.close() : datepicker.open();
+  }
 }