UI is broken in dates parsing in Safari

src/app/account-transfers/list-standing-instructions/list-standing-instructions.component.html

@@ -73,7 +73,7 @@
 
     <ng-container matColumnDef="validity">
       <th mat-header-cell *matHeaderCellDef> Validity </th>
-      <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | date}} to {{instruction.validTill | date}}
+      <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}
       </td>
     </ng-container>
 

src/app/account-transfers/list-transactions/list-transactions.component.html

@@ -44,7 +44,7 @@
 
     <ng-container matColumnDef="transactionDate">
       <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-      <td mat-cell *matCellDef="let transaction"> {{ transaction.transferDate | date }} </td>
+      <td mat-cell *matCellDef="let transaction"> {{ transaction.transferDate  | dateFormat }} </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">

src/app/account-transfers/view-account-transfer/view-account-transfer.component.html

@@ -17,7 +17,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Transaction Date:</span>
-          <span fxFlex="60%">{{ viewAccountTransferData.transferDate | date }}</span>
+          <span fxFlex="60%">{{ viewAccountTransferData.transferDate  | dateFormat }}</span>
         </div>
 
         <div fxFlexFill>

src/app/account-transfers/view-standing-instructions/view-standing-instructions.component.html

@@ -90,7 +90,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">Validity:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.validFrom | date }} - {{ standingInstructionsData.validTill | date }}</span>
+          <span fxFlex="60%">{{ standingInstructionsData.validFrom  | dateFormat }} - {{ standingInstructionsData.validTill  | dateFormat }}</span>
         </div>
 
         <div fxFlexFill>
@@ -110,7 +110,7 @@
 
         <div fxFlexFill>
           <span fxFlex="40%">On Month Day:</span>
-          <span fxFlex="60%">{{ standingInstructionsData.recurrenceOnMonthDay | date }}</span>
+          <span fxFlex="60%">{{ standingInstructionsData.recurrenceOnMonthDay  | dateFormat }}</span>
         </div>
 
       </div>

src/app/centers/centers-view/center-actions/center-attendance/center-attendance.component.html

@@ -6,10 +6,10 @@
       <mat-label>Meeting Date</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
-          {{ date | date }}
+          {{ date  | dateFormat }}
         </mat-option>
       </mat-select>
-      <mat-hint>Next Meeting on: {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0] | date }}</mat-hint>
+      <mat-hint>Next Meeting on: {{ this.centerData.collectionMeetingCalendar.nextTenRecurringDates[0]  | dateFormat }}</mat-hint>
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">

src/app/centers/centers-view/center-actions/edit-center-meeting-schedule/edit-center-meeting-schedule.component.html

@@ -12,7 +12,7 @@
           <mat-label>Existing Meeting Date</mat-label>
           <mat-select formControlName="presentMeetingDate">
             <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-              {{ date | date }}
+              {{ date  | dateFormat }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="centerEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">

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

@@ -28,7 +28,7 @@
                   Staff: {{centerViewData.staffName}} <br/>
                 </span>
                 Activation Date :
-                {{(centerViewData.activationDate)?(centerViewData.activationDate|date) :'Not Activated'}}<br />
+                {{(centerViewData.activationDate)?(centerViewData.activationDate  | dateFormat) :'Not Activated'}}<br />
               </p>
             </div>
           </div>
@@ -38,7 +38,7 @@
       <div class="center-meeting" fxLayoutAlign="start start">
         <div *ngIf="centerViewData.collectionMeetingCalendar; else unassigned">
           <p>
-             Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | date}}
+             Next Meeting on: {{centerViewData.collectionMeetingCalendar?.nextTenRecurringDates[0]  | dateFormat}}
              <span *ngIf="editMeeting">
               <i class="fa fa-edit" (click)="doAction('Edit Meeting')" *mifosxHasPermission="'UPDATE_MEETING'"></i><br />
              </span>

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

@@ -23,7 +23,7 @@
     <h3>Groups</h3>
 
     <table mat-table [dataSource]="groupResourceData" matSort>
-  
+
       <ng-container matColumnDef="Account No">
         <th mat-header-cell *matHeaderCellDef> Account Number </th>
         <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
@@ -43,42 +43,42 @@
 
       <ng-container matColumnDef="Submitted On">
         <th mat-header-cell *matHeaderCellDef> Submitted On </th>
-        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate|date}} </td>
+        <td mat-cell *matCellDef="let element"> {{element.timeline.submittedOnDate  | dateFormat}} </td>
       </ng-container>
-  
+
       <tr mat-header-row *matHeaderRowDef="groupsColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: groupsColumns;" [routerLink]="['/groups', row.id, 'general']"></tr>
-  
+
     </table>
 
   </ng-container>
-  
+
   <!-- savings overview table -->
   <ng-container *ngIf="!(savingsAccountData === undefined)">
 
     <ng-container *ngIf="savingsAccountData.length > 0">
 
       <h3>Savings Account Overview</h3>
-  
+
       <table mat-table [dataSource]="savingsAccountData" matSort>
