UI is broken in dates parsing in Safari

src/app/savings/savings-account-view/charges-tab/charges-tab.component.html

@@ -31,7 +31,7 @@
 
       <ng-container matColumnDef="dueAsOf">
         <th mat-header-cell *matHeaderCellDef> Due As Of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | date }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -118,7 +118,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
               <td>Last Active Transaction Date</td>
-              <td>{{savingsAccountData.lastActiveTransactionDate | date}}</td>
+              <td>{{savingsAccountData.lastActiveTransactionDate  | dateFormat}}</td>
             </tr>
             <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
               <td>Substatus</td>
@@ -162,7 +162,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
               <td>Interest Recalculation Date</td>
-              <td>{{savingsAccountData.summary.lastInterestCalculationDate | date}}</td>
+              <td>{{savingsAccountData.summary.lastInterestCalculationDate  | dateFormat}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.onHoldFunds">
               <td>On Hold Funds</td>
@@ -183,7 +183,7 @@
             <tbody>
               <tr>
                 <td>Activated On</td>
-                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate | date) : 'Not Activated'}}</td>
+                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr>
                 <td>Currency</td>
@@ -206,7 +206,7 @@
             <tbody>
               <tr>
                 <td>Activated On</td>
-                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate | date) : 'Not Activated'}}</td>
+                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr>
                 <td>Field Officer</td>

src/app/savings/savings-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -35,7 +35,7 @@
 
       <ng-container matColumnDef="validity">
         <th mat-header-cell *matHeaderCellDef> Validity </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | date}} to {{instruction.validTill | date}}</td>
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -21,7 +21,7 @@
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.date | date }} </td>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

@@ -44,7 +44,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ transactionData.date | date }}
+          {{ transactionData.date  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">

src/app/savings/savings-account-view/view-charge/view-charge.component.html

@@ -75,7 +75,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ chargeData.dueDate | date }}
+          {{ chargeData.dueDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">