Merge pull request #1457 from josehernandezfintecheandomx/enhancement/datepipe_moveout_pending

Move out DatePipe to use in one place Dates

angular.json

@@ -31,7 +31,37 @@
             ],
             "styles": [
               "node_modules/font-awesome/css/font-awesome.css",
-              "src/main.scss"
+              "src/main.scss",
+              {
+                "inject": false,
+                "input": "src/theme/deeppurple-amber.scss",
+                "bundleName": "deeppurple-amber"
+              },
+              {
+                "inject": false,
+                "input": "src/theme/indigo-pink.scss",
+                "bundleName": "indigo-pink"
+              },
+              {
+                "inject": false,
+                "input": "src/theme/pink-bluegrey.scss",
+                "bundleName": "pink-bluegrey"
+              },
+              {
+                "inject": false,
+                "input": "src/theme/purple-green.scss",
+                "bundleName": "purple-green"
+              },
+              {
+                "inject": false,
+                "input": "src/theme/custom/denim-yellowgreen.scss",
+                "bundleName": "denim-yellowgreen"
+              },
+              {
+                "inject": false,
+                "input": "src/theme/custom/pictonblue-yellowgreen.scss",
+                "bundleName": "pictonblue-yellowgreen"
+              }
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
@@ -92,30 +122,36 @@
             "scripts": [],
             "styles": [
               "src/main.scss",
-              {"inject":false,
+              {
+                "inject": false,
                 "input": "src/theme/deeppurple-amber.scss",
-                "bundleName": "theme/deeppurple-amber"
+                "bundleName": "deeppurple-amber"
-},
+              },
-              {"inject":false,
+              {
+                "inject": false,
                 "input": "src/theme/indigo-pink.scss",
-                "bundleName": "theme/indigo-pink"
+                "bundleName": "indigo-pink"
-},
+              },
-              {"inject":false,
+              {
+                "inject": false,
                 "input": "src/theme/pink-bluegrey.scss",
-                "bundleName": "theme/pink-bluegrey"
+                "bundleName": "pink-bluegrey"
-},
+              },
-              {"inject":false,
+              {
+                "inject": false,
                 "input": "src/theme/purple-green.scss",
-                "bundleName": "theme/purple-green"
+                "bundleName": "purple-green"
-},
+              },
-              {"inject":false,
+              {
+                "inject": false,
                 "input": "src/theme/custom/denim-yellowgreen.scss",
-                "bundleName": "theme/denim-yellowgreen"
+                "bundleName": "denim-yellowgreen"
-},
+              },
-              {"inject":false,
+              {
+                "inject": false,
                 "input": "src/theme/custom/pictonblue-yellowgreen.scss",
-                "bundleName": "theme/pictonblue-yellowgreen"
+                "bundleName": "pictonblue-yellowgreen"
-}
+              }
             ],
             "assets": [
               "src/favicon.ico",

src/app/account-transfers/account-transfers.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { AccountTransfersRoutingModule } from './account-transfers-routing.module';
@@ -32,6 +31,6 @@ import { ViewAccountTransferComponent } from './view-account-transfer/view-accou
     ListTransactionsComponent,
     ViewAccountTransferComponent
   ],
-  providers: [DatePipe]
+  providers: [ ]
 })
 export class AccountTransfersModule { }

src/app/app.module.ts

