UI is broken in dates parsing in Safari

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html

@@ -5,44 +5,44 @@
     <h2> Charges Overview</h2>
 
     <table mat-table [dataSource]="dataSource">
-  
+
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> Name </th>
         <td mat-cell *matCellDef="let chargeOverviewData"><i class="fa fa-stop"
           [ngClass]="(!(chargeOverviewData.isWaived || chargeOverviewData.isPaid))|statusLookup"></i>
           {{chargeOverviewData.name}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="dueAsOf">
         <th mat-header-cell *matHeaderCellDef> Due as of </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate|date}} </td>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate  | dateFormat}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="due">
         <th mat-header-cell *matHeaderCellDef> Due </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amount}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="paid">
         <th mat-header-cell *matHeaderCellDef> Paid </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountPaid}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="waived">
         <th mat-header-cell *matHeaderCellDef> Waived </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountWaived}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="outstanding">
         <th mat-header-cell *matHeaderCellDef> Outstanding </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountOutstanding}} </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-      
+
     </table>
-  
+
     <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
 
 </div>

src/app/clients/clients-view/charges/view-charge/view-charge.component.html

@@ -48,7 +48,7 @@
 
             <tr>
               <td> Due as of </td>
-              <td> {{ chargeData.dueDate | date }} </td>
+              <td> {{ chargeData.dueDate  | dateFormat }} </td>
             </tr>
 
             <tr>
@@ -99,7 +99,7 @@
         </ng-container>
         <ng-container matColumnDef="transactionDate">
           <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date | date}} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date  | dateFormat}} </td>
         </ng-container>
     
         <ng-container matColumnDef="amount">