UI is broken in dates parsing in Safari

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html

@@ -73,7 +73,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 mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}
       </td>
     </ng-container>
 

src/app/account-transfers/list-transactions/list-transactions.component.html

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

src/app/account-transfers/view-account-transfer/view-account-transfer.component.html

@@ -17,7 +17,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Transaction Date:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.transferDate | date }}</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.transferDate  | dateFormat }}</span>
         </div>
 
         <div fxFlexFill>

src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html

@@ -90,7 +90,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Validity:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.validFrom | date }} - {{ standingInstructionsData.validTill | date }}</span>
+          <span fxFlex="60%">{{ standingInstructionsData.validFrom  | dateFormat }} - {{ standingInstructionsData.validTill  | dateFormat }}</span>
         </div>
 
         <div fxFlexFill>
@@ -110,7 +110,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">On Month Day:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.recurrenceOnMonthDay | date }}</span>
+          <span fxFlex="60%">{{ standingInstructionsData.recurrenceOnMonthDay  | dateFormat }}</span>
         </div>
 
       </div>