UI is broken in dates parsing in Safari

src/app/navigation/center-navigation/center-navigation.component.html

@@ -30,7 +30,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ centerData.activationDate | date }}
+          {{ centerData.activationDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -86,7 +86,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.nextTenRecurringDates[0]">
-          {{ centerSummaryData.collectionMeetingCalendar.nextTenRecurringDates[0] | date }}
+          {{ centerSummaryData.collectionMeetingCalendar.nextTenRecurringDates[0]  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="centerData.collectionMeetingCalendar && centerData.collectionMeetingCalendar.humanReadable">

src/app/navigation/client-navigation/client-navigation.component.html

@@ -55,7 +55,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="clientData.dateOfBirth">
-          {{ clientData.dateOfBirth | date }}
+          {{ clientData.dateOfBirth  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.mobileNo">
@@ -71,7 +71,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ clientData.activationDate | date }}
+          {{ clientData.activationDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="clientData.officeName">

src/app/navigation/group-navigation/group-navigation.component.html

@@ -29,7 +29,7 @@
           </div>
   
           <div fxFlex="50%">
-            {{ groupData.activationDate | date }}
+            {{ groupData.activationDate  | dateFormat }}
           </div>
 
           <div fxFlex="50%" class="mat-body-strong">
@@ -53,7 +53,7 @@
           </div>
   
           <div fxFlex="50%" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.nextTenRecurringDates[0]">
-            {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | date }}
+            {{ groupData.collectionMeetingCalendar.nextTenRecurringDates[0]  | dateFormat }}
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="groupData.collectionMeetingCalendar && groupData.collectionMeetingCalendar.humanReadable">

src/app/navigation/office-navigation/office-navigation.component.html

@@ -24,7 +24,7 @@
     </div>
 
     <div fxFlex="50%">
-      {{ officeData.openingDate | date }}
+      {{ officeData.openingDate  | dateFormat }}
     </div>
 
     <div fxFlex="50%" class="mat-body-strong" *ngIf="officeData.parentName">

src/app/navigation/staff-navigation/staff-navigation.component.html

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