-  
+
         <ng-container matColumnDef="Account No">
           <th mat-header-cell *matHeaderCellDef> Account No </th>
           <td mat-cell *matCellDef="let element"> <i class="fa fa-stop" matTooltip="{{ element.status.value }}"
               [ngClass]="element.status.code|statusLookup"></i>
             {{element.accountNo}} </td>
         </ng-container>
-  
+
         <ng-container matColumnDef="Products">
           <th mat-header-cell *matHeaderCellDef> Products </th>
           <td mat-cell *matCellDef="let element"> {{element.productName}} </td>
         </ng-container>
-    
+
         <ng-container matColumnDef="Balance">
           <th mat-header-cell *matHeaderCellDef> Balance</th>
           <td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
         </ng-container>
-    
+
         <ng-container matColumnDef="Actions">
           <th mat-header-cell *matHeaderCellDef> Actions </th>
           <td mat-cell *matCellDef="let element">
@@ -118,13 +118,13 @@
             </ng-container>
           </td>
         </ng-container>
-    
+
         <tr mat-header-row *matHeaderRowDef="savingsAccountColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: savingsAccountColumns;" [routerLink]="['../', 'savings-accounts', row.id, 'transactions']"></tr>
       </table>
-  
+
     </ng-container>
 
-  </ng-container> 
+  </ng-container>
 
 </div>

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

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

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'">

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html

@@ -54,10 +54,10 @@
       <th mat-header-cell *matHeaderCellDef> Date </th>
       <td mat-cell *matCellDef="let charge">
         <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-          {{(charge.dueDate | date) || 'Unassigned*'}}
+          {{(charge.dueDate  | dateFormat) || 'Unassigned*'}}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}}
+          {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay)  | dateFormat: 'dd MMMM') : 'Unassigned'}}
         </span>
         <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                 || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component.html

@@ -7,12 +7,12 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Valid from Date:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
     <span fxFlex="40%">End Date:</span>
-    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
+    <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component.html

@@ -11,7 +11,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Submitted On</span>
-    <span fxFlex="60%">{{ fixedDepositAccountData.submittedOnDate | date }}</span>
+    <span fxFlex="60%">{{ fixedDepositAccountData.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
@@ -134,12 +134,12 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Valid from Date:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.endDate">
       <span fxFlex="40%">End Date:</span>
-      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
+      <span fxFlex="60%">{{ fixedDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="fixedDepositsAccountProductTemplate?.accountChart.description">
@@ -298,10 +298,10 @@
         <td mat-cell *matCellDef="let charge">
           <span
             *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-            {{(charge.dueDate | date) || 'Unassigned'}}
+            {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}}
+            {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay)  | dateFormat: 'dd MMMM') : 'Unassigned'}}
           </span>
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

src/app/deposits/fixed-deposits/fixed-deposit-account-view/charges-tab/charges-tab.component.html

@@ -31,12 +31,12 @@
 
       <ng-container matColumnDef="dueAsOf">
         <th mat-header-cell *matHeaderCellDef> Due As Of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | date }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
         <th mat-header-cell *matHeaderCellDef> Repeats On </th>
-        <td mat-cell *matCellDef="let charge"> {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}} </td>
+        <td mat-cell *matCellDef="let charge"> {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay)  | dateFormat: 'dd MMMM') : 'Unassigned'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">

src/app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component.html

@@ -64,11 +64,11 @@
             <tbody>
               <tr>
                 <td>Activated On</td>
-                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate | date) : 'Not Activated'}}</td>
+                <td>{{fixedDepositsAccountData.timeline.activatedOnDate ? (fixedDepositsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr *ngIf="fixedDepositsAccountData.timeline.closedOnDate">
                 <td>Closed On</td>
-                <td>{{fixedDepositsAccountData.timeline.closedOnDate | date}}</td>
+                <td>{{fixedDepositsAccountData.timeline.closedOnDate  | dateFormat}}</td>
               </tr>
               <tr>
                 <td>Field Officer</td>
@@ -76,7 +76,7 @@
               </tr>
               <tr>
                 <td>Maturity Date</td>
-                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate | date) : 'N/A'}}</td>
+                <td>{{fixedDepositsAccountData.maturityDate ? (fixedDepositsAccountData.maturityDate  | dateFormat) : 'N/A'}}</td>
               </tr>
               <tr>
                 <td>Deposit Period</td>

src/app/deposits/fixed-deposits/fixed-deposit-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -35,7 +35,7 @@
 
       <ng-container matColumnDef="validity">
         <th mat-header-cell *matHeaderCellDef> Validity </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | date}} to {{instruction.validTill | date}}</td>
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

src/app/deposits/fixed-deposits/fixed-deposit-account-view/transactions-tab/transactions-tab.component.html

@@ -17,7 +17,7 @@
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.date | date }} </td>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">

src/app/deposits/fixed-deposits/fixed-deposit-account-view/view-transaction/view-transaction.component.html

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

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component.html

@@ -55,10 +55,10 @@
       <th mat-header-cell *matHeaderCellDef> Date </th>
       <td mat-cell *matCellDef="let charge">
         <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-          {{(charge.dueDate | date) || 'Unassigned'}}
