UI is broken in dates parsing in Safari

src/app/organization/bulk-import/view-bulk-import/view-bulk-import.component.html

@@ -99,12 +99,12 @@
 
         <ng-container matColumnDef="importTime">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Import Time </th>
-          <td mat-cell *matCellDef="let import"> {{ import.importTime | date }} </td>
+          <td mat-cell *matCellDef="let import"> {{ import.importTime  | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="endTime">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> End Time </th>
-          <td mat-cell *matCellDef="let import"> {{ import.endTime | date }} </td>
+          <td mat-cell *matCellDef="let import"> {{ import.endTime  | dateFormat }} </td>
         </ng-container>
 
         <ng-container matColumnDef="completed">

src/app/organization/employees/view-employee/view-employee.component.html

@@ -66,7 +66,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ employeeData.joiningDate | date }}
+          {{ employeeData.joiningDate  | dateFormat }}
         </div>
 
       </div>

src/app/organization/holidays/holidays.component.html

@@ -37,17 +37,17 @@
 
       <ng-container matColumnDef="fromDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.fromDate | date }} </td>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.fromDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="toDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.toDate | date }} </td>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.toDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repaymentsRescheduledTo">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Repayments Scheduled To </th>
-        <td mat-cell *matCellDef="let holidays"> {{ holidays.reschedulingType === 1 ? 'Next Repayment Date' : holidays.repaymentsRescheduledTo | date }} </td>
+        <td mat-cell *matCellDef="let holidays"> {{ holidays.reschedulingType === 1 ? 'Next Repayment Date' : holidays.repaymentsRescheduledTo  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">

src/app/organization/holidays/view-holidays/view-holidays.component.html

@@ -36,7 +36,7 @@
                 </div>
 
                 <div fxFlex="50%">
-                    {{ holidayData.fromDate | date }}
+                    {{ holidayData.fromDate  | dateFormat }}
                 </div>
 
                 <div fxFlex="50%" class="header">
@@ -44,7 +44,7 @@
                 </div>
 
                 <div fxFlex="50%">
-                    {{ holidayData.toDate | date }}
+                    {{ holidayData.toDate  | dateFormat }}
                 </div>
 
                 <div fxFlex="50%" class="header">
@@ -52,7 +52,7 @@
                 </div>
 
                 <div fxFlex="50%" *ngIf="holidayData.repaymentsRescheduledTo !== undefined && holidayData.repaymentsRescheduledTo !== null">
-                    {{ holidayData.repaymentsRescheduledTo | date }}
+                    {{ holidayData.repaymentsRescheduledTo  | dateFormat }}
                 </div>
 
                 <div fxFlex="50%" *ngIf="holidayData.repaymentsRescheduledTo === undefined || holidayData.repaymentsRescheduledTo === null">

src/app/organization/offices/offices.component.html

@@ -47,7 +47,7 @@
 
       <ng-container matColumnDef="openingDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Opened On </th>
-        <td mat-cell *matCellDef="let offices"> {{ offices.openingDate | date }} </td>
+        <td mat-cell *matCellDef="let offices"> {{ offices.openingDate  | dateFormat }} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/organization/offices/view-office/general-tab/general-tab.component.html

@@ -7,7 +7,7 @@
     </mat-list-item>
 
     <mat-list-item>
-      Opened On : {{ officeData.openingDate ? (officeData.openingDate | date) : 'Unassigned' }}
+      Opened On : {{ officeData.openingDate ? (officeData.openingDate  | dateFormat) : 'Unassigned' }}
     </mat-list-item>
 
     <mat-list-item>

src/app/organization/sms-campaigns/view-campaign/view-campaign.component.html

@@ -63,7 +63,7 @@
               </mat-list-item>
 
               <mat-list-item>
-                Submitted on : {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate | date }}
+                Submitted on : {{ smsCampaignData.smsCampaignTimeLine.submittedOnDate  | dateFormat }}
               </mat-list-item>
 
               <mat-list-item *ngIf="smsCampaignData.recurrence">

src/app/organization/tellers/cashiers/cashiers.component.html

@@ -22,7 +22,7 @@
 
       <ng-container matColumnDef="period">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Period </th>
-        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate | date }} - {{ cashier.endDate | date }}</td>
+        <td mat-cell *matCellDef="let cashier"> {{ cashier.startDate  | dateFormat }} - {{ cashier.endDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="staffName">

src/app/organization/tellers/cashiers/transactions/transactions.component.html

@@ -85,7 +85,7 @@
 
         <ng-container matColumnDef="date">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
-          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate | date }} </td>
+          <td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate  | dateFormat }} </td>
         </ng-container>
   
         <ng-container matColumnDef="transactions">

src/app/organization/tellers/cashiers/view-cashier/view-cashier.component.html

@@ -47,7 +47,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ cashierData.startDate | date }}
+          {{ cashierData.startDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -55,7 +55,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ cashierData.endDate | date }}
+          {{ cashierData.endDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="header">

src/app/organization/tellers/tellers.component.html

@@ -41,7 +41,7 @@
 
       <ng-container matColumnDef="startDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Started On </th>
-        <td mat-cell *matCellDef="let teller"> {{ teller.startDate | date }} </td>
+        <td mat-cell *matCellDef="let teller"> {{ teller.startDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

src/app/organization/tellers/view-teller/view-teller.component.html

@@ -46,7 +46,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ tellerData.startDate | date }}
+          {{ tellerData.startDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="tellerData.endDate">
@@ -54,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" *ngIf="tellerData.endDate">
-          {{ tellerData.endDate | date }}
+          {{ tellerData.endDate  | dateFormat }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">