UI is broken in dates parsing in Safari

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html

@@ -46,7 +46,7 @@
           Marital Status : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
           Gender : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
           Profession : {{member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
-          Date Of Birth : {{member.dateOfBirth | date}}<br />
+          Date Of Birth : {{member.dateOfBirth  | dateFormat}}<br />
         </p>
 
       </mat-expansion-panel>

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -27,7 +27,7 @@
 
   <div fxFlexFill *ngIf="client.dateOfBirth">
     <span fxFlex="40%">{{ client.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</span>
-    <span fxFlex="60%">{{ client.dateOfBirth | date }}</span>
+    <span fxFlex="60%">{{ client.dateOfBirth  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="client.externalId">
@@ -62,7 +62,7 @@
 
   <div fxFlexFill *ngIf="client.submittedOnDate">
     <span fxFlex="40%">Submitted On Date</span>
-    <span fxFlex="60%">{{ client.submittedOnDate | date }}</span>
+    <span fxFlex="60%">{{ client.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
@@ -72,7 +72,7 @@
 
   <div fxFlexFill *ngIf="client.activationDate">
     <span fxFlex="40%">Activation Date</span>
-    <span fxFlex="60%">{{ client.activationDate | date }}</span>
+    <span fxFlex="60%">{{ client.activationDate  | dateFormat }}</span>
   </div>
 
   <ng-container *ngIf="client.legalFormId === 1">
@@ -93,7 +93,7 @@
 
     <div fxFlexFill *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
       <span fxFlex="40%">Incorporation Validity Till Date</span>
-      <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpValidityTillDate | date }}</span>
+      <span fxFlex="60%">{{ client.clientNonPersonDetails.incorpValidityTillDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill>
@@ -153,7 +153,7 @@
           Marital Status : {{ member.maritalStatusId | find:clientTemplate.familyMemberOptions.maritalStatusIdOptions:'id':'name' }}<br />
           Gender : {{ member.genderId | find:clientTemplate.familyMemberOptions.genderIdOptions:'id':'name' }}<br />
           Profession : {{ member.professionId | find:clientTemplate.familyMemberOptions.professionIdOptions:'id':'name' }}<br />
-          Date Of Birth : {{ member.dateOfBirth | date }}<br />
+          Date Of Birth : {{ member.dateOfBirth  | dateFormat }}<br />
         </p>
 
       </mat-expansion-panel>

src/app/clients/clients-view/charges/charges-overview/charges-overview.component.html

@@ -5,44 +5,44 @@
     <h2> Charges Overview</h2>
 
     <table mat-table [dataSource]="dataSource">
-  
+
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef> Name </th>
         <td mat-cell *matCellDef="let chargeOverviewData"><i class="fa fa-stop"
           [ngClass]="(!(chargeOverviewData.isWaived || chargeOverviewData.isPaid))|statusLookup"></i>
           {{chargeOverviewData.name}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="dueAsOf">
         <th mat-header-cell *matHeaderCellDef> Due as of </th>
-        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate|date}} </td>
+        <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.dueDate  | dateFormat}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="due">
         <th mat-header-cell *matHeaderCellDef> Due </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amount}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="paid">
         <th mat-header-cell *matHeaderCellDef> Paid </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountPaid}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="waived">
         <th mat-header-cell *matHeaderCellDef> Waived </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountWaived}} </td>
       </ng-container>
-  
+
       <ng-container matColumnDef="outstanding">
         <th mat-header-cell *matHeaderCellDef> Outstanding </th>
         <td mat-cell *matCellDef="let chargeOverviewData"> {{chargeOverviewData.amountOutstanding}} </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-      
+
     </table>
-  
+
     <mat-paginator [pageSizeOptions]="[10, 20, 25]" showFirstLastButtons></mat-paginator>
 
 </div>

src/app/clients/clients-view/charges/view-charge/view-charge.component.html

@@ -48,7 +48,7 @@
 
             <tr>
               <td> Due as of </td>
-              <td> {{ chargeData.dueDate | date }} </td>
+              <td> {{ chargeData.dueDate  | dateFormat }} </td>
             </tr>
 
             <tr>
@@ -99,7 +99,7 @@
         </ng-container>
         <ng-container matColumnDef="transactionDate">
           <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date | date}} </td>
+          <td mat-cell *matCellDef="let element" [ngClass]="{'strikeoff':element.reversed}"> {{element.date  | dateFormat}} </td>
         </ng-container>
     
         <ng-container matColumnDef="amount">

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html

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

src/app/clients/clients-view/clients-view.component.html

@@ -38,8 +38,8 @@
             Client #:{{clientViewData.accountNo}} | External
             Id: {{clientViewData.externalId}} | Staff:{{clientViewData.staffName || 'Unassigned'}}<br />
             Activation Date :
-            {{(clientViewData.activationDate)?(clientViewData.activationDate|date) :'Not Activated'}}<br />
-            Member Of : 
+            {{(clientViewData.activation)?(clientViewData.activationDate | dateFormat) :'Not Activated'}}<br />
+            Member Of :
             <span *ngFor="let group of clientViewData.groups">
               <a>{{group.name}}</a>&nbsp;
             </span>