+          {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
+          {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
         </span>
         <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                 || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-interest-rate-chart-step/recurring-deposits-account-interest-rate-chart-step.component.html

@@ -7,12 +7,12 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Valid from Date:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
     <span fxFlex="40%">End Date:</span>
-    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
+    <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-preview-step/recurring-deposits-account-preview-step.component.html

@@ -12,7 +12,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Submitted On</span>
-    <span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate | date }}</span>
+    <span fxFlex="60%">{{ recurringDepositAccountData.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
@@ -96,7 +96,7 @@
   <ng-container *ngIf="!recurringDepositsAccountProductTemplate.isCalendarInherited">
     <div fxFlexFill>
       <span fxFlex="40%">Deposit Start Date:</span>
-      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate | date}}</span>
+      <span fxFlex="60%">{{ recurringDepositAccountData.expectedFirstDepositOnDate  | dateFormat}}</span>
     </div>
 
     <div fxFlexFill>
@@ -139,12 +139,12 @@
 
     <div fxFlexFill>
       <span fxFlex="40%">Valid from Date:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate | date }}</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.fromDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.endDate">
       <span fxFlex="40%">End Date:</span>
-      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate | date }}</span>
+      <span fxFlex="60%">{{ recurringDepositsAccountProductTemplate?.accountChart.endDate  | dateFormat }}</span>
     </div>
 
     <div fxFlexFill *ngIf="recurringDepositsAccountProductTemplate?.accountChart.description">
@@ -308,10 +308,10 @@
         <td mat-cell *matCellDef="let charge">
           <span
             *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-            {{(charge.dueDate | date) || 'Unassigned'}}
+            {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
+            {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
           </span>
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

src/app/deposits/recurring-deposits/recurring-deposits-account-view/charges-tab/charges-tab.component.html

@@ -27,13 +27,13 @@
 
       <ng-container matColumnDef="dueAsOf">
         <th mat-header-cell *matHeaderCellDef> Due As Of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | date }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">
         <th mat-header-cell *matHeaderCellDef> Repeats On </th>
         <td mat-cell *matCellDef="let charge">
-          {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay) | date: 'dd MMMM') : 'Unassigned'}} </td>
+          {{charge.feeOnMonthDay ? ([2000].concat(charge.feeOnMonthDay)  | dateFormat: 'dd MMMM') : 'Unassigned'}} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.html

@@ -72,17 +72,17 @@
             </tr>
             <tr>
               <td>Activation date</td>
-              <td>{{recurringDepositsAccountData.timeline.activatedOnDate | date}}</td>
+              <td>{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}</td>
             </tr>
             <tr>
               <td>Maturity Date</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate | date}}</span></td>
+              <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
             </tr>
             <tr
               *ngIf="recurringDepositsAccountData.timeline.closedOnDate || recurringDepositsAccountData.summary.totalWitddrawals">
               <td *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
                 Closed on Date</td>
-              <td><span>{{recurringDepositsAccountData.timeline.closedOnDate | date}}</span></td>
+              <td><span>{{recurringDepositsAccountData.timeline.closedOnDate  | dateFormat}}</span></td>
             </tr>
             <tr>
               <td>Period</td>
@@ -165,10 +165,10 @@
             <tr>
               <td>Date of Deposit</td>
               <td>
-                <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate | date}}
+                <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">{{recurringDepositsAccountData.timeline.activatedOnDate  | dateFormat}}
                   <span *ngIf="!recurringDepositsAccountData.timeline.activatedOnDate">Not Activated</span>
                 </span>
-                <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate | date}}
+                <span *ngIf="recurringDepositsAccountData.expectedFirstDepositOnDate" >{{recurringDepositsAccountData.expectedFirstDepositOnDate  | dateFormat}}
                   <span *ngIf="!recurringDepositsAccountData.expectedFirstDepositOnDate">Not Activated</span>
                 </span>
               </td>
@@ -181,7 +181,7 @@
             </tr>
             <tr *ngIf="recurringDepositsAccountData.maturityDate">
               <td>Maturity Date</td>
-              <td><span>{{recurringDepositsAccountData.maturityDate | date}}</span></td>
+              <td><span>{{recurringDepositsAccountData.maturityDate  | dateFormat}}</span></td>
             </tr>
             <tr>
               <td>Total Deposits </td>
@@ -255,7 +255,7 @@
             <tr *ngIf="recurringDepositsAccountData.timeline.closedOnDate">
               <td> Closed on Date </td>
               <td>
-                {{ recurringDepositsAccountData.timeline.closedOnDate | date }}
+                {{ recurringDepositsAccountData.timeline.closedOnDate  | dateFormat }}
             </tr>
             <tr>
               <td> Deposits Frequency </td>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -38,7 +38,7 @@
 
       <ng-container matColumnDef="validity">
         <th mat-header-cell *matHeaderCellDef> Validity </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | date}} to {{instruction.validTill | date}}
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}
         </td>
       </ng-container>
 

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/transactions-tab.component.html

@@ -11,7 +11,7 @@
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date | date }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.reversed}"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">

src/app/deposits/recurring-deposits/recurring-deposits-account-view/transactions-tab/view-transaction/view-transaction.component.html

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

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

@@ -160,7 +160,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">
@@ -183,7 +183,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>
@@ -222,7 +222,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">
@@ -280,7 +280,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>

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html