@@ -6,7 +6,6 @@ import { HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
 /** Environment Configuration */
-import { environment } from 'environments/environment';
 
 /** Main Component */
 import { WebAppComponent } from './web-app.component';
@@ -39,6 +38,7 @@ import { TasksModule } from './tasks/tasks.module';
 
 /** Main Routing Module */
 import { AppRoutingModule } from './app-routing.module';
+import { DatePipe } from '@angular/common';
 
 /**
  * App Module
@@ -74,7 +74,7 @@ import { AppRoutingModule } from './app-routing.module';
     AppRoutingModule,
   ],
   declarations: [WebAppComponent, NotFoundComponent],
-  providers: [],
+  providers: [DatePipe],
   bootstrap: [WebAppComponent]
 })
 export class AppModule { }

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

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl } from '@angular/forms';
 
@@ -15,6 +14,7 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Center Attendance component.
@@ -48,14 +48,14 @@ export class CenterAttendanceComponent implements OnInit {
   /**
    * Retrieves the center members data from `resolve`.
    * @param {ActivatedRoute} route Route
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {Router} router Router
    * @param {CentersService} centersService Centers Service
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               private centersService: CentersService,
               private settingsService: SettingsService,
@@ -125,9 +125,8 @@ export class CenterAttendanceComponent implements OnInit {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevMeetingDate: Date = new Date(this.meetingDate.value);
-    this.meetingDate.patchValue(this.datePipe.transform(prevMeetingDate, dateFormat));
     const data = {
-      meetingDate: this.meetingDate.value,
+      meetingDate: this.dateUtils.formatDate(this.meetingDate.value, dateFormat),
       calendarId: this.centerData.collectionMeetingCalendar.id,
       clientsAttendance: this.dataSource,
       dateFormat,

src/app/centers/centers-view/datatable-tab/multi-row/multi-row.component.ts

@@ -3,7 +3,6 @@ import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -19,6 +18,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 /** Custom Services */
 import { CentersService } from '../../../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Center Multi Row Data Tables
@@ -50,13 +50,13 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches center Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {CentersService} centersService Centers Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private centersService: CentersService,
               private settingsService: SettingsService,
               private dialog: MatDialog) {
@@ -151,7 +151,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.centersService.addCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/centers/centers-view/datatable-tab/single-row/single-row.component.ts

@@ -2,7 +2,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -18,6 +17,7 @@ import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-ba
 /** Custom Services */
 import { CentersService } from '../../../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Centers Single Row Data Tables
@@ -40,13 +40,13 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches center Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {CentersService} centersService Centers Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private dialog: MatDialog,
               private settingsService: SettingsService,
               private centersService: CentersService) {
@@ -81,7 +81,7 @@ export class SingleRowComponent implements OnInit {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.centersService.addCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => {
@@ -116,7 +116,7 @@ export class SingleRowComponent implements OnInit {
     editDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.centersService.editCenterDatatableEntry(this.centerId, this.datatableName, dataTableEntryObject).subscribe(() => {

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

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DatePipe } from '@angular/common';
 import { ClientsService } from 'app/clients/clients.service';
 
 /**
@@ -26,7 +25,6 @@ export class ViewChargeComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private date: DatePipe,
               private clientService: ClientsService) {
     this.route.data.subscribe((data: { clientChargeData: any }) => {
       this.chargeData = data.clientChargeData;

src/app/clients/clients-view/client-actions/activate-client/activate-client.component.ts

@@ -30,7 +30,7 @@ export class ActivateClientComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {clientsService} clientsService Cliens Service
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service

src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.ts

@@ -36,7 +36,7 @@ export class AddClientChargeComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {ClientsService} clientsService Clients Service
    * @param {SettingsService} settingsService Setting service
    */

src/app/clients/clients-view/client-actions/close-client/close-client.component.ts

@@ -32,7 +32,7 @@ export class CloseClientComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ClientsService} clientsService Clients Service
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service

src/app/clients/clients-view/datatable-tab/multi-row/multi-row.component.ts

@@ -6,7 +6,6 @@ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -15,6 +14,7 @@ import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-d
 /** Custom Services */
 import { ClientsService } from '../../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-multi-row',
@@ -31,7 +31,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   showDeleteBotton: boolean;
 
   constructor(private route: ActivatedRoute,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private clientsService: ClientsService,
     private dialog: MatDialog,
     private settingsService: SettingsService) {
@@ -118,7 +118,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
       if (response.data) {
         // format Dates
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.clientsService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/clients/clients-view/datatable-tab/single-row/single-row.component.ts

@@ -5,7 +5,6 @@ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-base';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -14,6 +13,7 @@ import { DeleteDialogComponent } from '../../../../shared/delete-dialog/delete-d
 /** Custom Services */
 import { ClientsService } from '../../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 
 @Component({
@@ -28,7 +28,7 @@ export class SingleRowComponent implements OnInit {
   clientId: string;
 
   constructor(private route: ActivatedRoute,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private dialog: MatDialog,
     private clientsService: ClientsService,
     private settingsService: SettingsService) {
@@ -59,7 +59,7 @@ export class SingleRowComponent implements OnInit {
       if (response.data) {
         // format Dates
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.clientsService.addClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {
@@ -93,7 +93,7 @@ export class SingleRowComponent implements OnInit {
       if (response.data) {
         // format Dates
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.clientsService.editClientDatatableEntry(this.clientId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/clients/clients-view/family-members-tab/add-family-member/add-family-member.component.ts

@@ -31,7 +31,7 @@ export class AddFamilyMemberComponent implements OnInit {
 
   /**
    * @param {FormBuilder} formBuilder FormBuilder
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {Router} router Router
    * @param {Route} route Route
    * @param {ClientsService} clientsService Clients Service

src/app/clients/clients-view/family-members-tab/edit-family-member/edit-family-member.component.ts

@@ -31,7 +31,7 @@ export class EditFamilyMemberComponent implements OnInit {
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
-   * @param {Dates} dateUtils DatePipe
+   * @param {Dates} dateUtils Date Utils
    * @param {Router} router Router
    * @param {ActivatedRoute} route Route
    * @param {ClientsService} clientsService Clients Service

src/app/clients/clients.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { ClientsRoutingModule } from './clients-routing.module';
@@ -123,7 +122,7 @@ import { CreateSelfServiceUserComponent } from './clients-view/client-actions/cr
     CaptureImageDialogComponent,
     CreateSelfServiceUserComponent
   ],
-  providers: [DatePipe]
+  providers: [ ]
 
 })
 export class ClientsModule { }

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

@@ -8,10 +8,10 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Services */
-import { DatePipe } from '@angular/common';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Fixed Deposit Account Charges Step
@@ -45,11 +45,11 @@ export class FixedDepositAccountChargesStepComponent implements OnInit, OnChange
 
   /**
    * @param {MatDialog} dialog Mat Dialog
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(public dialog: MatDialog,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private settingsService: SettingsService) { }
 
   ngOnInit() {
@@ -132,7 +132,7 @@ export class FixedDepositAccountChargesStepComponent implements OnInit, OnChange
       if (response.data) {
         let newCharge: any;
         const dateFormat = this.settingsService.dateFormat;
-        const date = this.datePipe.transform(response.data.value.date, dateFormat);
+        const date = this.dateUtils.formatDate(response.data.value.date, dateFormat);
         switch (charge.chargeTimeType.value) {
           case 'Specified due date':
           case 'Weekly Fee':

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

@@ -3,7 +3,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
@@ -19,6 +18,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Charges Tab Component
@@ -63,12 +63,12 @@ export class ChargesTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
-   * @param {DatePipe} datePipe DatePipe.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Settings Service.
    */
   constructor(private savingsService: SavingsService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -131,7 +131,7 @@ export class ChargesTabComponent implements OnInit {
         const dateFormat = this.settingsService.dateFormat;
         const dataObject = {
           ...response.data.value,
-          dueDate: this.datePipe.transform(response.data.value.dueDate, dateFormat),
+          dueDate: this.dateUtils.formatDate(response.data.value.dueDate, dateFormat),
           dateFormat,
           locale
         };

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -3,7 +3,6 @@ import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -19,6 +18,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Savings Account Multi Row Data Tables
@@ -50,13 +50,13 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service.
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private savingsService: SavingsService,
               private dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -151,7 +151,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/deposits/fixed-deposits/fixed-deposit-account-view/datatable-tabs/single-row/single-row.component.ts

@@ -2,7 +2,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -18,6 +17,7 @@ import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-ba
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 
 /**
@@ -41,13 +41,13 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service.
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private dialog: MatDialog,
               private savingsService: SavingsService,
               private settingsService: SettingsService) {
@@ -82,7 +82,7 @@ export class SingleRowComponent implements OnInit {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
@@ -117,7 +117,7 @@ export class SingleRowComponent implements OnInit {
     editDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.editSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/deposits/fixed-deposits/fixed-deposits.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { SharedModule } from 'app/shared/shared.module';
@@ -88,6 +87,6 @@ import { EditFixedDepositAccountComponent } from './edit-fixed-deposit-account/e
     DirectivesModule,
     FixedDepositsRoutingModule
   ],
-  providers: [DatePipe]
+  providers: [ ]
 })
 export class FixedDepositsModule { }

src/app/deposits/recurring-deposits/create-recurring-deposits-account/create-recurring-deposits-account.component.ts

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../recurring-deposits.service';
@@ -13,6 +12,7 @@ import { RecurringDepositsAccountTermsStepComponent } from '../recurring-deposit
 import { RecurringDepositsAccountCurrencyStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component';
 import { RecurringDepositsAccountSettingsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component';
 import { RecurringDepositsAccountChargesStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create new recurring deposit account
@@ -38,7 +38,7 @@ export class CreateRecurringDepositsAccountComponent implements OnInit {
 
   constructor(private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private recurringDepositsService: RecurringDepositsService,
     private settingsService: SettingsService,
   ) {
@@ -122,13 +122,13 @@ export class CreateRecurringDepositsAccountComponent implements OnInit {
       charges: this.recurringDepositAccount.charges.map((charge: any) => ({
         chargeId: charge.id,
         amount: charge.amount,
-        dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
+        dueDate: charge.dueDate && this.dateUtils.formatDate(charge.dueDate, dateFormat),
         feeOnMonthDay: charge.feeOnMonthDay,
         feeInterval: charge.feeInterval
       })),
       isCalendarInherited: this.recurringDepositAccount.recurringDepositAccount ? this.recurringDepositAccount.recurringDepositAccount : false,
-      submittedOnDate: this.datePipe.transform(this.recurringDepositAccount.submittedOnDate, dateFormat),
+      submittedOnDate: this.dateUtils.formatDate(this.recurringDepositAccount.submittedOnDate, dateFormat),
-      expectedFirstDepositOnDate: this.datePipe.transform(this.recurringDepositAccount.expectedFirstDepositOnDate, dateFormat),
+      expectedFirstDepositOnDate: this.dateUtils.formatDate(this.recurringDepositAccount.expectedFirstDepositOnDate, dateFormat),
       dateFormat,
       monthDayFormat,
       locale

src/app/deposits/recurring-deposits/edit-recurring-deposit-account/edit-recurring-deposit-account.component.ts

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../recurring-deposits.service';
@@ -13,6 +12,7 @@ import { RecurringDepositsAccountTermsStepComponent } from '../recurring-deposit
 import { RecurringDepositsAccountCurrencyStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-currency-step/recurring-deposits-account-currency-step.component';
 import { RecurringDepositsAccountSettingsStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-settings-step/recurring-deposits-account-settings-step.component';
 import { RecurringDepositsAccountChargesStepComponent } from '../recurring-deposits-account-stepper/recurring-deposits-account-charges-step/recurring-deposits-account-charges-step.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit new recurring deposit account
@@ -38,7 +38,7 @@ export class EditRecurringDepositAccountComponent implements OnInit {
 
   constructor(private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private recurringDepositsService: RecurringDepositsService,
     private settingsService: SettingsService,
   ) {
@@ -128,13 +128,13 @@ export class EditRecurringDepositAccountComponent implements OnInit {
       charges: this.recurringDepositAccount.charges.map((charge: any) => ({
         chargeId: charge.id,
         amount: charge.amount,
-        dueDate: charge.dueDate && this.datePipe.transform(charge.dueDate, dateFormat),
+        dueDate: charge.dueDate && this.dateUtils.formatDate(charge.dueDate, dateFormat),
         feeOnMonthDay: charge.feeOnMonthDay,
         feeInterval: charge.feeInterval
       })),
       isCalendarInherited: this.recurringDepositAccount.recurringDepositAccount ? this.recurringDepositAccount.recurringDepositAccount : false,
-      submittedOnDate: this.datePipe.transform(this.recurringDepositAccount.submittedOnDate, dateFormat),
+      submittedOnDate: this.dateUtils.formatDate(this.recurringDepositAccount.submittedOnDate, dateFormat),
-      expectedFirstDepositOnDate: this.datePipe.transform(this.recurringDepositAccount.expectedFirstDepositOnDate, dateFormat),
+      expectedFirstDepositOnDate: this.dateUtils.formatDate(this.recurringDepositAccount.expectedFirstDepositOnDate, dateFormat),
       dateFormat,
       monthDayFormat,
       locale

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

@@ -8,11 +8,11 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 
 /** Custom Services */
-import { DatePipe } from '@angular/common';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Recurring Deposit Account Charges Step
@@ -41,7 +41,7 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
   isChargesPatched = false;
 
   constructor(public dialog: MatDialog,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private settingsService: SettingsService, ) {
   }
 
@@ -126,7 +126,7 @@ export class RecurringDepositsAccountChargesStepComponent implements OnInit, OnC
       if (response.data) {
         let newCharge: any;
         const dateFormat = this.settingsService.dateFormat;
-        const date = this.datePipe.transform(response.data.value.date, dateFormat);
+        const date = this.dateUtils.formatDate(response.data.value.date, dateFormat);
         switch (charge.chargeTimeType.value) {
           case 'Specified due date':
           case 'Weekly Fee':

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

@@ -3,7 +3,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
@@ -18,6 +17,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Charges Tab Component
@@ -61,7 +61,7 @@ export class ChargesTabComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute,
               private savingsService: SavingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService, ) {
@@ -109,7 +109,7 @@ export class ChargesTabComponent implements OnInit {
         const dateFormat = this.settingsService.dateFormat;
         const dataObject = {
           ...response.data.value,
-          dueDate: this.datePipe.transform(response.data.value.dueDate, dateFormat),
+          dueDate: this.dateUtils.formatDate(response.data.value.dueDate, dateFormat),
           dateFormat,
           locale
         };

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -3,7 +3,6 @@ import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -18,6 +17,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Savings Account Multi Row Data Tables
@@ -49,12 +49,12 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    */
   constructor(private route: ActivatedRoute,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private savingsService: SavingsService,
     private dialog: MatDialog) {
     this.accountId = this.route.parent.parent.snapshot.paramMap.get('recurringDepositAccountId');
@@ -148,7 +148,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/deposits/recurring-deposits/recurring-deposits-account-view/datatable-tabs/single-row/single-row.component.ts

@@ -2,7 +2,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -18,6 +17,7 @@ import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-ba
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
+import { Dates } from 'app/core/utils/dates';
 
 
 /**
@@ -41,13 +41,13 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private route: ActivatedRoute,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private dialog: MatDialog,
     private savingsService: SavingsService,
     private settingsService: SettingsService, ) {
@@ -82,7 +82,7 @@ export class SingleRowComponent implements OnInit {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.addSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {
@@ -117,7 +117,7 @@ export class SingleRowComponent implements OnInit {
     editDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.editSavingsDatatableEntry(this.accountId, this.datatableName, dataTableEntryObject).subscribe(() => {

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

@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../recurring-deposits.service';
@@ -44,7 +43,6 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private datePipe: DatePipe,
               private recurringDepositsService: RecurringDepositsService,
               private savingsService: SavingsService,
               public dialog: MatDialog) {

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

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
@@ -10,6 +9,7 @@ import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Dialogs */
 import { RecurringDepositConfirmationDialogComponent } from '../../custom-dialogs/recurring-deposit-confirmation-dialog/recurring-deposit-confirmation-dialog.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * View Transaction Component.
@@ -31,12 +31,12 @@ export class ViewTransactionComponent {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
-   * @param {DatePipe} datePipe DatePipe.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private recurringDepositsService: RecurringDepositsService,
     private route: ActivatedRoute,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private router: Router,
     public dialog: MatDialog,
     private settingsService: SettingsService, ) {
@@ -56,7 +56,7 @@ export class ViewTransactionComponent {
         const locale = this.settingsService.language.code;
         const dateFormat = this.settingsService.dateFormat;
         const data = {
-          transactionDate: this.datePipe.transform(this.transactionData.date && new Date(this.transactionData.date), dateFormat),
+          transactionDate: this.dateUtils.formatDate(this.transactionData.date && new Date(this.transactionData.date), dateFormat),
           transactionAmount: 0,
           dateFormat,
           locale

src/app/deposits/recurring-deposits/recurring-deposits.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { RecurringDepositsRoutingModule } from './recurring-deposits-routing.module';
@@ -86,6 +85,6 @@ import { RecurringDepositConfirmationDialogComponent } from './recurring-deposit
     ViewTransactionComponent,
     EditTransactionComponent
   ],
-  providers: [DatePipe]
+  providers: [ ]
 })
 export class RecurringDepositsModule {}

src/app/groups/groups-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -3,7 +3,6 @@ import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -19,6 +18,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 /** Custom Services */
 import { GroupsService } from '../../../groups.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Group Multi Row Data Tables
@@ -50,13 +50,13 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches group Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {GroupsService} groupsService Groups Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private groupsService: GroupsService,
               private dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -151,7 +151,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.groupsService.addGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/groups/groups-view/datatable-tabs/single-row/single-row.component.ts

@@ -2,7 +2,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -18,6 +17,7 @@ import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-ba
 /** Custom Services */
 import { GroupsService } from '../../../groups.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Groups Single Row Data Tables
@@ -40,13 +40,13 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches group Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {GroupsService} groupsService Groups Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private dialog: MatDialog,
               private groupsService: GroupsService,
               private settingsService: SettingsService) {
@@ -81,7 +81,7 @@ export class SingleRowComponent implements OnInit {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.groupsService.addGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {
@@ -116,7 +116,7 @@ export class SingleRowComponent implements OnInit {
     editDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.groupsService.editGroupDatatableEntry(this.groupId, this.datatableName, dataTableEntryObject).subscribe(() => {

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

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormControl } from '@angular/forms';
 
@@ -15,6 +14,7 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 /** Custom Models */
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Group Attendance component.
@@ -44,14 +44,14 @@ export class GroupAttendanceComponent implements OnInit {
   /**
    * Retrieves the group members data from `resolve`.
    * @param {ActivatedRoute} route Route
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {Router} router Router
    * @param {GroupsService} groupsService Groups Service
    * @param {MatDialog} dialog Mat Dialog
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               private groupsService: GroupsService,
               public dialog: MatDialog,
@@ -119,9 +119,8 @@ export class GroupAttendanceComponent implements OnInit {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevMeetingDate: Date = new Date(this.meetingDate.value);
-    this.meetingDate.patchValue(this.datePipe.transform(prevMeetingDate, dateFormat));
     const data = {
-      meetingDate: this.meetingDate.value,
+      meetingDate: this.dateUtils.formatDate(prevMeetingDate, dateFormat),
       calendarId: this.groupData.collectionMeetingCalendar.id,
       clientsAttendance: this.dataSource,
       dateFormat,

src/app/groups/groups.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { GroupsRoutingModule } from './groups-routing.module';
@@ -70,6 +69,6 @@ import { GroupTransferClientsComponent } from './groups-view/group-actions/group
     EditGroupMeetingScheduleComponent,
     GroupTransferClientsComponent
   ],
-  providers: [DatePipe]
+  providers: [ ]
 })
 export class GroupsModule { }

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts

@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** rxjs Imports */
 import { merge, forkJoin } from 'rxjs';
@@ -13,6 +12,7 @@ import { HomeService } from '../../home.service';
 
 /** Charting Imports */
 import Chart from 'chart.js';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Client Trends Bar Chart Component.
@@ -39,11 +39,11 @@ export class ClientTrendsBarComponent implements OnInit {
    * Fetches offices data from `resolve`
    * @param {HomeService} homeService Home Service
    * @param {ActivatedRoute} route Activated Route
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    */
   constructor(private homeService: HomeService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe) {
+              private dateUtils: Dates) {
     this.route.data.subscribe( (data: { offices: any }) => {
       this.officeData = data.offices;
     });
@@ -120,7 +120,7 @@ export class ClientTrendsBarComponent implements OnInit {
       case 'Day':
         while (labelsArray.length < 12) {
           date.setDate(date.getDate() - 1);
-          const transformedDate = this.datePipe.transform(date, 'd/M');
+          const transformedDate = this.dateUtils.formatDate(date, 'd/M');
           labelsArray.push(transformedDate);
         }
         break;
@@ -138,7 +138,7 @@ export class ClientTrendsBarComponent implements OnInit {
         break;
       case 'Month':
         while (labelsArray.length < 12) {
-          const transformedDate = this.datePipe.transform(date, 'MMMM');
+          const transformedDate = this.dateUtils.formatDate(date, 'MMMM');
           labelsArray.push(transformedDate);
           date.setMonth(date.getMonth() - 1);
         }
@@ -160,7 +160,7 @@ export class ClientTrendsBarComponent implements OnInit {
       case 'Day':
         labels.forEach((label: any) => {
           const day = response.find((entry: any) => {
-            const transformedDate = this.datePipe.transform(entry.days, 'd/M');
+            const transformedDate = this.dateUtils.formatDate(entry.days, 'd/M');
             return transformedDate === label;
           });
           counts = this.updateCount(day, counts, type);

src/app/home/home.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { SharedModule } from '../shared/shared.module';
@@ -32,8 +31,6 @@ import { ClientTrendsBarComponent } from './dashboard/client-trends-bar/client-t
     AmountDisbursedPieComponent,
     ClientTrendsBarComponent
   ],
-  providers: [
+  providers: [ ]
-    DatePipe
-  ]
 })
 export class HomeModule { }

src/app/loans/create-loans-account/create-loans-account.component.ts

@@ -40,7 +40,7 @@ export class CreateLoansAccountComponent implements OnInit {
    * Sets loans account create form.
    * @param {route} ActivatedRoute Activated Route.
    * @param {router} Router Router.
-   * @param {datePipe} DatePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {loansService} LoansService Loans Service
    * @param {SettingsService} settingsService Settings Service
    */

src/app/loans/edit-loans-account/edit-loans-account.component.ts

@@ -35,7 +35,7 @@ export class EditLoansAccountComponent implements OnInit {
    * Sets loans account edit form.
    * @param {route} ActivatedRoute Activated Route.
    * @param {router} Router Router.
-   * @param {datePipe} DatePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {loansService} LoansService Loans Service
    * @param {SettingsService} settingsService Settings Service
    */

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

@@ -9,11 +9,11 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 import { LoansAccountAddCollateralDialogComponent } from 'app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component';
 
 /** Custom Services */
-import { DatePipe } from '@angular/common';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Recurring Deposit Account Charges Step
@@ -54,11 +54,11 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
   /**
    * Loans Account Charges Form Step
    * @param {dialog} MatDialog Mat Dialog
-   * @param {datePipe} DatePipe DatePipe
+   * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(public dialog: MatDialog,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private settingsService: SettingsService) {
   }
 
@@ -143,7 +143,7 @@ export class LoansAccountChargesStepComponent implements OnInit, OnChanges {
       if (response.data) {
         let newCharge: any;
         const dateFormat = this.settingsService.dateFormat;
-        const date = this.datePipe.transform(response.data.value.date, dateFormat);
+        const date = this.dateUtils.formatDate(response.data.value.date, dateFormat);
         switch (charge.chargeTimeType.value) {
           case 'Specified due date':
           case 'Weekly Fee':

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

@@ -5,7 +5,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
@@ -20,6 +19,7 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-charges-tab',
@@ -51,7 +51,7 @@ export class ChargesTabComponent implements OnInit {
    */
   constructor(private loansService: LoansService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -111,7 +111,7 @@ export class ChargesTabComponent implements OnInit {
         const dateFormat = this.settingsService.dateFormat;
         const dataObject = {
           ...response.data.value,
-          dueDate: this.datePipe.transform(response.data.value.dueDate, dateFormat),
+          dueDate: this.dateUtils.formatDate(response.data.value.dueDate, dateFormat),
           dateFormat,
           locale
         };

src/app/loans/loans-view/datatable-tab/multi-row/multi-row.component.ts

@@ -3,7 +3,6 @@ import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -19,6 +18,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 
 /** Custom Services */
 import { LoansService } from '../../../loans.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Loan Multi Row Data Tables
@@ -50,13 +50,13 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches loan Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {LoansService} loansService Loans Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private loansService: LoansService,
               private dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -151,7 +151,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.loansService.addLoanDatatableEntry(this.loanId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/loans/loans-view/datatable-tab/single-row/single-row.component.ts

@@ -2,7 +2,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -18,6 +17,7 @@ import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-ba
 
 /** Custom Services */
 import { LoansService } from '../../../loans.service';
+import { Dates } from 'app/core/utils/dates';
 
 
 @Component({
@@ -38,13 +38,13 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches loan Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {LoansService} loansService Loans Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private dialog: MatDialog,
               private loansService: LoansService,
               private settingsService: SettingsService) {
@@ -79,7 +79,7 @@ export class SingleRowComponent implements OnInit {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.loansService.addLoanDatatableEntry(this.loanId, this.datatableName, dataTableEntryObject).subscribe(() => {
@@ -114,7 +114,7 @@ export class SingleRowComponent implements OnInit {
     editDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.loansService.editLoanDatatableEntry(this.loanId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/loans/loans-view/loan-account-actions/approve-loan/approve-loan.component.ts

@@ -33,7 +33,7 @@ export class ApproveLoanComponent implements OnInit {
    * Retrieve data from `Resolver`.
    * @param formBuilder Form Builder.
    * @param route Activated Route.
-   * @param datePipe Date Utils.
+   * @param dateUtils Date Utils.
    * @param loanService Loan Service.
    * @param router Router.
    * @param {SettingsService} settingsService Settings Service

src/app/loans/loans-view/loan-account-actions/view-guarantors/view-guarantors.component.ts

@@ -6,7 +6,6 @@ import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
-import { DatePipe } from '@angular/common';
 
 /** Dialog Components */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';

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

@@ -2,12 +2,12 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
 import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Dialogs */
 
@@ -31,12 +31,12 @@ export class ViewTransactionComponent {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
-   * @param {DatePipe} datePipe DatePipe.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private loansService: LoansService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -58,7 +58,7 @@ export class ViewTransactionComponent {
         const locale = this.settingsService.language.code;
         const dateFormat = this.settingsService.dateFormat;
         const data = {
-          transactionDate: this.datePipe.transform(this.transactionData.date && new Date(this.transactionData.date), dateFormat),
+          transactionDate: this.dateUtils.formatDate(this.transactionData.date && new Date(this.transactionData.date), dateFormat),
           transactionAmount: 0,
           dateFormat,
           locale

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

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
@@ -17,6 +16,7 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * View Charge Component.
@@ -39,12 +39,12 @@ export class ViewChargeComponent {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
-   * @param {DatePipe} datePipe DatePipe.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private loansService: LoansService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -86,7 +86,7 @@ export class ViewChargeComponent {
         const dateFormat = this.settingsService.dateFormat;
         const dataObject = {
           ...response.data.value,
-          dueDate: this.datePipe.transform(response.data.value.dueDate, dateFormat),
+          dueDate: this.dateUtils.formatDate(response.data.value.dueDate, dateFormat),
           dateFormat,
           locale
         };

src/app/loans/loans.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 import { DirectivesModule } from '../directives/directives.module';
 
 /** Custom Modules */
@@ -129,6 +128,6 @@ import { LoanAccountLoadDocumentsDialogComponent } from './custom-dialog/loan-ac
     ViewRecieptComponent,
     ExportTransactionsComponent
   ],
-  providers: [DatePipe],
+  providers: [ ],
 })
 export class LoansModule {}

src/app/organization/offices/view-office/datatable-tabs/multi-row/multi-row.component.ts

@@ -3,7 +3,6 @@ import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -19,6 +18,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 /** Custom Services */
 import { OrganizationService } from '../../../../organization.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Office Multi Row Data Tables
@@ -50,13 +50,13 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches office Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {OrganizationService} organizationService Organization Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private organizationService: OrganizationService,
               private settingsService: SettingsService,
               private dialog: MatDialog) {
@@ -151,7 +151,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.organizationService.addOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/organization/offices/view-office/datatable-tabs/single-row/single-row.component.ts

@@ -2,7 +2,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -18,6 +17,7 @@ import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-ba
 /** Custom Services */
 import { OrganizationService } from '../../../../organization.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Offices Single Row Data Tables
@@ -40,13 +40,13 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches office Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {OrganizationService} organizationService Organization Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private dialog: MatDialog,
               private organizationService: OrganizationService,
               private settingsService: SettingsService ) {
@@ -81,7 +81,7 @@ export class SingleRowComponent implements OnInit {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.organizationService.addOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {
@@ -116,7 +116,7 @@ export class SingleRowComponent implements OnInit {
     editDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.organizationService.editOfficeDatatableEntry(this.officeId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/organization/sms-campaigns/create-campaign/create-campaign.component.ts

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { SmsCampaignStepComponent } from '../sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component';
@@ -10,6 +9,7 @@ import { CampaignMessageStepComponent } from '../sms-campaign-stepper/campaign-m
 /** Custom Services */
 import { OrganizationService } from 'app/organization/organization.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create SMS Campaign Component
@@ -37,13 +37,13 @@ export class CreateCampaignComponent {
    * @param {Router} router Router
    * @param {OrganizationService} organizationService Organization Service
    * @param {SettingsService} settingsService Settings Service
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
               private organizationService: OrganizationService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe) {
+              private dateUtils: Dates) {
     this.route.data.subscribe((data: { smsCampaignTemplate: any }) => {
       this.smsCampaignTemplate = data.smsCampaignTemplate;
     });
@@ -85,14 +85,14 @@ export class CreateCampaignComponent {
     const smsCampaign = {
       ...this.smsCampaign,
       campaignType: this.smsCampaign.isNotification ? 2 : 1,
-      submittedOnDate: this.datePipe.transform(new Date(), dateFormat),
+      submittedOnDate: this.dateUtils.formatDate(new Date(), dateFormat),
       dateTimeFormat,
       dateFormat,
       locale
     };
     if (this.smsCampaign.triggerType === 2) {
       const prevRecurrenceDate: Date = smsCampaign.recurrenceStartDate;
-      smsCampaign.recurrenceStartDate = this.datePipe.transform(prevRecurrenceDate, dateTimeFormat);
+      smsCampaign.recurrenceStartDate = this.dateUtils.formatDate(prevRecurrenceDate, dateTimeFormat);
     }
     this.organizationService.createSmsCampaign(smsCampaign).subscribe((response: any) => {
       this.router.navigate(['../', response.resourceId], { relativeTo: this.route });

src/app/organization/sms-campaigns/edit-campaign/edit-campaign.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DatePipe } from '@angular/common';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { OrganizationService } from 'app/organization/organization.service';
@@ -34,13 +34,13 @@ export class EditCampaignComponent {
    * Fetches campaign template from `resolve`
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {OrganizationService} organizationService Organiztion Service
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private organizationService: OrganizationService,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { smsCampaign: any, smsCampaignTemplate: any }) => {
@@ -87,7 +87,7 @@ export class EditCampaignComponent {
       locale
     };
     if (this.smsCampaign.triggerType.id === 2) {
-      smsCampaign.recurrenceStartDate = this.datePipe.transform(new Date(this.smsCampaign.recurrenceStartDate), dateTimeFormat);
+      smsCampaign.recurrenceStartDate = this.dateUtils.formatDate(new Date(this.smsCampaign.recurrenceStartDate), dateTimeFormat);
     }
     this.organizationService.updateSmsCampaign(smsCampaign, this.smsCampaign.id).subscribe((response: any) => {
       this.router.navigate(['../'], { relativeTo: this.route });

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

@@ -2,7 +2,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -15,6 +14,7 @@ import { SettingsService } from 'app/settings/settings.service';
 /** Custom Components */
 import { FloatingRatePeriodDialogComponent } from '../floating-rate-period-dialog/floating-rate-period-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create Floating Rate Component.
@@ -49,7 +49,7 @@ export class CreateFloatingRateComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {ProductsService} productsService Product Service.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {MatDialog} dialog Dialog reference.
    * @param {SettingsService} settingsService Settings Service.
    */
@@ -57,7 +57,7 @@ export class CreateFloatingRateComponent implements OnInit {
               private formBuilder: FormBuilder,
               private productsService: ProductsService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private dialog: MatDialog,
               private settingsService: SettingsService) { }
 
@@ -111,7 +111,7 @@ export class CreateFloatingRateComponent implements OnInit {
     floatingRatePeriodDialogRef.afterClosed().subscribe((response: any) => {
       if (response) {
         this.floatingRatePeriodsData.push({
-          fromDate: this.datePipe.transform(response.fromDate, this.dateFormat),
+          fromDate: this.dateUtils.formatDate(response.fromDate, this.dateFormat),
           interestRate: response.interestRate,
           isDifferentialToBaseLendingRate: response.isDifferentialToBaseLendingRate,
           locale: this.settingsService.language.code,
@@ -137,7 +137,7 @@ export class CreateFloatingRateComponent implements OnInit {
     editFloatingRatePeriodDialogRef.afterClosed().subscribe((response: any) => {
       if (response) {
         this.floatingRatePeriodsData[this.floatingRatePeriodsData.indexOf(ratePeriod)] = {
-          fromDate: this.datePipe.transform(response.fromDate, this.dateFormat),
+          fromDate: this.dateUtils.formatDate(response.fromDate, this.dateFormat),
           interestRate: response.interestRate,
           isDifferentialToBaseLendingRate: response.isDifferentialToBaseLendingRate,
           locale: this.settingsService.language.code,

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

@@ -2,7 +2,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -15,6 +14,7 @@ import { SettingsService } from 'app/settings/settings.service';
 /** Custom Components */
 import { FloatingRatePeriodDialogComponent } from '../floating-rate-period-dialog/floating-rate-period-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Floating Rate Component.
@@ -54,7 +54,7 @@ export class EditFloatingRateComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {ProductsService} productsService Product Service.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {MatDialog} dialog Dialog reference.
    * @param {SettingsService} settingsService Settings Service.
    */
@@ -62,7 +62,7 @@ export class EditFloatingRateComponent implements OnInit {
               private formBuilder: FormBuilder,
               private productsService: ProductsService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private dialog: MatDialog,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { floatingRate: any }) => {
@@ -109,7 +109,7 @@ export class EditFloatingRateComponent implements OnInit {
     floatingRatePeriodDialogRef.afterClosed().subscribe((response: any) => {
       if (response) {
         this.floatingRatePeriodsData.push({
-          fromDate: this.datePipe.transform(response.fromDate, this.dateFormat),
+          fromDate: this.dateUtils.formatDate(response.fromDate, this.dateFormat),
           interestRate: response.interestRate,
           isDifferentialToBaseLendingRate: response.isDifferentialToBaseLendingRate,
           locale: this.settingsService.language.code,
@@ -136,7 +136,7 @@ export class EditFloatingRateComponent implements OnInit {
     editFloatingRatePeriodDialogRef.afterClosed().subscribe((response: any) => {
       if (response) {
         this.floatingRatePeriodsData[this.floatingRatePeriodsData.indexOf(ratePeriod)] = {
-          fromDate: this.datePipe.transform(response.fromDate, this.dateFormat),
+          fromDate: this.dateUtils.formatDate(response.fromDate, this.dateFormat),
           interestRate: response.interestRate,
           isDifferentialToBaseLendingRate: response.isDifferentialToBaseLendingRate,
           locale: this.settingsService.language.code,
@@ -179,7 +179,7 @@ export class EditFloatingRateComponent implements OnInit {
       floatingRatePeriod.isActive = undefined;
       floatingRatePeriod.locale = this.settingsService.language.code;
       floatingRatePeriod.dateFormat = this.dateFormat;
-      floatingRatePeriod.fromDate = this.datePipe.transform(floatingRatePeriod.fromDate, this.dateFormat);
+      floatingRatePeriod.fromDate = this.dateUtils.formatDate(floatingRatePeriod.fromDate, this.dateFormat);
     });
     this.floatingRateForm.value.ratePeriods = this.floatingRatePeriodsData.length > 0 ? this.floatingRatePeriodsData : undefined;
     this.productsService.updateFloatingRate(this.route.snapshot.paramMap.get('id'), this.floatingRateForm.value)

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

@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl, FormArray } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
@@ -15,6 +14,7 @@ import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create Tax Group component.
@@ -48,7 +48,7 @@ export class CreateTaxGroupComponent implements OnInit {
    * @param {ProductsService} productsService Products Service.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
-   * @param {DatePipe} datePipe Date Utils to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    * @param {MatDialog} dialog Dialog reference.
    * @param {SettingsService} settingsService Settings Service.
    */
@@ -56,7 +56,7 @@ export class CreateTaxGroupComponent implements OnInit {
               private productsService: ProductsService,
               private route: ActivatedRoute,
               private router: Router,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { taxGroupTemplate: any }) => {
@@ -176,7 +176,7 @@ export class CreateTaxGroupComponent implements OnInit {
       locale
     };
     for (const taxComponent of taxGroup.taxComponents) {
-      taxComponent.startDate = this.datePipe.transform(taxComponent.startDate, dateFormat) || '';
+      taxComponent.startDate = this.dateUtils.formatDate(taxComponent.startDate, dateFormat) || '';
     }
     this.productsService.createTaxGroup(taxGroup).subscribe((response: any) => {
       this.router.navigate(['../', response.resourceId], { relativeTo: this.route });

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

@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl, FormArray } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Services */
@@ -15,6 +14,7 @@ import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Tax Group component.
@@ -48,7 +48,7 @@ export class EditTaxGroupComponent implements OnInit {
    * @param {ProductsService} productsService Products Service.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
-   * @param {DatePipe} datePipe Date Utils to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    * @param {MatDialog} dialog Dialog reference.
    * @param {SettingsService} settingsService Settings Service.
    */
@@ -56,7 +56,7 @@ export class EditTaxGroupComponent implements OnInit {
               private productsService: ProductsService,
               private route: ActivatedRoute,
               private router: Router,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { taxGroup: any }) => {
@@ -206,10 +206,10 @@ export class EditTaxGroupComponent implements OnInit {
       locale
     };
     for (const taxComponent of taxGroup.taxComponents) {
-      taxComponent.startDate = this.datePipe.transform(taxComponent.startDate, dateFormat) || '';
+      taxComponent.startDate = this.dateUtils.formatDate(taxComponent.startDate, dateFormat) || '';
       if (taxComponent.endDate) {
         delete taxComponent.startDate;
-        taxComponent.endDate = this.datePipe.transform(taxComponent.endDate, dateFormat) || '';
+        taxComponent.endDate = this.dateUtils.formatDate(taxComponent.endDate, dateFormat) || '';
       }
       delete taxComponent.isNew;
     }

src/app/products/products.module.ts

@@ -1,10 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe, CommonModule } from '@angular/common';
-import { MatOptionModule } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 /** Custom Modules */
 import { SharedModule } from '../shared/shared.module';
@@ -200,6 +195,6 @@ import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-
     CreateChargeComponent,
     EditFixedDepositProductComponent
   ],
-  providers: [DatePipe]
+  providers: [ ]
 })
 export class ProductsModule { }

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

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { Component, OnInit, Input } from '@angular/core';
-import { DatePipe } from '@angular/common';
 import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -13,6 +12,7 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-share-product-market-price-step',
@@ -30,14 +30,13 @@ export class ShareProductMarketPriceStepComponent implements OnInit {
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
-   * @param {DatePipe} datePipe Date Utils to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
-   * @param {DatePipe} datePipe Date Utils to format date.
    * @param {SettingsService} settingsService Settings Service
    */
 
   constructor(private formBuilder: FormBuilder,
               public dialog: MatDialog,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private settingsService: SettingsService) {
     this.createShareProductMarketPriceForm();
   }
@@ -132,7 +131,7 @@ export class ShareProductMarketPriceStepComponent implements OnInit {
     for (const marketPricePeriod of this.marketPricePeriods.value) {
       marketPricePeriods.push({
         ...marketPricePeriod,
-        fromDate: this.datePipe.transform(marketPricePeriod.fromDate, dateFormat),
+        fromDate: this.dateUtils.formatDate(marketPricePeriod.fromDate, dateFormat),
         dateFormat,
         locale
       });

src/app/savings/create-savings-account/create-savings-account.component.ts

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { SavingsAccountDetailsStepComponent } from '../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
@@ -11,6 +10,7 @@ import { SavingsAccountChargesStepComponent } from '../savings-account-stepper/s
 /** Custom Services */
 import { SavingsService } from '../savings.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create Savings Account Component
@@ -38,13 +38,13 @@ export class CreateSavingsAccountComponent {
    * Fetches savings account template from `resolve`
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {SavingsService} savingsService Savings Service
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private savingsService: SavingsService,
               private settingsService: SettingsService
               ) {
@@ -113,7 +113,7 @@ export class CreateSavingsAccountComponent {
         feeOnMonthDay: charge.feeOnMonthDay,
         feeInterval: charge.feeInterval
       })),
-      submittedOnDate: this.datePipe.transform(this.savingsAccount.submittedOnDate, dateFormat),
+      submittedOnDate: this.dateUtils.formatDate(this.savingsAccount.submittedOnDate, dateFormat),
       dateFormat,
       monthDayFormat,
       locale

src/app/savings/edit-savings-account/edit-savings-account.component.ts

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { SavingsAccountDetailsStepComponent } from '../savings-account-stepper/savings-account-details-step/savings-account-details-step.component';
@@ -11,6 +10,7 @@ import { SavingsAccountChargesStepComponent } from '../savings-account-stepper/s
 /** Custom Services */
 import { SavingsService } from '../savings.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Savings Account Component
@@ -38,13 +38,13 @@ export class EditSavingsAccountComponent {
    * Fetches savings account template from `resolve`
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {SavingsService} savingsService Savings Service
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private savingsService: SavingsService,
               private settingsService: SettingsService
               ) {
@@ -114,11 +114,11 @@ export class EditSavingsAccountComponent {
       charges: this.savingsAccount.charges.map((charge: any) => ({
         chargeId: charge.id,
         amount: charge.amount,
-        dueDate: this.datePipe.transform(charge.dueDate, dateFormat),
+        dueDate: this.dateUtils.formatDate(charge.dueDate, dateFormat),
-        feeOnMonthDay: this.datePipe.transform(charge.feeOnMonthDay, dateFormat),
+        feeOnMonthDay: this.dateUtils.formatDate(charge.feeOnMonthDay, dateFormat),
         feeInterval: charge.feeInterval
       })),
-      submittedOnDate: this.datePipe.transform(this.savingsAccount.submittedOnDate, dateFormat),
+      submittedOnDate: this.dateUtils.formatDate(this.savingsAccount.submittedOnDate, dateFormat),
       dateFormat,
       monthDayFormat,
       locale

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

@@ -2,7 +2,6 @@
 import { Component, OnInit, OnChanges, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -11,6 +10,7 @@ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.componen
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Savings Account Charges Step
@@ -44,7 +44,7 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
    * @param {MatDialog} dialog Mat Dialog
    */
   constructor(public dialog: MatDialog,
-              private datePipe: DatePipe) {}
+              private dateUtils: Dates) {}
 
    ngOnInit() {
     this.currencyCode.valueChanges.subscribe(() => {
@@ -127,7 +127,7 @@ export class SavingsAccountChargesStepComponent implements OnInit, OnChanges {
       if (response.data) {
         let newCharge: any;
         const dateFormat = 'dd MMMM yyyy';
-        const date = this.datePipe.transform(response.data.value.date, dateFormat);
+        const date = this.dateUtils.formatDate(response.data.value.date, dateFormat);
         switch (charge.chargeTimeType.value) {
           case 'Specified due date':
           case 'Weekly Fee':

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

@@ -3,7 +3,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
@@ -19,6 +18,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Charges Tab Component
@@ -62,12 +62,12 @@ export class ChargesTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
-   * @param {DatePipe} datePipe DatePipe.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private savingsService: SavingsService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -131,7 +131,7 @@ export class ChargesTabComponent implements OnInit {
         const dateFormat = this.settingsService.dateFormat;
         const dataObject = {
           ...response.data.value,
-          dueDate: this.datePipe.transform(response.data.value.dueDate, dateFormat),
+          dueDate: this.dateUtils.formatDate(response.data.value.dueDate, dateFormat),
           dateFormat,
           locale
         };

src/app/savings/savings-account-view/datatable-tabs/multi-row/multi-row.component.ts

@@ -3,7 +3,6 @@ import { Component, OnChanges, OnInit, Input, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Dialogs */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -19,6 +18,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 
 /** Custom Services */
 import { SavingsService } from '../../../savings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Savings Account Multi Row Data Tables
@@ -50,13 +50,13 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private savingsService: SavingsService,
               private dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -151,7 +151,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.addSavingsDatatableEntry(this.savingAccountId, this.datatableName, dataTableEntryObject).subscribe(() => {

src/app/savings/savings-account-view/datatable-tabs/single-row/single-row.component.ts

@@ -2,7 +2,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
@@ -18,6 +17,7 @@ import { CheckboxBase } from 'app/shared/form-dialog/formfield/model/checkbox-ba
 
 /** Custom Services */
 import { SavingsService } from '../../../savings.service';
+import { Dates } from 'app/core/utils/dates';
 
 
 /**
@@ -41,13 +41,13 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private dialog: MatDialog,
               private savingsService: SavingsService,
               private settingsService: SettingsService) {
@@ -82,7 +82,7 @@ export class SingleRowComponent implements OnInit {
     addDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.addSavingsDatatableEntry(this.savingAccountId, this.datatableName, dataTableEntryObject).subscribe(() => {
@@ -117,7 +117,7 @@ export class SingleRowComponent implements OnInit {
     editDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         dateTransformColumns.forEach((column) => {
-          response.data.value[column] = this.datePipe.transform(response.data.value[column], dataTableEntryObject.dateFormat);
+          response.data.value[column] = this.dateUtils.formatDate(response.data.value[column], dataTableEntryObject.dateFormat);
         });
         dataTableEntryObject = { ...response.data.value, ...dataTableEntryObject };
         this.savingsService.editSavingsDatatableEntry(this.savingAccountId, this.datatableName, dataTableEntryObject).subscribe(() => {

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

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
@@ -10,6 +9,7 @@ import { SettingsService } from 'app/settings/settings.service';
 
 /** Custom Dialogs */
 import { UndoTransactionDialogComponent } from '../../custom-dialogs/undo-transaction-dialog/undo-transaction-dialog.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * View Transaction Component.
@@ -31,12 +31,12 @@ export class ViewTransactionComponent {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
-   * @param {DatePipe} datePipe DatePipe.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private savingsService: SavingsService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -56,7 +56,7 @@ export class ViewTransactionComponent {
         const locale = this.settingsService.language.code;
         const dateFormat = this.settingsService.dateFormat;
         const data = {
-          transactionDate: this.datePipe.transform(this.transactionData.date && new Date(this.transactionData.date), dateFormat),
+          transactionDate: this.dateUtils.formatDate(this.transactionData.date && new Date(this.transactionData.date), dateFormat),
           transactionAmount: 0,
           dateFormat,
           locale

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

@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
@@ -18,6 +17,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
 import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * View Charge Component.
@@ -40,12 +40,12 @@ export class ViewChargeComponent {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
-   * @param {DatePipe} datePipe DatePipe.
+   * @param {Dates} dateUtils Date Utils.
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private savingsService: SavingsService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               public dialog: MatDialog,
               private settingsService: SettingsService) {
@@ -89,7 +89,7 @@ export class ViewChargeComponent {
         const dateFormat = this.settingsService.dateFormat;
         const dataObject = {
           ...response.data.value,
-          dueDate: this.datePipe.transform(response.data.value.dueDate, dateFormat),
+          dueDate: this.dateUtils.formatDate(response.data.value.dueDate, dateFormat),
           dateFormat,
           locale
         };

src/app/savings/savings.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { SavingsRoutingModule } from './savings-routing.module';
@@ -99,6 +98,6 @@ import { ApplyAnnualFeesSavingsAccountComponent } from './saving-account-actions
     EditTransactionComponent,
     ApplyAnnualFeesSavingsAccountComponent
   ],
-  providers: [DatePipe]
+  providers: [ ]
 })
 export class SavingsModule {}

src/app/shares/create-shares-account/create-shares-account.component.ts

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { SharesAccountDetailsStepComponent } from '../shares-account-stepper/shares-account-details-step/shares-account-details-step.component';
@@ -11,6 +10,7 @@ import { SharesAccountChargesStepComponent } from '../shares-account-stepper/sha
 /** Custom Services */
 import { SharesService } from '../shares.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create Shares Account Component
@@ -38,13 +38,13 @@ export class CreateSharesAccountComponent {
    * Fetches shares account template from `resolve`
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {SharesService} sharesService Shares Service
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private sharesService: SharesService,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { sharesAccountTemplate: any }) => {
@@ -106,8 +106,8 @@ export class CreateSharesAccountComponent {
       ...this.sharesAccount,
       clientId: this.sharesAccountTemplate.clientId,
       charges: this.sharesAccount.charges.map((charge: any) => ({ chargeId: charge.chargeId, amount: charge.amount })),
-      applicationDate: this.datePipe.transform(this.sharesAccount.applicationDate, dateFormat),
+      applicationDate: this.dateUtils.formatDate(this.sharesAccount.applicationDate, dateFormat),
-      submittedDate: this.datePipe.transform(this.sharesAccount.submittedDate, dateFormat),
+      submittedDate: this.dateUtils.formatDate(this.sharesAccount.submittedDate, dateFormat),
       unitPrice: this.sharesAccountTermsForm.get('unitPrice').value,
       dateFormat,
       locale

src/app/shares/edit-shares-account/edit-shares-account.component.ts

@@ -1,7 +1,6 @@
 /** Angular Imports */
 import { Component, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Components */
 import { SharesAccountDetailsStepComponent } from '../shares-account-stepper/shares-account-details-step/shares-account-details-step.component';
@@ -11,6 +10,7 @@ import { SharesAccountChargesStepComponent } from '../shares-account-stepper/sha
 /** Custom Services */
 import { SharesService } from '../shares.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Shares Account Component
@@ -38,13 +38,13 @@ export class EditSharesAccountComponent {
    * Fetches shares account template from `resolve`
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Utils
+   * @param {Dates} dateUtils Date Utils
    * @param {SharesService} sharesService Shares Service
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private sharesService: SharesService,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { sharesAccountAndTemplate: any }) => {
@@ -111,8 +111,8 @@ export class EditSharesAccountComponent {
       ...this.sharesAccount,
       clientId: this.sharesAccountAndTemplate.clientId,
       charges: this.sharesAccount.charges.map((charge: any) => ({ chargeId: charge.chargeId, amount: charge.amount })),
-      applicationDate: this.datePipe.transform(this.sharesAccount.applicationDate, dateFormat),
+      applicationDate: this.dateUtils.formatDate(this.sharesAccount.applicationDate, dateFormat),
-      submittedDate: this.datePipe.transform(this.sharesAccount.submittedDate, dateFormat),
+      submittedDate: this.dateUtils.formatDate(this.sharesAccount.submittedDate, dateFormat),
       unitPrice: this.sharesAccountTermsForm.get('unitPrice').value,
       dateFormat,
       locale

src/app/shares/shares.module.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { SharesRoutingModule } from './shares-routing.module';
@@ -66,6 +65,6 @@ import { RejectShareDialogComponent } from './shares-account-actions/reject-shar
     RejectSharesComponent,
     RejectShareDialogComponent
   ],
-  providers: [DatePipe]
+  providers: [ ]
 })
 export class SharesModule { }

src/app/system/codes/codes.component.ts

@@ -46,7 +46,6 @@ export class CodesComponent implements OnInit {
    */
   setCodes() {
     this.dataSource = new MatTableDataSource(this.codesData);
-    console.log(this.codesData);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
   }

src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.ts

@@ -5,7 +5,6 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { SystemService } from 'app/system/system.service';
@@ -18,6 +17,7 @@ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-
 import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Entity to Entity Mapping Component
@@ -82,7 +82,7 @@ export class EntityToEntityMappingComponent implements OnInit {
   constructor(private route: ActivatedRoute,
     private formBuilder: FormBuilder,
     private systemService: SystemService,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private dialog: MatDialog,
     private settingsService: SettingsService) {
     this.route.data.subscribe((data: { entityMappings: any }) => {
@@ -320,11 +320,10 @@ export class EntityToEntityMappingComponent implements OnInit {
     const startDate: Date = addMappingForm.value.startDate;
     const endDate: Date = addMappingForm.value.endDate;
 
-    addMappingForm.patchValue({
-      startDate: this.datePipe.transform(startDate, dateFormat),
-      endDate: this.datePipe.transform(endDate, dateFormat)
-    });
     const newMappingData = addMappingForm.value;
+    newMappingData.startDate = this.dateUtils.formatDate(startDate, dateFormat);
+    newMappingData.endDate = this.dateUtils.formatDate(endDate, dateFormat);
+
     newMappingData.dateFormat = dateFormat;
     newMappingData.locale = this.settingsService.language.code;
     this.systemService.createMapping(this.relId, newMappingData).subscribe((response: any) => {
@@ -342,11 +341,10 @@ export class EntityToEntityMappingComponent implements OnInit {
     const startDate: Date = editMappingForm.value.startDate;
     const endDate: Date = editMappingForm.value.endDate;
 
-    editMappingForm.patchValue({
-      startDate: this.datePipe.transform(startDate, dateFormat),
-      endDate: this.datePipe.transform(endDate, dateFormat)
-    });
     const newMappingData = editMappingForm.value;
+    newMappingData.startDate = this.dateUtils.formatDate(startDate, dateFormat);
+    newMappingData.endDate = this.dateUtils.formatDate(endDate, dateFormat);
+
     newMappingData.dateFormat = dateFormat;
     newMappingData.locale = this.settingsService.language.code;
     this.systemService.editMapping(this.mapIdToEdit, newMappingData).subscribe((response: any) => {

src/app/tasks/checker-inbox-and-tasks-tabs/client-approval/client-approval.component.ts

@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as _ from 'lodash';
-import { DatePipe } from '@angular/common';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -15,6 +14,7 @@ import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicke
 /** Custom Services */
 import { TasksService } from '../../tasks.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-client-approval',
@@ -40,14 +40,14 @@ export class ClientApprovalComponent {
    * Retrieves the grouped client data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Dialog} dialog MatDialog.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {router} router Router.
    * @param {SettingsService} settingsService Settings Service.
    * @param {TasksService} tasksService Tasks Service.
    */
   constructor(private route: ActivatedRoute,
     private dialog: MatDialog,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private router: Router,
     private settingsService: SettingsService,
     private tasksService: TasksService) {
@@ -111,7 +111,7 @@ export class ClientApprovalComponent {
 
   bulkClientApproval(submittedData: any) {
     const dateFormat = this.settingsService.dateFormat;
-    const activationDate = this.datePipe.transform(submittedData.value.actDate, dateFormat);
+    const activationDate = this.dateUtils.formatDate(submittedData.value.actDate, dateFormat);
     const locale = this.settingsService.language.code;
     const formData = {
       dateFormat,

src/app/tasks/checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component.ts

@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as _ from 'lodash';
-import { DatePipe } from '@angular/common';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -13,6 +12,7 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 /** Custom Services */
 import { TasksService } from '../../tasks.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-loan-approval',
@@ -44,14 +44,14 @@ export class LoanApprovalComponent {
    * Retrieves the offices and loans data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Dialog} dialog MatDialog.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {router} router Router.
    * @param {SettingsService} settingsService Settings Service.
    * @param {TasksService} tasksService Tasks Service.
    */
   constructor(private route: ActivatedRoute,
     private dialog: MatDialog,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private router: Router,
     private settingsService: SettingsService,
     private tasksService: TasksService) {
@@ -132,7 +132,7 @@ export class LoanApprovalComponent {
 
   bulkLoanApproval() {
     const dateFormat = this.settingsService.dateFormat;
-    const approvedOnDate = this.datePipe.transform(new Date(), dateFormat);
+    const approvedOnDate = this.dateUtils.formatDate(new Date(), dateFormat);
     const locale = this.settingsService.language.code;
     const formData = {
       dateFormat,

src/app/tasks/checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component.ts

@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SelectionModel } from '@angular/cdk/collections';
-import { DatePipe } from '@angular/common';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -12,6 +11,7 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 /** Custom Services */
 import { TasksService } from '../../tasks.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-loan-disbursal',
@@ -35,14 +35,14 @@ export class LoanDisbursalComponent {
    * Retrieves the loans data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Dialog} dialog MatDialog.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {router} router Router.
    * @param {SettingsService} settingsService Settings Service.
    * @param {TasksService} tasksService Tasks Service.
    */
   constructor(private route: ActivatedRoute,
     private dialog: MatDialog,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private settingsService: SettingsService,
     private tasksService: TasksService) {
     this.route.data.subscribe((data: { loansData: any }) => {
@@ -90,7 +90,7 @@ export class LoanDisbursalComponent {
 
   bulkLoanDisbursal() {
     const dateFormat = this.settingsService.dateFormat;
-    const approvedOnDate = this.datePipe.transform(new Date(), dateFormat);
+    const approvedOnDate = this.dateUtils.formatDate(new Date(), dateFormat);
     const locale = this.settingsService.language.code;
     const formData = {
       dateFormat,

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

@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SelectionModel } from '@angular/cdk/collections';
-import { DatePipe } from '@angular/common';
 import * as _ from 'lodash';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
@@ -13,6 +12,7 @@ import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/conf
 /** Custom Services */
 import { TasksService } from '../../tasks.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 @Component({
   selector: 'mifosx-reschedule-loan',
@@ -36,14 +36,14 @@ export class RescheduleLoanComponent implements OnInit {
    * Retrieves the reschedule loan data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Dialog} dialog MatDialog.
-   * @param {DatePipe} datePipe Date Utils.
+   * @param {Dates} dateUtils Date Utils.
    * @param {router} router Router.
    * @param {SettingsService} settingsService Settings Service.
    * @param {TasksService} tasksService Tasks Service.
    */
   constructor(private route: ActivatedRoute,
     private dialog: MatDialog,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private router: Router,
     private settingsService: SettingsService,
     private tasksService: TasksService) {
@@ -92,7 +92,7 @@ export class RescheduleLoanComponent implements OnInit {
 
   bulkLoanRescheduleApproval() {
     const dateFormat = this.settingsService.dateFormat;
-    const approvedOnDate = this.datePipe.transform(new Date(), dateFormat);
+    const approvedOnDate = this.dateUtils.formatDate(new Date(), dateFormat);
     const locale = this.settingsService.language.code;
     const formData = {
       dateFormat,

src/app/tasks/tasks.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { DatePipe } from '@angular/common';
 
 /** Custom Modules */
 import { SharedModule } from 'app/shared/shared.module';
@@ -35,6 +34,6 @@ import { ViewCheckerInboxComponent } from './view-checker-inbox/view-checker-inb
     RescheduleLoanComponent,
     ViewCheckerInboxComponent
   ],
-  providers: [DatePipe]
+  providers: [ ]
 })
 export class TasksModule { }