UI is broken in dates parsing in Safari

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html

@@ -90,7 +90,7 @@
 
     <ng-container matColumnDef="madeOnDate">
       <th mat-header-cell *matHeaderCellDef> Made on Date </th>
-      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.madeOnDate | date }} </td>
+      <td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.madeOnDate  | dateFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="status">

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.html

@@ -46,7 +46,7 @@
 
     <ng-container matColumnDef="rescheduleForm">
       <th mat-header-cell *matHeaderCellDef> Reschedule Form </th>
-      <td mat-cell *matCellDef="let loan"> {{loan.rescheduleFromDate | date}} </td>
+      <td mat-cell *matCellDef="let loan"> {{loan.rescheduleFromDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="rescheduleReason">

src/app/tasks/view-checker-inbox/view-checker-inbox.component.html

@@ -58,7 +58,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Date:</span>
-          <span fxFlex="60%">{{ checkerInboxDetail.madeOnDate | date}}</span>
+          <span fxFlex="60%">{{ checkerInboxDetail.madeOnDate  | dateFormat}}</span>
         </div>
 
         <div fxFlexFill *ngIf="checkerInboxDetail.officeName">