@@ -12,7 +12,7 @@
           <mat-label>Existing Meeting Date</mat-label>
           <mat-select formControlName="presentMeetingDate">
             <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-              {{ date | date }}
+              {{ date  | dateFormat }}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">

src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.html

@@ -6,10 +6,10 @@
       <mat-label>Meeting Date</mat-label>
       <mat-select [formControl]="meetingDate">
         <mat-option *ngFor="let date of meetingDates" [value]="date">
-          {{ date | date }}
+          {{ date  | dateFormat }}
         </mat-option>
       </mat-select>
-      <mat-hint>Next Meeting on: {{ this.groupData.collectionMeetingCalendar.nextTenRecurringDates[0] | date }}</mat-hint>
+      <mat-hint>Next Meeting on: {{ this.groupData.collectionMeetingCalendar.nextTenRecurringDates[0]  | dateFormat }}</mat-hint>
     </mat-form-field>
 
     <table class="mat-elevation-z1" mat-table [dataSource]="dataSource">

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html

@@ -54,7 +54,7 @@
           </div>
           <div class="mat-row">
             <div class="mat-cell">Activation Date</div>
-            <div class="mat-cell">{{(transferClientsForm.get('destinationGroupId').value.activationDate | date) || 'Not Activated'}}</div>
+            <div class="mat-cell">{{(transferClientsForm.get('destinationGroupId').value.activationDate  | dateFormat) || 'Not Activated'}}</div>
           </div>
           <div class="mat-row">
             <div class="mat-cell">Staff</div>

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

@@ -22,9 +22,9 @@
           <p>
             Group #: {{groupViewData.id}} | Center Name: {{groupViewData.centerName}} | Staff: {{groupViewData.staffName || 'Unassigned'}}<br/>
             Office Name: {{groupViewData.officeName}}<br/>
-            Activation Date : {{(groupViewData.activationDate)?(groupViewData.activationDate|date) :'Not Activated'}}<br/>
+            Activation Date : {{(groupViewData.activationDate)?(groupViewData.activationDate  | dateFormat) :'Not Activated'}}<br/>
             <span *ngIf="!groupViewData.active">
-             Closure Date: {{groupViewData.timeline.closedOnDate | date}}
+             Closure Date: {{groupViewData.timeline.closedOnDate  | dateFormat}}
             </span>
           </p>
         </mat-card-subtitle>
@@ -33,7 +33,7 @@
       <div class="group-meeting" fxLayoutAlign="start start">
         <div *ngIf="groupViewData.collectionMeetingCalendar; else unassigned">
           <p>
-             Next Meeting on: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0] | date}}   
+             Next Meeting on: {{groupViewData.collectionMeetingCalendar?.nextTenRecurringDates[0]  | dateFormat}}
              <i class="fa fa-edit" *ngIf="editMeeting" (click)="doAction('Edit Meeting')"></i><br/>
              Meeting Frequency: {{groupViewData.collectionMeetingCalendar?.frequency.value | lowercase}}
           </p>
@@ -41,7 +41,7 @@
         <ng-template #unassigned>
           <div>
             <p>
-              Next Meeting on: Unassigned   
+              Next Meeting on: Unassigned
               <i class="fa fa-calendar"></i><br/>
               Meeting Frequency: N/A
           </p>

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

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

src/app/loans/loans-account-stepper/loans-account-charges-step/loans-account-charges-step.component.html

@@ -55,10 +55,10 @@
       <td mat-cell *matCellDef="let charge">
         <span
           *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-          {{(charge.dueDate | date) || 'Unassigned'}}