@@ -58,7 +58,7 @@
         <button mat-raised-button [routerLink]="['edit']">
           <i class="fa fa-edit"></i>Edit</button>
       </span>
-      
+
       <button mat-raised-button [matMenuTriggerFor]="Applications">
         <i class="fa fa-file"></i>Applications</button>
       <mat-menu #Applications="matMenu">
@@ -84,7 +84,7 @@
         <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item (click)="doAction('Accept Transfer')">Accept Transfer</button></span>
         <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item (click)="doAction('Reject Transfer')">Reject transfer</button></span>
       </mat-menu>
-      
+
       <span *ngIf="!clientViewData.staffId">
         <button mat-raised-button (click)="doAction('Assign Staff')">
           <i class="fa fa-user"></i>Assign Staff</button>

src/app/clients/clients-view/family-members-tab/family-members-tab.component.html

@@ -45,7 +45,7 @@
           Martial Status : {{member.maritalStatus}}<br />
           Gender : {{member.gender}}<br />
           Profession : {{member.profession}}<br />
-          Date Of Birth : {{member.dateOfBirth|date}}<br />
+          Date Of Birth : {{member.dateOfBirth  | dateFormat}}<br />
         </p>
 
       </mat-expansion-panel>

src/app/clients/clients-view/general-tab/general-tab.component.html

@@ -39,7 +39,7 @@
 
     <ng-container matColumnDef="Due as of">
       <th mat-header-cell *matHeaderCellDef> Due as of </th>
-      <td mat-cell *matCellDef="let element"> {{element.dueDate|date}} </td>
+      <td mat-cell *matCellDef="let element"> {{element.dueDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Due">
@@ -148,8 +148,8 @@
           </button>
         </span>
         <span *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid">
-          <button class="account-action-button" mat-raised-button color="primary" matTooltip="Disburse" 
-            matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'" 
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="Disburse"
+            matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'"
             (click)="routeEdit($event)" [routerLink]="['../','loans-accounts', element.id, 'actions', 'Disburse']">
             <i class="fa fa-flag"></i>
           </button>
@@ -188,7 +188,7 @@
 
     <ng-container matColumnDef="Original Loan">
       <th mat-header-cell *matHeaderCellDef> Original Loan </th>
-      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Loan Balance">
@@ -210,7 +210,7 @@
 
     <ng-container matColumnDef="Closed Date">
       <th mat-header-cell *matHeaderCellDef> Closed Date </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
@@ -250,7 +250,7 @@
 
     <ng-container matColumnDef="Last Active">
       <th mat-header-cell *matHeaderCellDef> Last Active </th>
-      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
@@ -309,7 +309,7 @@
 
     <ng-container matColumnDef="Closed Date">
       <th mat-header-cell *matHeaderCellDef> Closed Date </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
@@ -348,7 +348,7 @@
 
     <ng-container matColumnDef="Last Active">
       <th mat-header-cell *matHeaderCellDef> Last Active </th>
-      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
@@ -400,7 +400,7 @@
 
     <ng-container matColumnDef="Closed Date">
       <th mat-header-cell *matHeaderCellDef> Closed Date </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
@@ -440,7 +440,7 @@
 
     <ng-container matColumnDef="Last Active">
       <th mat-header-cell *matHeaderCellDef> Last Active </th>
-      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
+      <td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="Balance">
@@ -452,7 +452,7 @@
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let element">
         <ng-container *ngIf="element.status.submittedAndPendingApproval">
-          <button class="account-action-button" mat-raised-button *mifosxHasPermission="'APPROVE_SAVINGSACCOUNT'" 
+          <button class="account-action-button" mat-raised-button *mifosxHasPermission="'APPROVE_SAVINGSACCOUNT'"
           [routerLink]="['../','recurringdeposits', element.id, 'actions', 'Approve']" color="primary">
             <i class="fa fa-check"></i>
           </button>
@@ -496,11 +496,11 @@
 
     <ng-container matColumnDef="Closed Date">
       <th mat-header-cell *matHeaderCellDef> Closed Date </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;" 
+    <tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"
     [routerLink]="['../', 'recurringdeposits', row.id, 'interest-rate-chart']" class="select-row"></tr>
   </table>
 
@@ -592,7 +592,7 @@
 
     <ng-container matColumnDef="Closed Date">
       <th mat-header-cell *matHeaderCellDef> Closed Date </th>
-      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
+      <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate  | dateFormat}}</td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="closedSharesColumns"></tr>

src/app/clients/clients-view/notes-tab/notes-tab.component.html

@@ -26,7 +26,7 @@
       <h3 matLine>{{clientNote.note}} </h3>
       <p matLine>
         <span>Created by: {{clientNote.createdByUsername}}</span><br />
-        <span>Date: {{clientNote.createdOn | date}}</span>
+        <span>Date: {{clientNote.createdOn  | dateFormat}}</span>
       </p>
       <div fxLayout="row" fxLayoutAlign="flex-start">
         <button mat-button color="primary" (click)="editNote(clientNote.id,clientNote.note,i)" *mifosxHasPermission="'CREATE_CLIENTNOTE'">