UI is broken in dates parsing in Safari

src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html

@@ -6,7 +6,7 @@
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
-        <td mat-cell *matCellDef="let share"> {{ share.purchasedDate | date }}</td>
+        <td mat-cell *matCellDef="let share"> {{ share.purchasedDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">

src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html

@@ -6,7 +6,7 @@
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
-        <td mat-cell *matCellDef="let share"> {{ share.purchasedDate | date }}</td>
+        <td mat-cell *matCellDef="let share"> {{ share.purchasedDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">

src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html

@@ -11,7 +11,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Submitted On</span>
-    <span fxFlex="60%">{{ sharesAccount.submittedDate | date }}</span>
+    <span fxFlex="60%">{{ sharesAccount.submittedDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
@@ -65,7 +65,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Application Date</span>
-    <span fxFlex="60%">{{ sharesAccount.applicationDate | date }}</span>
+    <span fxFlex="60%">{{ sharesAccount.applicationDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>

src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html

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

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

@@ -61,7 +61,7 @@
           <tbody>
             <tr>
               <td>Activated On</td>
-              <td>{{sharesAccountData.timeline.activatedOnDate ? (sharesAccountData.timeline.activatedOnDate | date) : 'Not Activated'}}</td>
+              <td>{{sharesAccountData.timeline.activatedOnDate ? (sharesAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
             </tr>
             <tr>
               <td>Currency</td>

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

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