+          {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
+          {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
         </span>
         <span
           *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

src/app/loans/loans-account-stepper/loans-account-preview-step/loans-account-preview-step.component.html

@@ -28,12 +28,12 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Submitted on:</span>
-    <span fxFlex="60%">{{ loansAccount.submittedOnDate | date }}</span>
+    <span fxFlex="60%">{{ loansAccount.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
     <span fxFlex="40%">Disbursement on:</span>
-    <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate | date }}</span>
+    <span fxFlex="60%">{{ loansAccount.expectedDisbursementDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.externalId">
@@ -71,12 +71,12 @@
 
   <div fxFlexFill *ngIf="loansAccount.repaymentsStartingFromDate">
     <span fxFlex="40%">First repayment on:</span>
-    <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate | date }}</span>
+    <span fxFlex="60%">{{ loansAccount.repaymentsStartingFromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestChargedFromDate">
     <span fxFlex="40%">Interest charged from:</span>
-    <span fxFlex="60%">{{ loansAccount.interestChargedFromDate | date }}</span>
+    <span fxFlex="60%">{{ loansAccount.interestChargedFromDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill *ngIf="loansAccount.interestRatePerPeriod">
@@ -204,10 +204,10 @@
         <td mat-cell *matCellDef="let charge">
           <span
             *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-            {{(charge.dueDate | date) || 'Unassigned'}}
+            {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
+            {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
           </span>
           <span
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

src/app/loans/loans-view/account-details/account-details.component.html

@@ -73,22 +73,22 @@
 
         <div fxFlexFill>
             <span fxFlex="50%"> Submitted on</span>
-            <span fxFlex="50%"> {{loanDetails.timeline.submittedOnDate | date }} </span>
+            <span fxFlex="50%"> {{loanDetails.timeline.submittedOnDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%"> Approved on</span>
-            <span fxFlex="50%"> {{loanDetails.timeline.approvedOnDate | date }} </span>
+            <span fxFlex="50%"> {{loanDetails.timeline.approvedOnDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%"> Disbursed on</span>
-            <span fxFlex="50%"> {{loanDetails.timeline.actualDisbursementDate | date }} </span>
+            <span fxFlex="50%"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill>
             <span fxFlex="50%"> Matures on</span>
-            <span fxFlex="50%"> {{loanDetails.timeline.expectedMaturityDate | date }} </span>
+            <span fxFlex="50%"> {{loanDetails.timeline.expectedMaturityDate  | dateFormat }} </span>
         </div>
 
         <div fxFlexFill *ngIf="loanDetails.canDefineInstallmentAmount">

src/app/loans/loans-view/charges-tab/charges-tab.component.html

@@ -22,7 +22,7 @@
 
       <ng-container matColumnDef="dueasof">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Due as of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate| date }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationtype">

src/app/loans/loans-view/floating-interest-rates/floating-interest-rates.component.html

@@ -4,7 +4,7 @@
 
     <ng-container matColumnDef="fromDate">
       <th mat-header-cell *matHeaderCellDef> From Date </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.fromDate | date}} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.fromDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="interestRate">

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

@@ -6,7 +6,7 @@
       <p>
         # of Repayments :{{loanDetails?.numberOfRepayments}}
       <p>
-        Maturity Date :{{loanDetails?.timeline.expectedMaturityDate | date}}
+        Maturity Date :{{loanDetails?.timeline.expectedMaturityDate  | dateFormat}}
       </p>
     </div>
   </ng-container>
@@ -71,7 +71,7 @@
         <th mat-header-cell *matHeaderCellDef> Value </th>
         <td mat-cell *matCellDef="let ele"> 
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
-            <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate | date}} </span>
+            <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat}} </span>
             <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> Not Available </span>
           </ng-container>
 
@@ -126,7 +126,7 @@
         <th mat-header-cell *matHeaderCellDef> Value </th>
         <td mat-cell *matCellDef="let ele"> 
           <ng-container *ngIf="ele.key === 'Disbursement Date'" >
-            <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate | date}} </span>
+            <span *ngIf="loanDetails.timeline.actualDisbursementDate"> {{loanDetails.timeline.actualDisbursementDate  | dateFormat}} </span>
             <span *ngIf="!loanDetails.timeline.actualDisbursementDate"> Not Available </span>
           </ng-container>
 

src/app/loans/loans-view/loan-tranche-details/loan-tranche-details.component.html

@@ -22,14 +22,14 @@
 
     <ng-container matColumnDef="expected disbursement on">
       <th mat-header-cell *matHeaderCellDef> Expected Disbursement On </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.expectedDisbursementDate | date}} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.expectedDisbursementDate  | dateFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="disbursed on">
       <th mat-header-cell *matHeaderCellDef> Disbursed On </th>
       <td mat-cell *matCellDef="let ele">
         <span *ngIf="ele.actualDisbursementDate">
-          {{ ele.actualDisbursementDate | date }}
+          {{ ele.actualDisbursementDate  | dateFormat }}
         </span>
       </td>
     </ng-container>
@@ -63,7 +63,7 @@
 
       <ng-container matColumnDef="emi amount variation from">
         <th mat-header-cell *matHeaderCellDef> Applicable From Date </th>
-        <td mat-cell *matCellDef="let ele"> {{ ele.termVariationApplicableFrom | date}} </td>
+        <td mat-cell *matCellDef="let ele"> {{ ele.termVariationApplicableFrom  | dateFormat}} </td>
       </ng-container>
   
       <ng-container matColumnDef="fixed emi amount">

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

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

src/app/loans/loans-view/original-schedule-tab/original-schedule-tab.component.html

@@ -4,7 +4,7 @@
 
     <ng-container matColumnDef="date">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.dueDate | date}} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.dueDate  | dateFormat}} </td>
       <td mat-footer-cell *matFooterCellDef> <b> Total</b> </td>
     </ng-container>
 

src/app/loans/loans-view/repayment-schedule-tab/repayment-schedule-tab.component.html

@@ -16,13 +16,13 @@
 
     <ng-container matColumnDef="date">
       <th mat-header-cell *matHeaderCellDef> Date </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.dueDate | date}} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.dueDate  | dateFormat}} </td>
       <td mat-footer-cell *matFooterCellDef>  </td>
     </ng-container>
 
     <ng-container matColumnDef="paiddate">
       <th mat-header-cell *matHeaderCellDef> Paid Date </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.obligationsMetOnDate | date}} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.obligationsMetOnDate  | dateFormat}} </td>
       <td mat-footer-cell *matFooterCellDef>  </td>
     </ng-container>
 

src/app/loans/loans-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -41,7 +41,7 @@
 
       <ng-container matColumnDef="validity">
         <th mat-header-cell *matHeaderCellDef> Validity </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | date}} to {{instruction.validTill | date}}
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}
         </td>
       </ng-container>
 

