UI is broken in dates parsing in Safari

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

@@ -160,7 +160,7 @@
 
       <ng-container matColumnDef="Original Loan">
         <th mat-header-cell *matHeaderCellDef> Original Loan </th>
-        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Loan Balance">
@@ -183,7 +183,7 @@
 
       <ng-container matColumnDef="Closed Date">
         <th mat-header-cell *matHeaderCellDef> Closed Date </th>
-        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
@@ -222,7 +222,7 @@
 
       <ng-container matColumnDef="Last Active">
         <th mat-header-cell *matHeaderCellDef> Last Active </th>
-        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+        <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
       </ng-container>
 
       <ng-container matColumnDef="Balance">
@@ -280,7 +280,7 @@
 
       <ng-container matColumnDef="Closed Date">
         <th mat-header-cell *matHeaderCellDef> Closed Date </th>
-        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+        <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-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="groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">

src/app/groups/groups-view/group-actions/group-attendance/group-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.groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | date }}</mat-hint>
+      <mat-hint>Next Meeting on: {{ this.groupData.collectionMeetingCalendar.nextTenRecurringDates[0]  | dateFormat }}</mat-hint>
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html

@@ -54,7 +54,7 @@
           </div>
           <div class="mat-row">
             <div class="mat-cell">Activation Date</div>
-            <div class="mat-cell">{{(transferClientsForm.get('destinationGroupId').value.activationDate | date) || 'Not Activated'}}</div>
+            <div class="mat-cell">{{(transferClientsForm.get('destinationGroupId').value.activationDate  | dateFormat) || 'Not Activated'}}</div>
           </div>
           <div class="mat-row">
             <div class="mat-cell">Staff</div>

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

@@ -22,9 +22,9 @@
           <p>
             Group #: {{groupViewData.id}} | Center Name: {{groupViewData.centerName}} | Staff: {{groupViewData.staffName || 'Unassigned'}}<br/>
             Office Name: {{groupViewData.officeName}}<br/>
-            Activation Date : {{(groupViewData.activationDate)?(groupViewData.activationDate|date) :'Not Activated'}}<br/>
+            Activation Date : {{(groupViewData.activationDate)?(groupViewData.activationDate  | dateFormat) :'Not Activated'}}<br/>
             <span *ngIf="!groupViewData.active">
-             Closure Date: {{groupViewData.timeline.closedOnDate | date}}
+             Closure Date: {{groupViewData.timeline.closedOnDate  | dateFormat}}
             </span>
           </p>
         </mat-card-subtitle>
@@ -33,7 +33,7 @@
       <div class="group-meeting" fxLayoutAlign="start start">
         <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
           <p>
-             Next Meeting on: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | date}}   
+             Next Meeting on: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0]  | dateFormat}}
              <i class="fa fa-edit" *ngIf="editMeeting" (click)="doAction('Edit Meeting')"></i><br/>
              Meeting Frequency: {{groupViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
           </p>
@@ -41,7 +41,7 @@
         <ng-template #unassigned>
           <div>
             <p>
-              Next Meeting on: Unassigned   
+              Next Meeting on: Unassigned
               <i class="fa fa-calendar"></i><br/>
               Meeting Frequency: N/A
           </p>

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

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