UI is broken in dates parsing in Safari

src/app/system/audit-trails/audit-trails.component.html

@@ -138,7 +138,7 @@
 
     <ng-container matColumnDef="madeOnDate">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Made Date </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.madeOnDate | date  }} </td>
+      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.madeOnDate  | dateFormat  }} </td>
     </ng-container>
 
     <ng-container matColumnDef="checker">
@@ -148,7 +148,7 @@
 
     <ng-container matColumnDef="checkedOnDate">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Checked Date </th>
-      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.checkedOnDate | date  }} </td>
+      <td mat-cell *matCellDef="let auditTrail"> {{ auditTrail.checkedOnDate  | dateFormat  }} </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/system/audit-trails/view-audit/view-audit.component.html

@@ -61,7 +61,7 @@
           </div>
 
           <div fxFlex="50%">
-            {{ auditTrailData.madeOnDate | date }}
+            {{ auditTrailData.madeOnDate  | dateFormat }}
           </div>
 
           <div fxFlex="50%" class="mat-body-strong" *ngIf="auditTrailData.officeName">

src/app/system/manage-hooks/view-hook/view-hook.component.html

@@ -41,7 +41,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ hookData.createdAt | date }}
+          {{ hookData.createdAt  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
@@ -49,7 +49,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ hookData.updatedAt | date }}
+          {{ hookData.updatedAt  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">