src/app/loans/loans-view/transactions-tab/transactions-tab.component.html

@@ -24,7 +24,7 @@
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.date | date }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="{'strike': transaction.manuallyReversed}"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">

src/app/loans/loans-view/transactions/view-transaction/view-transaction.component.html

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

src/app/loans/loans-view/view-charge/view-charge.component.html

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

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">

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">

src/app/pipes/date-format.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DateFormatPipe } from './date-format.pipe';
+
+describe('DateFormatPipe', () => {
+  it('create an instance', () => {
+    const pipe = new DateFormatPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/date-format.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SettingsService } from 'app/settings/settings.service';
+import * as moment from 'moment';
+
+@Pipe({
+  name: 'dateFormat'
+})
+export class DateFormatPipe implements PipeTransform {
+
+  defaultDateFormat: string;
+
+  constructor(private settingsService: SettingsService) {
+    this.defaultDateFormat = this.settingsService.dateFormat;
+    this.defaultDateFormat = this.defaultDateFormat.replace('dd', 'DD');
+  }
+
+  transform(value: Date | moment.Moment, dateFormat: string): any {
+    if (dateFormat == null) {
+      return moment(value).format(this.defaultDateFormat);
+    }
+    return moment(value).format(dateFormat);
+  }
+
+}

src/app/pipes/pipes.module.ts

@@ -6,13 +6,14 @@ import { ChargesFilterPipe } from './charges-filter.pipe';
 import { ChargesPenaltyFilterPipe } from './charges-penalty-filter.pipe';
 import { FindPipe } from './find.pipe';
 import { UrlToStringPipe } from './url-to-string.pipe';
+import { DateFormatPipe } from './date-format.pipe';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe],
-  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe],
-  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe]
+  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe],
+  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe],
+  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe]
 })
 export class PipesModule { }

src/app/products/fixed-deposit-products/fixed-deposit-product-stepper/fixed-deposit-product-preview-step/fixed-deposit-product-preview-step.component.html

@@ -125,12 +125,12 @@
 
       <div fxFlexFill>
         <span fxFlex="40%">Valid from Date:</span>
-        <span fxFlex="60%">{{ chart.fromDate | date }}</span>
+        <span fxFlex="60%">{{ chart.fromDate  | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.endDate">
         <span fxFlex="40%">End Date:</span>
-        <span fxFlex="60%">{{ chart.endDate | date }}</span>
+        <span fxFlex="60%">{{ chart.endDate  | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.description">

src/app/products/fixed-deposit-products/view-fixed-deposit-product/view-fixed-deposit-product.component.html

@@ -154,12 +154,12 @@
 
             <div fxFlexFill>
               <span fxFlex="40%">Valid from Date:</span>
-              <span fxFlex="60%">{{ fixedDepositProductData.activeChart.fromDate | date }}</span>
+              <span fxFlex="60%">{{ fixedDepositProductData.activeChart.fromDate  | dateFormat }}</span>
             </div>
 
             <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.endDate">
               <span fxFlex="40%">End Date:</span>
-              <span fxFlex="60%">{{ fixedDepositProductData.activeChart.endDate | date }}</span>
+              <span fxFlex="60%">{{ fixedDepositProductData.activeChart.endDate  | dateFormat }}</span>
             </div>
 
             <div fxFlexFill *ngIf="fixedDepositProductData.activeChart.description">

src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html

@@ -47,7 +47,7 @@
 
           <ng-container matColumnDef="fromDate">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> From Date </th>
-            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate | date : 'dd MMMM yyyy' }} </td>
+            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate  | dateFormat : 'dd MMMM yyyy' }} </td>
           </ng-container>
 
           <ng-container matColumnDef="interestRate">

src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html

@@ -50,7 +50,7 @@
 
           <ng-container matColumnDef="fromDate">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> From Date </th>
-            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate | date : 'dd MMMM yyyy' }} </td>
+            <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate  | dateFormat : 'dd MMMM yyyy' }} </td>
           </ng-container>
 
           <ng-container matColumnDef="interestRate">

src/app/products/floating-rates/view-floating-rate/view-floating-rate.component.html

@@ -55,7 +55,7 @@
 
           <ng-container matColumnDef="fromDate">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> From Date </th>
-            <td mat-cell *matCellDef="let floatingRate"> {{ floatingRate.fromDate | date : 'dd MMMM yyyy' }} </td>
+            <td mat-cell *matCellDef="let floatingRate"> {{ floatingRate.fromDate  | dateFormat : 'dd MMMM yyyy' }} </td>
           </ng-container>
 
           <ng-container matColumnDef="interestRate">

src/app/products/loan-products/loan-products.component.html

@@ -30,7 +30,7 @@
 
       <ng-container matColumnDef="closeDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Expiry Date </th>
