UI is broken in dates parsing in Safari

src/app/organization/tellers/cashiers/cashiers.component.html

@@ -22,7 +22,7 @@
 
       <ng-container matColumnDef="period">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Period </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate | date }} - {{ cashier.endDate | date }}</td>
+        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate  | dateFormat }} - {{ cashier.endDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="staffName">

src/app/organization/tellers/cashiers/transactions/transactions.component.html

@@ -85,7 +85,7 @@
 
         <ng-container matColumnDef="date">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate | date }} </td>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate  | dateFormat }} </td>
         </ng-container>
   
         <ng-container matColumnDef="transactions">

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html

@@ -47,7 +47,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ cashierData.startDate | date }}
+          {{ cashierData.startDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -55,7 +55,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ cashierData.endDate | date }}
+          {{ cashierData.endDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="header">

src/app/organization/tellers/tellers.component.html

@@ -41,7 +41,7 @@
 
       <ng-container matColumnDef="startDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Started On </th>
-        <td mat-cell *matCellDef="let teller"> {{ teller.startDate | date }} </td>
+        <td mat-cell *matCellDef="let teller"> {{ teller.startDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

src/app/organization/tellers/view-teller/view-teller.component.html

@@ -46,7 +46,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ tellerData.startDate | date }}
+          {{ tellerData.startDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="tellerData.endDate">
@@ -54,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="tellerData.endDate">
-          {{ tellerData.endDate | date }}
+          {{ tellerData.endDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">