UI is broken in dates parsing in Safari

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.html

@@ -6,10 +6,10 @@
       <mat-label>Meeting Date</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
-          {{ date | date }}
+          {{ date  | dateFormat }}
         </mat-option>
       </mat-select>
-      <mat-hint>Next Meeting on: {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0] | date }}</mat-hint>
+      <mat-hint>Next Meeting on: {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0]  | dateFormat }}</mat-hint>
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html

@@ -12,7 +12,7 @@
           <mat-label>Existing Meeting Date</mat-label>
           <mat-select formControlName="presentMeetingDate">
             <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-              {{ date | date }}
+              {{ date  | dateFormat }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">

src/app/centers/centers-view/centers-view.component.html

@@ -28,7 +28,7 @@
                   Staff: {{centerViewData.staffName}} <br/>
                 </span>
                 Activation Date :
-                {{(centerViewData.activationDate)?(centerViewData.activationDate|date) :'Not Activated'}}<br />
+                {{(centerViewData.activationDate)?(centerViewData.activationDate  | dateFormat) :'Not Activated'}}<br />
               </p>
             </div>
           </div>
@@ -38,7 +38,7 @@
       <div class="center-meeting" fxLayoutAlign="start start">
         <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
           <p>
-             Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | date}}
+             Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0]  | dateFormat}}
              <span *ngIf="editMeeting">
               <i class="fa fa-edit" (click)="doAction('Edit Meeting')" *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
              </span>

src/app/centers/centers-view/general-tab/general-tab.component.html

@@ -23,7 +23,7 @@
     <h3>Groups</h3>
 
     <table mat-table [dataSource]="groupResourceData" matSort>
-  
+
       <ng-container matColumnDef="Account No">
         <th mat-header-cell *matHeaderCellDef> Account Number </th>
         <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
@@ -43,42 +43,42 @@
 
       <ng-container matColumnDef="Submitted On">
         <th mat-header-cell *matHeaderCellDef> Submitted On </th>
-        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate|date}} </td>
+        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate  | dateFormat}} </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="groupsColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: groupsColumns;" [routerLink]="['/groups', row.id, 'general']"></tr>
-  
+
     </table>
 
   </ng-container>
-  
+
   <!-- savings overview table -->
   <ng-container *ngIf="!(savingsAccountData === undefined)">
 
     <ng-container *ngIf="savingsAccountData.length > 0">
 
       <h3>Savings Account Overview</h3>
-  
+
       <table mat-table [dataSource]="savingsAccountData" matSort>
-  
+
         <ng-container matColumnDef="Account No">
           <th mat-header-cell *matHeaderCellDef> Account No </th>
           <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
               [ngClass]="element.status.code|statusLookup"></i>
             {{element.accountNo}} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="Products">
           <th mat-header-cell *matHeaderCellDef> Products </th>
           <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
         </ng-container>
-    
+
         <ng-container matColumnDef="Balance">
           <th mat-header-cell *matHeaderCellDef> Balance</th>
           <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
         </ng-container>
-    
+
         <ng-container matColumnDef="Actions">
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let element">
@@ -118,13 +118,13 @@
             </ng-container>
           </td>
         </ng-container>
-    
+
         <tr mat-header-row *matHeaderRowDef="savingsAccountColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: savingsAccountColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
       </table>
-  
+
     </ng-container>
 
-  </ng-container> 
+  </ng-container>
 
 </div>

src/app/centers/centers-view/notes-tab/notes-tab.component.html

@@ -17,7 +17,7 @@
       <h3 matLine>{{centerNote.note}} </h3>
       <p matLine>
         <span>Created by: {{centerNote.createdByUsername}}</span><br />
-        <span>Date: {{centerNote.createdOn | date}}</span>
+        <span>Date: {{centerNote.createdOn  | dateFormat}}</span>
       </p>
       <div fxLayout="row" fxLayoutAlign="flex-start">
         <button mat-button color="primary" (click)="editNote(centerNote.id,centerNote.note,i)">