-        <td mat-cell *matCellDef="let loanProduct"> {{ loanProduct.closeDate | date }} </td>
+        <td mat-cell *matCellDef="let loanProduct"> {{ loanProduct.closeDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">

src/app/products/loan-products/view-loan-product/view-loan-product.component.html

@@ -38,12 +38,12 @@
 
         <div fxFlexFill *ngIf="loanProduct.startDate">
           <span fxFlex="40%">Start Date:</span>
-          <span fxFlex="60%">{{ loanProduct.startDate | date }}</span>
+          <span fxFlex="60%">{{ loanProduct.startDate  | dateFormat }}</span>
         </div>
 
         <div fxFlexFill *ngIf="loanProduct.closeDate">
           <span fxFlex="40%">Close Date:</span>
-          <span fxFlex="60%">{{ loanProduct.closeDate | date }}</span>
+          <span fxFlex="60%">{{ loanProduct.closeDate  | dateFormat }}</span>
         </div>
 
         <div fxFlexFill *ngIf="loanProduct.description">

src/app/products/manage-tax-components/view-tax-component/view-tax-component.component.html

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

src/app/products/manage-tax-groups/create-tax-group/create-tax-group.component.html

@@ -35,7 +35,7 @@
 
             <ng-container matColumnDef="startDate">
               <th mat-header-cell *matHeaderCellDef> Start Date </th>
-              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate | date }}
+              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate  | dateFormat }}
               </td>
             </ng-container>
 

src/app/products/manage-tax-groups/edit-tax-group/edit-tax-group.component.html

@@ -35,13 +35,13 @@
 
             <ng-container matColumnDef="startDate">
               <th mat-header-cell *matHeaderCellDef> Start Date </th>
-              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate | date }}
+              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.startDate  | dateFormat }}
               </td>
             </ng-container>
 
             <ng-container matColumnDef="endDate">
               <th mat-header-cell *matHeaderCellDef> End Date </th>
-              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.endDate ? (taxComponent.endDate | date) : '' }}
+              <td mat-cell *matCellDef="let taxComponent"> {{ taxComponent.endDate ? (taxComponent.endDate  | dateFormat) : '' }}
               </td>
             </ng-container>
 

src/app/products/manage-tax-groups/view-tax-group/view-tax-group.component.html

@@ -42,11 +42,11 @@
           </div>
 
           <div fxFlex="33%">
-            {{ taxcomponent.startDate | date }}
+            {{ taxcomponent.startDate  | dateFormat }}
           </div>
 
           <div fxFlex="33%" *ngIf="taxcomponent.endDate !== undefined || taxcomponent.endDate !== null">
-            {{ taxcomponent.endDate | date }}
+            {{ taxcomponent.endDate  | dateFormat }}
           </div>
 
       </div>

src/app/products/recurring-deposit-products/recurring-deposit-product-stepper/recurring-deposit-product-preview-step/recurring-deposit-product-preview-step.component.html

@@ -131,12 +131,12 @@
 
       <div fxFlexFill>
         <span fxFlex="40%">Valid from Date:</span>
