fix: TT-205 in safari browser dont work the date picker (#668)

* fix: TT-205 In safari browser don t work the date picker

* fix: TT-205 spaces and use constants

* fix: TT-205 refactor code and move style

Author: LEON12699

angular.json

@@ -24,6 +24,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/datatables.net-dt/css/jquery.dataTables.css",
               "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
@@ -106,6 +107,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
             "scripts": []

package-lock.json

@@ -20,6 +20,8 @@
     "@angular/compiler": "~10.2.2",
     "@angular/core": "~10.2.2",
     "@angular/forms": "~10.2.2",
+    "@angular/material": "^11.2.3",
+    "@angular/material-moment-adapter": "^11.2.9",
     "@angular/platform-browser": "~10.2.2",
     "@angular/platform-browser-dynamic": "~10.2.2",
     "@angular/router": "~10.2.2",

package.json

@@ -11,7 +11,9 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 
@@ -134,6 +136,9 @@ const maskConfig: Partial<IConfig> = {
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),
+    MatInputModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
     CommonModule,
     BrowserModule,
     BrowserAnimationsModule,

src/app/app.module.ts

@@ -82,9 +82,9 @@
         <label class="col-12 col-sm-2">Date in:</label>
         <div class="col-12 col-sm-4">
           <input
+            matInput
             formControlName="start_date"
             id="start_date"
-            type="date"
             class="form-control"
             aria-label="Small"
             aria-describedby="inputGroup-sizing-sm"
@@ -93,7 +93,11 @@
             (ngModelChange)="onStartDateChange($event)"
             [max]="getCurrentDate()"
             onkeydown="return false"
+            (click)="openOrCloseDatePicker(datepickerStartDate)"
+            (dateInput)="start_date.setValue($event.value.format('YYYY-MM-DD'))"
+            [matDatepicker]="datepickerStartDate"
           />
+          <mat-datepicker #datepickerStartDate></mat-datepicker>
         </div>
 
         <label class="col-12 col-sm-2">Time in:</label>
@@ -112,17 +116,21 @@
         <label class="col-12 col-sm-2">Date out:</label>
         <div class="col-12 col-sm-4">
           <input
+            matInput
             formControlName="end_date"
             id="end_date"
-            type="date"
             class="form-control"
             aria-label="Small"
             aria-describedby="inputGroup-sizing-sm"
             [class.is-invalid]="end_date.invalid && end_date.touched"
             required
             [max]="getCurrentDate()"
             onkeydown="return false"
+            (click)="openOrCloseDatePicker(datepickerEndDate)"
+            (dateInput)="end_date.setValue($event.value.format('YYYY-MM-DD'))"
+            [matDatepicker]="datepickerEndDate"
           />
+          <mat-datepicker #datepickerEndDate></mat-datepicker>
         </div>
 
         <label class="col-12 col-sm-2">Time out:</label>

src/app/modules/shared/components/details-fields/details-fields.component.html

@@ -115,3 +115,7 @@ input[type="date"]::-webkit-clear-button {
   border-radius: 5px;
   margin-top: 10px;
 }
+
+::ng-deep .cdk-overlay-container {
+  z-index: 1100 !important;
+}

src/app/modules/shared/components/details-fields/details-fields.component.scss

@@ -489,14 +489,14 @@ describe('DetailsFieldsComponent', () => {
   });
 
   it('on get current date should return expected date', () => {
-    const expectedDate = new Date().toISOString().split('T')[0];
+    const expectedDate = moment(new Date()).format(DATE_FORMAT_YEAR);
 
     expect(component.getCurrentDate()).toEqual(expectedDate);
   });
 
   it('on the input with id #start_date we could get the id and max value', () => {
    fixture.detectChanges();
-   const expectedDate = new Date().toISOString().split('T')[0];
+   const expectedDate = moment(new Date()).format(DATE_FORMAT_YEAR);
    const startDateInput: HTMLInputElement = fixture.debugElement.
      nativeElement.querySelector(`input[id="start_date"],input[max="${component.getCurrentDate()}"]`);
 
@@ -506,7 +506,7 @@ describe('DetailsFieldsComponent', () => {
 
   it('on the input with id #end_date we could get the current Date ', () => {
     fixture.detectChanges();
-    const expectedDate = new Date().toISOString().split('T')[0];
+    const expectedDate = moment(new Date()).format(DATE_FORMAT_YEAR);
     const endDateInput = fixture.debugElement.nativeElement.querySelector('[id=end_date]');
 
     expect(endDateInput.id).toEqual('end_date');

src/app/modules/shared/components/details-fields/details-fields.component.spec.ts

@@ -18,8 +18,9 @@ import { EntryActionTypes } from './../../../time-clock/store/entry.actions';
 import { SaveEntryEvent } from './save-entry-event';
 import { ProjectSelectedEvent } from './project-selected-event';
 import { get } from 'lodash';
-import { DATE_FORMAT } from 'src/environments/environment';
+import { DATE_FORMAT, DATE_FORMAT_YEAR } from 'src/environments/environment';
 import { TechnologiesComponent } from '../technologies/technologies.component';
+import { MatDatepicker } from '@angular/material/datepicker';
 
 type Merged = TechnologyState & ProjectState & ActivityState & EntryState;
 @Component({
@@ -192,7 +193,7 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
   }
 
   getCurrentDate(): string {
-    return new Date().toISOString().split('T')[0];
+    return moment(new Date()).format(DATE_FORMAT_YEAR);
   }
 
   get project_id() {
@@ -290,4 +291,8 @@ export class DetailsFieldsComponent implements OnChanges, OnInit {
     }
     this.shouldRestartEntry = !this.entryToEdit?.running && this.goingToWorkOnThis;
   }
+
+  openOrCloseDatePicker(datepicker: MatDatepicker<Date>): void {
+    return datepicker.opened ? datepicker.close() : datepicker.open();
+  }
 }

src/app/modules/shared/components/details-fields/details-fields.component.ts

@@ -30,4 +30,5 @@ body {
 
 .timepicker-backdrop-overlay {
   z-index: 1100 !important;
-}
+}
+