-        <span fxFlex="60%">{{ chart.fromDate | date }}</span>
+        <span fxFlex="60%">{{ chart.fromDate  | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.endDate">
         <span fxFlex="40%">End Date:</span>
-        <span fxFlex="60%">{{ chart.endDate | date }}</span>
+        <span fxFlex="60%">{{ chart.endDate  | dateFormat }}</span>
       </div>
 
       <div fxFlexFill *ngIf="chart.description">

src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html

@@ -152,12 +152,12 @@
       
             <div fxFlexFill>
               <span fxFlex="40%">Valid from Date:</span>
-              <span fxFlex="60%">{{ recurringDepositProduct.activeChart.fromDate | date }}</span>
+              <span fxFlex="60%">{{ recurringDepositProduct.activeChart.fromDate  | dateFormat }}</span>
             </div>
       
             <div fxFlexFill *ngIf="recurringDepositProduct.activeChart.endDate">
               <span fxFlex="40%">End Date:</span>
-              <span fxFlex="60%">{{ recurringDepositProduct.activeChart.endDate | date }}</span>
+              <span fxFlex="60%">{{ recurringDepositProduct.activeChart.endDate  | dateFormat }}</span>
             </div>
       
             <div fxFlexFill *ngIf="recurringDepositProduct.activeChart.description">

src/app/products/share-products/dividends-share-product/dividends.component.html

@@ -25,12 +25,12 @@
 
       <ng-container matColumnDef="dividendPeriodStartDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Dividend Period Start Date </th>
-        <td mat-cell *matCellDef="let dividend">{{ dividend.dividendPeriodStartDate | date }}</td>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.dividendPeriodStartDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="dividendPeriodEndDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Dividend Period End Date </th>
-        <td mat-cell *matCellDef="let dividend">{{ dividend.dividendPeriodEndDate | date }}</td>
+        <td mat-cell *matCellDef="let dividend">{{ dividend.dividendPeriodEndDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="amount">

src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html

@@ -14,7 +14,7 @@
     <ng-container matColumnDef="fromDate">
       <th mat-header-cell *matHeaderCellDef> From Date </th>
       <td mat-cell *matCellDef="let marketPricePeriod">
-        {{ marketPricePeriod.fromDate | date }}
+        {{ marketPricePeriod.fromDate  | dateFormat }}
       </td>
     </ng-container>
 

src/app/products/share-products/share-product-stepper/share-product-preview-step/share-product-preview-step.component.html

@@ -96,7 +96,7 @@
       <ng-container matColumnDef="fromDate">
         <th mat-header-cell *matHeaderCellDef> From Date </th>
         <td mat-cell *matCellDef="let marketPricePeriod">
-          {{ marketPricePeriod.fromDate | date }}
+          {{ marketPricePeriod.fromDate  | dateFormat }}
         </td>
       </ng-container>
 

src/app/products/share-products/view-share-product/view-share-product.component.html

@@ -113,7 +113,7 @@
             <ng-container matColumnDef="fromDate">
               <th mat-header-cell *matHeaderCellDef> From Date </th>
               <td mat-cell *matCellDef="let marketPrice">
-                {{ marketPrice.fromDate | date }}
+                {{ marketPrice.fromDate  | dateFormat }}
               </td>
             </ng-container>
 

src/app/savings/savings-account-stepper/savings-account-charges-step/savings-account-charges-step.component.html

@@ -53,10 +53,10 @@
       <th mat-header-cell *matHeaderCellDef> Date </th>
       <td mat-cell *matCellDef="let charge">
         <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-          {{(charge.dueDate | date) || 'Unassigned'}}
+          {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
         </span>
         <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-          {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
+          {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
         </span>
         <span 
           *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

src/app/savings/savings-account-stepper/savings-account-preview-step/savings-account-preview-step.component.html

@@ -11,7 +11,7 @@
 
   <div fxFlexFill>
     <span fxFlex="40%">Submitted On</span>
-    <span fxFlex="60%">{{ savingsAccount.submittedOnDate | date }}</span>
+    <span fxFlex="60%">{{ savingsAccount.submittedOnDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
@@ -146,10 +146,10 @@
         <th mat-header-cell *matHeaderCellDef> Date </th>
         <td mat-cell *matCellDef="let charge">
           <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
-            {{(charge.dueDate | date) || 'Unassigned'}}
+            {{(charge.dueDate  | dateFormat) || 'Unassigned'}}
           </span>
           <span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
-            {{(charge.feeOnMonthDay | date) || 'Unassigned'}}
+            {{(charge.feeOnMonthDay  | dateFormat) || 'Unassigned'}}
           </span>
           <span 
             *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'

src/app/savings/savings-account-view/charges-tab/charges-tab.component.html

@@ -31,7 +31,7 @@
 
       <ng-container matColumnDef="dueAsOf">
         <th mat-header-cell *matHeaderCellDef> Due As Of </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | date }} </td>
+        <td mat-cell *matCellDef="let charge"> {{ charge.dueDate  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="repeatsOn">

src/app/savings/savings-account-view/savings-account-view.component.html

@@ -118,7 +118,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.lastActiveTransactionDate">
               <td>Last Active Transaction Date</td>
-              <td>{{savingsAccountData.lastActiveTransactionDate | date}}</td>
+              <td>{{savingsAccountData.lastActiveTransactionDate  | dateFormat}}</td>
             </tr>
             <tr *ngIf="!(savingsAccountData.subStatus.id === 0)">
               <td>Substatus</td>
@@ -162,7 +162,7 @@
             </tr>
             <tr *ngIf="savingsAccountData.summary.lastInterestCalculationDate">
               <td>Interest Recalculation Date</td>
-              <td>{{savingsAccountData.summary.lastInterestCalculationDate | date}}</td>
+              <td>{{savingsAccountData.summary.lastInterestCalculationDate  | dateFormat}}</td>
             </tr>
             <tr *ngIf="savingsAccountData.onHoldFunds">
               <td>On Hold Funds</td>
@@ -183,7 +183,7 @@
             <tbody>
               <tr>
                 <td>Activated On</td>
-                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate | date) : 'Not Activated'}}</td>
+                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr>
                 <td>Currency</td>
@@ -206,7 +206,7 @@
             <tbody>
               <tr>
                 <td>Activated On</td>
-                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate | date) : 'Not Activated'}}</td>
+                <td>{{savingsAccountData.timeline.activatedOnDate ? (savingsAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
               </tr>
               <tr>
                 <td>Field Officer</td>

src/app/savings/savings-account-view/standing-instructions-tab/standing-instructions-tab.component.html

@@ -35,7 +35,7 @@
 
       <ng-container matColumnDef="validity">
         <th mat-header-cell *matHeaderCellDef> Validity </th>
-        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom | date}} to {{instruction.validTill | date}}</td>
+        <td mat-cell *matCellDef="let instruction">{{instruction.validFrom  | dateFormat}} to {{instruction.validTill  | dateFormat}}</td>
       </ng-container>
 
       <ng-container matColumnDef="actions">

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.html

@@ -21,7 +21,7 @@
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
-        <td mat-cell *matCellDef="let transaction"> {{ transaction.date | date }} </td>
+        <td mat-cell *matCellDef="let transaction"> {{ transaction.date  | dateFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">

src/app/savings/savings-account-view/transactions/view-transaction/view-transaction.component.html

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

src/app/savings/savings-account-view/view-charge/view-charge.component.html

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

src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html

@@ -6,7 +6,7 @@
 
       <ng-container matColumnDef="transactionDate">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
-        <td mat-cell *matCellDef="let share"> {{ share.purchasedDate | date }}</td>
+        <td mat-cell *matCellDef="let share"> {{ share.purchasedDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">