Format date fields without patch form

src/app/account-transfers/create-standing-instructions/create-standing-instructions.component.ts

@@ -2,11 +2,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create Standing Instructions
@@ -70,14 +70,14 @@ export class CreateStandingInstructionsComponent implements OnInit {
    * @param {Router} router Router
    * @param {AccountTransfersService} accountTransfersService Account Transfers Service
    * @param {SettingsService} settingsService Settings Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    */
   constructor(private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private accountTransfersService: AccountTransfersService,
     private settingsService: SettingsService,
-    private datePipe: DatePipe) {
+    private dateUtils: Dates) {
     this.route.data.subscribe((data: { standingIntructionsTemplate: any }) => {
       this.standingIntructionsTemplate = data.standingIntructionsTemplate;
       this.setParams();
@@ -221,9 +221,9 @@ export class CreateStandingInstructionsComponent implements OnInit {
       monthDayFormat: 'dd MMMM',
       fromClientId: this.clientId,
       fromOfficeId: this.officeId,
-      validFrom: this.datePipe.transform(this.createStandingInstructionsForm.value.validFrom, dateFormat),
+      validFrom: this.dateUtils.formatDate(this.createStandingInstructionsForm.value.validFrom, dateFormat),
-      validTill: this.datePipe.transform(this.createStandingInstructionsForm.value.validTill, dateFormat),
+      validTill: this.dateUtils.formatDate(this.createStandingInstructionsForm.value.validTill, dateFormat),
-      recurrenceOnMonthDay: this.datePipe.transform(this.createStandingInstructionsForm.value.recurrenceOnMonthDay, 'dd MMMM'),
+      recurrenceOnMonthDay: this.dateUtils.formatDate(this.createStandingInstructionsForm.value.recurrenceOnMonthDay, 'dd MMMM'),
     };
     delete standingInstructionData['destination'];
     delete standingInstructionData['applicant'];

src/app/account-transfers/edit-standing-instructions/edit-standing-instructions.component.ts

@@ -2,11 +2,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Standing Instructions
@@ -48,14 +48,14 @@ export class EditStandingInstructionsComponent implements OnInit {
    * @param {Router} router Router
    * @param {AccountTransfersService} accountTransfersService Account Transfers Service
    * @param {SettingsService} settingsService Settings Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    */
   constructor(private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private accountTransfersService: AccountTransfersService,
     private settingsService: SettingsService,
-    private datePipe: DatePipe) {
+    private dateUtils: Dates) {
     this.route.data.subscribe((data: { standingInstructionsDataAndTemplate: any }) => {
       this.standingInstructionsData = data.standingInstructionsDataAndTemplate;
       this.standingInstructionsId = data.standingInstructionsDataAndTemplate.id;
@@ -151,11 +151,11 @@ export class EditStandingInstructionsComponent implements OnInit {
       priority: this.editStandingInstructionsForm.value.priority,
       recurrenceFrequency:	this.editStandingInstructionsForm.value.recurrenceFrequency,
       recurrenceInterval:	this.editStandingInstructionsForm.value.recurrenceInterval,
-      recurrenceOnMonthDay: this.datePipe.transform(this.editStandingInstructionsForm.value.recurrenceOnMonthDay, 'dd MMMM'),
+      recurrenceOnMonthDay: this.dateUtils.formatDate(this.editStandingInstructionsForm.value.recurrenceOnMonthDay, 'dd MMMM'),
       recurrenceType:	this.editStandingInstructionsForm.value.recurrenceType,
       status:	this.editStandingInstructionsForm.value.status,
-      validFrom: this.datePipe.transform(this.editStandingInstructionsForm.value.validFrom, dateFormat),
+      validFrom: this.dateUtils.formatDate(this.editStandingInstructionsForm.value.validFrom, dateFormat),
-      validTill: this.datePipe.transform(this.editStandingInstructionsForm.value.validTill, dateFormat)
+      validTill: this.dateUtils.formatDate(this.editStandingInstructionsForm.value.validTill, dateFormat)
     };
     this.accountTransfersService.updateStandingInstructionsData(this.standingInstructionsId, standingInstructionData).subscribe((response: any) => {
       this.router.navigate(['../view'], { relativeTo: this.route });

src/app/account-transfers/make-account-transfers/make-account-transfers.component.ts

@@ -2,12 +2,12 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { AccountTransfersService } from '../account-transfers.service';
 import { SettingsService } from 'app/settings/settings.service';
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 
 
 /**
@@ -51,7 +51,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {Router} router Router
    * @param {AccountTransfersService} accountTransfersService Account Transfers Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Settings Service
    * @param {ClientsService} clientsService Clients Service
    */
@@ -59,7 +59,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
     private route: ActivatedRoute,
     private router: Router,
     private accountTransfersService: AccountTransfersService,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private settingsService: SettingsService,
     private clientsService: ClientsService) {
     this.route.data.subscribe((data: { accountTransferTemplate: any }) => {
@@ -176,7 +176,7 @@ export class MakeAccountTransfersComponent implements OnInit, AfterViewInit {
     const locale = this.settingsService.language.code;
     const makeAccountTransferData = {
       ... this.makeAccountTransferForm.value,
-      transferDate: this.datePipe.transform(this.makeAccountTransferForm.value.transferDate, dateFormat),
+      transferDate: this.dateUtils.formatDate(this.makeAccountTransferForm.value.transferDate, dateFormat),
       dateFormat,
       locale,
       toClientId: this.makeAccountTransferForm.controls.toClientId.value.id,

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -31,14 +31,14 @@ export class ActivateCenterComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {centersService} CentersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.centerId = this.route.parent.snapshot.params['centerId'];
@@ -65,15 +65,15 @@ export class ActivateCenterComponent implements OnInit {
    * if successful redirects to the center.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const activateCenterData = this.activateCenterForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevactivationDate: Date = this.activateCenterForm.value.activationDate;
-    this.activateCenterForm.patchValue({
+    if (activateCenterData.activationDate instanceof Date) {
-      activationDate: this.datePipe.transform(prevactivationDate, dateFormat),
+      activateCenterData.activationDate = this.dateUtils.formatDate(prevactivationDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.activateCenterForm.value,
+      ...activateCenterData,
       dateFormat,
       locale
     };

src/app/centers/centers-view/center-actions/attach-center-meeting/attach-center-meeting.component.ts

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -40,14 +40,14 @@ export class AttachCenterMeetingComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {CentersService} centersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { centersActionData: any }) => {
@@ -114,17 +114,17 @@ export class AttachCenterMeetingComponent implements OnInit {
    * Submits the form and attatches the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const centerMeetingFormData = this.centerMeetingForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const title = `centers_${this.centerId}_CollectionMeeting`;
     const typeId = '1';
     const prevStartDate: Date = this.centerMeetingForm.value.startDate;
-    this.centerMeetingForm.patchValue({
+    if (centerMeetingFormData.startDate instanceof Date) {
-      startDate: this.datePipe.transform(prevStartDate, dateFormat),
+      centerMeetingFormData.startDate = this.dateUtils.formatDate(prevStartDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.centerMeetingForm.value,
+      ...centerMeetingFormData,
       title,
       typeId,
       dateFormat,

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

@@ -48,7 +48,7 @@ export class CenterAttendanceComponent implements OnInit {
   /**
    * Retrieves the center members data from `resolve`.
    * @param {ActivatedRoute} route Route
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {Router} router Router
    * @param {CentersService} centersService Centers Service
    * @param {SettingsService} settingsService Settings Service.

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -33,14 +33,14 @@ export class CloseCenterComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {CentersService} centersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { centeractionData: any }) => {
@@ -67,15 +67,15 @@ export class CloseCenterComponent implements OnInit {
    * Submits the form and closes the center.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const closeCenterFormData = this.closeCenterForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevClosedDate: Date = this.closeCenterForm.value.closureDate;
-    this.closeCenterForm.patchValue({
+    if (closeCenterFormData.closureDate instanceof Date) {
-      closureDate: this.datePipe.transform(prevClosedDate, dateFormat),
+      closeCenterFormData.closureDate = this.dateUtils.formatDate(prevClosedDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.closeCenterForm.value,
+      ...closeCenterFormData,
       dateFormat,
       locale
     };

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -38,14 +38,14 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {CentersService} centersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { centersActionData: any }) => {
@@ -74,18 +74,20 @@ export class EditCenterMeetingScheduleComponent implements OnInit {
    * Submits the form and updates the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const centerEditMeetingScheduleFormData = this.centerEditMeetingScheduleForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const reschedulebasedOnMeetingDates = true;
     const prevOldDate: Date = new Date(this.centerEditMeetingScheduleForm.value.presentMeetingDate);
+    if (centerEditMeetingScheduleFormData.startDate instanceof Date) {
+      centerEditMeetingScheduleFormData.presentMeetingDate = this.dateUtils.formatDate(prevOldDate, dateFormat);
+    }
     const prevNewDate: Date = this.centerEditMeetingScheduleForm.value.newMeetingDate;
-    this.centerEditMeetingScheduleForm.patchValue({
+    if (centerEditMeetingScheduleFormData.newMeetingDate instanceof Date) {
-      'presentMeetingDate': this.datePipe.transform(prevOldDate, dateFormat),
+      centerEditMeetingScheduleFormData.newMeetingDate = this.dateUtils.formatDate(prevNewDate, dateFormat);
-      'newMeetingDate': this.datePipe.transform(prevNewDate, dateFormat)
+    }
-    });
     const data = {
-      ...this.centerEditMeetingScheduleForm.value,
+      ...centerEditMeetingScheduleFormData,
       reschedulebasedOnMeetingDates,
       dateFormat,
       locale

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { CentersService } from 'app/centers/centers.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -42,14 +42,14 @@ export class EditCenterMeetingComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {CentersService} centersService Shares Service
    * @param {SettingsService} settingsService Settings Service.
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private centersService: CentersService,
               private settingsService: SettingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { centersActionData: any }) => {
@@ -119,17 +119,17 @@ export class EditCenterMeetingComponent implements OnInit {
    * Submits the form and updates the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const centerEditMeetingFormData = this.centerEditMeetingForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const title = `centers_${this.centerId}_CollectionMeeting`;
     const typeId = '1';
     const prevStartDate: Date = this.centerEditMeetingForm.value.startDate;
-    this.centerEditMeetingForm.patchValue({
+    if (centerEditMeetingFormData.startDate instanceof Date) {
-      startDate: this.datePipe.transform(prevStartDate, dateFormat),
+      centerEditMeetingFormData.startDate = this.dateUtils.formatDate(prevStartDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.centerEditMeetingForm.value,
+      ...centerEditMeetingFormData,
       repeating: true,
       title,
       typeId,

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

@@ -50,7 +50,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches center Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {CentersService} centersService Centers Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.

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

@@ -40,7 +40,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches center Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {CentersService} centersService Centers Service.
    * @param {SettingsService} settingsService Settings Service.
    * @param {MatDialog} dialog Mat Dialog.
@@ -150,7 +150,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Maps API response to data table form fields.
    * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with date pipe.
+   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
    * @param {any} dataTableEntryObject Additional data table details.
    */
   getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {

src/app/centers/create-center/create-center.component.ts

@@ -2,12 +2,12 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { GroupsService } from 'app/groups/groups.service';
 import { CentersService } from '../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create Center component.
@@ -44,16 +44,16 @@ export class CreateCenterComponent implements OnInit {
    * @param {CentersService} centerService CentersService.
    * @param {SettingsService} settingsService Settings Service.
    * @param {GroupsService} groupService GroupsService.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    */
   constructor(private formBuilder: FormBuilder,
-              private route: ActivatedRoute,
+    private route: ActivatedRoute,
-              private router: Router,
+    private router: Router,
-              private centerService: CentersService,
+    private centerService: CentersService,
-              private settingsService: SettingsService,
+    private settingsService: SettingsService,
-              private groupService: GroupsService,
+    private groupService: GroupsService,
-              private datePipe: DatePipe) {
+    private dateUtils: Dates) {
-    this.route.data.subscribe( (data: { offices: any }) => {
+    this.route.data.subscribe((data: { offices: any }) => {
       this.officeData = data.offices;
     });
   }
@@ -85,8 +85,8 @@ export class CreateCenterComponent implements OnInit {
    * Adds form control Activation Date if active.
    */
   buildDependencies() {
-    this.centerForm.get('officeId').valueChanges.subscribe( (option: any) => {
+    this.centerForm.get('officeId').valueChanges.subscribe((option: any) => {
-      this.groupService.getGroupsByOfficeId(option).subscribe( (data: any) => {
+      this.groupService.getGroupsByOfficeId(option).subscribe((data: any) => {
         this.groupsData = data;
         if (!this.groupsData.length) {
           this.groupChoice.disable();
@@ -94,7 +94,7 @@ export class CreateCenterComponent implements OnInit {
           this.groupChoice.enable();
         }
       });
-      this.centerService.getStaff(option).subscribe( (data: any) => {
+      this.centerService.getStaff(option).subscribe((data: any) => {
         this.staffData = data['staffOptions'];
         if (this.staffData === undefined) {
           this.centerForm.controls['staffId'].disable();
@@ -103,7 +103,7 @@ export class CreateCenterComponent implements OnInit {
         }
       });
     });
-    this.centerForm.get('active').valueChanges.subscribe( (bool: boolean) => {
+    this.centerForm.get('active').valueChanges.subscribe((bool: boolean) => {
       if (bool) {
         this.centerForm.addControl('activationDate', new FormControl('', Validators.required));
       } else {
@@ -133,22 +133,27 @@ export class CreateCenterComponent implements OnInit {
    * if successful redirects to centers.
    */
   submit() {
-      const prevSubmittedOnDate: Date = this.centerForm.value.submittedOnDate;
+    const centerFormData = this.centerForm.value;
-      const prevActivationDate: Date = this.centerForm.value.activationDate;
+    const prevSubmittedOnDate: Date = this.centerForm.value.submittedOnDate;
-      // TODO: Update once language and date settings are setup
+    const prevActivationDate: Date = this.centerForm.value.activationDate;
-      const dateFormat = this.settingsService.dateFormat;
+    const locale = this.settingsService.language.code;
-      this.centerForm.patchValue({
+    const dateFormat = this.settingsService.dateFormat;
-        submittedOnDate: this.datePipe.transform(prevSubmittedOnDate, dateFormat),
+    if (centerFormData.submittedOnDate instanceof Date) {
-        activationDate: this.datePipe.transform(prevActivationDate, dateFormat)
+      centerFormData.submittedOnDate = this.dateUtils.formatDate(prevSubmittedOnDate, dateFormat);
-      });
-      const center = this.centerForm.value;
-      center.locale = this.settingsService.language.code;
-      center.dateFormat = dateFormat;
-      center.groupMembers = [];
-      this.groupMembers.forEach((group: any) => center.groupMembers.push(group.id));
-      this.centerService.createCenter(center).subscribe((response: any) => {
-        this.router.navigate(['../centers']);
-      });
     }
+    if (centerFormData.activationDate instanceof Date) {
+      centerFormData.activationDate = this.dateUtils.formatDate(prevActivationDate, dateFormat);
+    }
+    const data = {
+      ...centerFormData,
+      dateFormat,
+      locale
+    };
+    data.groupMembers = [];
+    this.groupMembers.forEach((group: any) => data.groupMembers.push(group.id));
+    this.centerService.createCenter(data).subscribe((response: any) => {
+      this.router.navigate(['../centers']);
+    });
+  }
 
 }

src/app/centers/edit-center/edit-center.component.ts

@@ -2,11 +2,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { CentersService } from '../centers.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Center component.
@@ -36,14 +36,14 @@ export class EditCenterComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {CentersService} centerService CentersService.
    * @param {GroupsService} groupService GroupsService.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    */
   constructor(private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
     private centersService: CentersService,
     private settingsService: SettingsService,
-    private datePipe: DatePipe) {
+    private dateUtils: Dates) {
     this.route.data.subscribe((data: { centerData: any }) => {
       this.centerData = data.centerData;
       this.staffs = this.centerData.staffOptions;
@@ -77,16 +77,17 @@ export class EditCenterComponent implements OnInit {
    * if successful redirects to the center.
    */
   submit() {
+    const editCenterFormData = this.editCenterForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     if (this.centerData.status.value === 'Pending') {
       const prevactivationDate: Date = this.editCenterForm.value.activationDate;
-      this.editCenterForm.patchValue({
+      if (editCenterFormData.activationDate instanceof Date) {
-        activationDate: this.datePipe.transform(prevactivationDate, dateFormat),
+        editCenterFormData.activationDate = this.dateUtils.formatDate(prevactivationDate, dateFormat);
-      });
+      }
     }
     const data = {
-      ...this.editCenterForm.value,
+      ...editCenterFormData,
       name: this.centerData.name,
       dateFormat,
       locale

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts

@@ -2,10 +2,10 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Client Family Members Dialog
@@ -28,13 +28,13 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
   /**
    * @param {MatDialogRef} dialogRef Client Family Member Dialog Reference
    * @param {FormBuilder} formBuilder Form Builder
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {any} data Dialog Data
    * @param {SettingsService} settingsService Setting service
    */
   constructor(public dialogRef: MatDialogRef<ClientFamilyMemberDialogComponent>,
               private formBuilder: FormBuilder,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               @Inject(MAT_DIALOG_DATA) public data: any,
               private settingsService: SettingsService) { }
 
@@ -80,11 +80,14 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
    * Returns Formatted Family Member
    */
   get familyMember() {
+    const familyMemberFormData = this.familyMemberForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    // TODO: Update once language and date settings are setup
+    if (familyMemberFormData.dateOfBirth instanceof Date) {
+      familyMemberFormData.dateOfBirth = this.dateUtils.formatDate(familyMemberFormData.dateOfBirth, dateFormat);
+    }
     const familyMember = {
-      ...this.familyMemberForm.value,
+      ...familyMemberFormData,
       dateFormat,
       locale
     };
@@ -93,9 +96,6 @@ export class ClientFamilyMemberDialogComponent implements OnInit {
         delete familyMember[key];
       }
     }
-    if (familyMember.dateOfBirth) {
-      familyMember.dateOfBirth = this.datePipe.transform(familyMember.dateOfBirth, dateFormat);
-    }
     return familyMember;
   }
 

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -1,7 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
@@ -47,11 +47,11 @@ export class ClientGeneralStepComponent implements OnInit {
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private settingsService: SettingsService) {
     this.setClientForm();
   }
@@ -148,26 +148,25 @@ export class ClientGeneralStepComponent implements OnInit {
     const generalDetails = this.createClientForm.value;
     const dateFormat = this.settingsService.dateFormat;
     const locale = this.settingsService.language.code;
-    // TODO: Update once language and date settings are setup
     for (const key in generalDetails) {
       if (generalDetails[key] === '' || key === 'addSavings') {
         delete generalDetails[key];
       }
     }
-    if (generalDetails.submittedOnDate) {
+    if (generalDetails.submittedOnDate instanceof Date) {
-      generalDetails.submittedOnDate = this.datePipe.transform(generalDetails.submittedOnDate, dateFormat);
+      generalDetails.submittedOnDate = this.dateUtils.formatDate(generalDetails.submittedOnDate, dateFormat);
     }
-    if (generalDetails.activationDate) {
+    if (generalDetails.activationDate instanceof Date) {
-      generalDetails.activationDate = this.datePipe.transform(generalDetails.activationDate, dateFormat);
+      generalDetails.activationDate = this.dateUtils.formatDate(generalDetails.activationDate, dateFormat);
     }
-    if (generalDetails.dateOfBirth) {
+    if (generalDetails.dateOfBirth instanceof Date) {
-      generalDetails.dateOfBirth = this.datePipe.transform(generalDetails.dateOfBirth, dateFormat);
+      generalDetails.dateOfBirth = this.dateUtils.formatDate(generalDetails.dateOfBirth, dateFormat);
     }
 
     if (generalDetails.clientNonPersonDetails && generalDetails.clientNonPersonDetails.incorpValidityTillDate) {
       generalDetails.clientNonPersonDetails = {
         ...generalDetails.clientNonPersonDetails,
-        incorpValidityTillDate: this.datePipe.transform(generalDetails.dateOfBirth, dateFormat),
+        incorpValidityTillDate: this.dateUtils.formatDate(generalDetails.dateOfBirth, dateFormat),
         dateFormat,
         locale
       };

src/app/clients/clients-view/charges/client-pay-charges/client-pay-charges.component.ts

@@ -2,10 +2,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services. */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -38,7 +38,7 @@ export class ClientPayChargesComponent implements OnInit {
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private settingsService: SettingsService
   ) {
     this.route.data.subscribe((data: { transactionData: any }) => {
@@ -64,15 +64,19 @@ export class ClientPayChargesComponent implements OnInit {
    * Submits Transaction form.
    */
   submit() {
-    const transactionDate = this.transactionForm.value.transactionDate;
+    const transactionFormData = this.transactionForm.value;
-    const dateFormat = 'yyyy-MM-dd';
+    const locale = this.settingsService.language.code;
-    this.transactionForm.patchValue({
+    const dateFormat = this.settingsService.dateFormat;
-      transactionDate: this.datePipe.transform(transactionDate, dateFormat)
+    const prevTransactionDate = this.transactionForm.value.transactionDate;
-    });
+    if (transactionFormData.transactionDate instanceof Date) {
-    const transactions = this.transactionForm.value;
+      transactionFormData.transactionDate = this.dateUtils.formatDate(prevTransactionDate, dateFormat);
-    transactions.locale = this.settingsService.language.code;
+    }
-    transactions.dateFormat = dateFormat;
+    const data = {
-    this.clientsService.payClientCharge(this.transactionData.clientId, this.transactionData.id, transactions).subscribe(() => {
+      ...transactionFormData,
+      dateFormat,
+      locale
+    };
+    this.clientsService.payClientCharge(this.transactionData.clientId, this.transactionData.id, data).subscribe(() => {
       this.router.navigate(['../', 'general']);
     });
   }

src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.ts

@@ -5,6 +5,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * Accept Client Transfer Component
@@ -26,11 +28,15 @@ export class AcceptClientTransferComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ClientsService} clientsService Clients Service
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
+              private settingsService: SettingsService,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { clientActionData: any }) => {
@@ -61,8 +67,17 @@ export class AcceptClientTransferComponent implements OnInit {
    * if successful redirects to the client.
    */
   submit() {
+    const acceptClientTransferFormData = this.acceptClientTransferForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const prevTransferDate: Date = this.acceptClientTransferForm.value.transferDate;
+    if (acceptClientTransferFormData.transferDate instanceof Date) {
+      acceptClientTransferFormData.transferDate = this.dateUtils.formatDate(prevTransferDate, dateFormat);
+    }
     const data = {
-      ...this.acceptClientTransferForm.value,
+      ...acceptClientTransferFormData,
+      dateFormat,
+      locale
     };
     this.clientsService.executeClientCommand(this.clientId, 'acceptTransfer', data).subscribe(() => {
       this.router.navigate(['../../'], { relativeTo: this.route });

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -30,14 +30,14 @@ export class ActivateClientComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {clientsService} clientsService Cliens Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -65,15 +65,15 @@ export class ActivateClientComponent implements OnInit {
    * if successful redirects to the client.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const activateClientFormData = this.activateClientForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevActivationDate: Date = this.activateClientForm.value.activationDate;
-    this.activateClientForm.patchValue({
+    if (activateClientFormData.activationDate instanceof Date) {
-      activationDate: this.datePipe.transform(prevActivationDate, dateFormat),
+      activateClientFormData.activationDate = this.dateUtils.formatDate(prevActivationDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.activateClientForm.value,
+      ...activateClientFormData,
       dateFormat,
       locale
     };

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

@@ -23,7 +23,7 @@
 
             <mat-form-field>
               <mat-label>Amount</mat-label>
-              <input type=number required matInput formControlName="amount" />
+              <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="clientChargeForm.controls.amount.hasError('required')">
                 Amount is <strong>required</strong>
               </mat-error>

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

@@ -2,10 +2,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -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 Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {ClientsService} clientsService Clients Service
    * @param {SettingsService} settingsService Setting service
    */
@@ -44,7 +44,7 @@ export class AddClientChargeComponent implements OnInit {
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private clientsService: ClientsService,
     private settingsService: SettingsService
   ) {
@@ -124,14 +124,14 @@ export class AddClientChargeComponent implements OnInit {
         clientCharge.monthDayFormat = monthDayFormat;
         if (clientCharge.feeOnMonthDay) {
           const prevDate = this.clientChargeForm.value.feeOnMonthDay;
-          clientCharge.feeOnMonthDay = this.datePipe.transform(prevDate, monthDayFormat);
+          clientCharge.feeOnMonthDay = this.dateUtils.formatDate(prevDate, monthDayFormat);
         }
       } else {
         const dateFormat = this.settingsService.dateFormat;
         clientCharge.dateFormat = dateFormat;
         if (clientCharge.dueDate) {
           const prevDate = this.clientChargeForm.value.dueDate;
-          clientCharge.dueDate = this.datePipe.transform(prevDate, dateFormat);
+          clientCharge.dueDate = this.dateUtils.formatDate(prevDate, dateFormat);
         }
       }
     }

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -32,14 +32,14 @@ export class CloseClientComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ClientsService} clientsService Clients Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -67,15 +67,15 @@ export class CloseClientComponent implements OnInit {
    * Submits the form and closes the client.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const closeClientFormData = this.closeClientForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevClosedDate: Date = this.closeClientForm.value.closureDate;
-    this.closeClientForm.patchValue({
+    if (closeClientFormData.closureDate instanceof Date) {
-      closureDate: this.datePipe.transform(prevClosedDate, dateFormat),
+      closeClientFormData.closureDate = this.dateUtils.formatDate(prevClosedDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.closeClientForm.value,
+      ...closeClientFormData,
       dateFormat,
       locale
     };

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -30,14 +30,14 @@ export class ReactivateClientComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {clientsService} clientsService Clients Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -65,15 +65,15 @@ export class ReactivateClientComponent implements OnInit {
    * if successful redirects to the client.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const reactivateClientFormData = this.reactivateClientForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevReactivationDate: Date = this.reactivateClientForm.value.reactivationDate;
-    this.reactivateClientForm.patchValue({
+    if (reactivateClientFormData.closureDate instanceof Date) {
-      reactivationDate: this.datePipe.transform(prevReactivationDate, dateFormat),
+      reactivateClientFormData.reactivationDate = this.dateUtils.formatDate(prevReactivationDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.reactivateClientForm.value,
+      ...reactivateClientFormData,
       dateFormat,
       locale
     };

src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.ts

@@ -5,6 +5,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * Reject Client Transfer Component
@@ -31,6 +33,8 @@ export class RejectClientTransferComponent implements OnInit {
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
+              private settingsService: SettingsService,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { clientActionData: any }) => {
@@ -58,8 +62,17 @@ export class RejectClientTransferComponent implements OnInit {
    * if successful redirects to the client.
    */
   submit() {
+    const rejectClientTransferFormData = this.rejectClientTransferForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const prevTransferDate: Date = this.rejectClientTransferForm.value.transferDate;
+    if (rejectClientTransferFormData.transferDate instanceof Date) {
+      rejectClientTransferFormData.transferDate = this.dateUtils.formatDate(prevTransferDate, dateFormat);
+    }
     const data = {
-      ...this.rejectClientTransferForm.value,
+      ...rejectClientTransferFormData,
+      dateFormat,
+      locale
     };
     this.clientsService.executeClientCommand(this.clientId, 'rejectTransfer', data).subscribe(() => {
       this.router.navigate(['../../'], { relativeTo: this.route });

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -32,14 +32,14 @@ export class RejectClientComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ClientsService} clientsService Clients Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -67,15 +67,15 @@ export class RejectClientComponent implements OnInit {
    * Submits the form and rejects the client.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const rejectClientFormData = this.rejectClientForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevRejectedDate: Date = this.rejectClientForm.value.rejectionDate;
-    this.rejectClientForm.patchValue({
+    if (rejectClientFormData.rejectionDate instanceof Date) {
-      rejectionDate: this.datePipe.transform(prevRejectedDate, dateFormat),
+      rejectClientFormData.rejectionDate = this.dateUtils.formatDate(prevRejectedDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.rejectClientForm.value,
+      ...rejectClientFormData,
       dateFormat,
       locale
     };

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -32,14 +32,14 @@ export class TransferClientComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ClientsService} clientsService Clients Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -68,15 +68,15 @@ export class TransferClientComponent implements OnInit {
    * Submits the form and transfers the client.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const transferClientFormData = this.transferClientForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    const prevClosedDate: Date = this.transferClientForm.value.transferDate;
+    const prevTransferDate: Date = this.transferClientForm.value.transferDate;
-    this.transferClientForm.patchValue({
+    if (transferClientFormData.transferDate instanceof Date) {
-      transferDate: this.datePipe.transform(prevClosedDate, dateFormat),
+      transferClientFormData.transferDate = this.dateUtils.formatDate(prevTransferDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.transferClientForm.value,
+      ...transferClientFormData,
       dateFormat,
       locale
     };

src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.ts

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -30,13 +30,13 @@ export class UndoClientRejectionComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {clientsService} clientsService Cliens Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -64,15 +64,15 @@ export class UndoClientRejectionComponent implements OnInit {
    * if successful redirects to the client.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const undoClientRejectionFormData = this.undoClientRejectionForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevReopenedDate: Date = this.undoClientRejectionForm.value.reopenedDate;
-    this.undoClientRejectionForm.patchValue({
+    if (undoClientRejectionFormData.reopenedDate instanceof Date) {
-      reopenedDate: this.datePipe.transform(prevReopenedDate, dateFormat),
+      undoClientRejectionFormData.reopenedDate = this.dateUtils.formatDate(prevReopenedDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.undoClientRejectionForm.value,
+      ...undoClientRejectionFormData,
       dateFormat,
       locale
     };

src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.ts

@@ -5,6 +5,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
+import { SettingsService } from 'app/settings/settings.service';
 
 /**
  * Undo Client Transfer Component
@@ -31,6 +33,8 @@ export class UndoClientTransferComponent implements OnInit {
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
+              private settingsService: SettingsService,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe((data: { clientActionData: any }) => {
@@ -61,8 +65,17 @@ export class UndoClientTransferComponent implements OnInit {
    * if successful redirects to the client.
    */
   submit() {
+    const undoClientTransferFormData = this.undoClientTransferForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
+    const prevTransferDate: Date = this.undoClientTransferForm.value.transferDate;
+    if (undoClientTransferFormData.transferDate instanceof Date) {
+      undoClientTransferFormData.transferDate = this.dateUtils.formatDate(prevTransferDate, dateFormat);
+    }
     const data = {
-      ...this.undoClientTransferForm.value,
+      ...undoClientTransferFormData,
+      dateFormat,
+      locale
     };
     this.clientsService.executeClientCommand(this.clientId, 'withdrawTransfer', data).subscribe(() => {
       this.router.navigate(['../../'], { relativeTo: this.route });

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

@@ -1,11 +1,11 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { ClientsService } from 'app/clients/clients.service';
+import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
 /**
@@ -32,14 +32,14 @@ export class WithdrawClientComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ClientsService} clientsService Clients Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
               private clientsService: ClientsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -67,15 +67,15 @@ export class WithdrawClientComponent implements OnInit {
    * Submits the form and withdraws the client.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const withdrawClientFormData = this.withdrawClientForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevWithdrawalDate: Date = this.withdrawClientForm.value.withdrawalDate;
-    this.withdrawClientForm.patchValue({
+    if (withdrawClientFormData.withdrawalDate instanceof Date) {
-      withdrawalDate: this.datePipe.transform(prevWithdrawalDate, dateFormat),
+      withdrawClientFormData.withdrawalDate = this.dateUtils.formatDate(prevWithdrawalDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.withdrawClientForm.value,
+      ...withdrawClientFormData,
       dateFormat,
       locale
     };

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

@@ -2,11 +2,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { ClientsService } from '../../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Add Family Member Component
@@ -31,14 +31,14 @@ export class AddFamilyMemberComponent implements OnInit {
 
   /**
    * @param {FormBuilder} formBuilder FormBuilder
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {Router} router Router
    * @param {Route} route Route
    * @param {ClientsService} clientsService Clients Service
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               private route: ActivatedRoute,
               private clientsService: ClientsService,
@@ -77,16 +77,19 @@ export class AddFamilyMemberComponent implements OnInit {
    * Submits the form and adds the family member
    */
   submit() {
-    const prevDateOfBirth: Date = this.addFamilyMemberForm.value.dateOfBirth;
+    const addFamilyMemberFormData = this.addFamilyMemberForm.value;
-    // TODO: Update once language and date settings are setup
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.addFamilyMemberForm.patchValue({
+    const prevDateOfBirth: Date = this.addFamilyMemberForm.value.dateOfBirth;
-      dateOfBirth: this.datePipe.transform(prevDateOfBirth, dateFormat)
+    if (addFamilyMemberFormData.dateOfBirth instanceof Date) {
-    });
+      addFamilyMemberFormData.dateOfBirth = this.dateUtils.formatDate(prevDateOfBirth, dateFormat);
-    const familyMemberData = this.addFamilyMemberForm.value;
+    }
-    familyMemberData.locale = this.settingsService.language.code;
+    const data = {
-    familyMemberData.dateFormat = dateFormat;
+      ...addFamilyMemberFormData,
-    this.clientsService.addFamilyMember(this.clientId, familyMemberData).subscribe(res => {
+      dateFormat,
+      locale
+    };
+    this.clientsService.addFamilyMember(this.clientId, data).subscribe(res => {
       this.router.navigate(['../'], { relativeTo: this.route });
     });
   }

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

@@ -2,11 +2,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { ClientsService } from '../../../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Family Member Component
@@ -31,14 +31,14 @@ export class EditFamilyMemberComponent implements OnInit {
 
   /**
    * @param {FormBuilder} formBuilder Form Builder
-   * @param {DatePipe} datePipe DatePipe
+   * @param {Dates} dateUtils DatePipe
    * @param {Router} router Router
    * @param {ActivatedRoute} route Route
    * @param {ClientsService} clientsService Clients Service
    * @param {SettingsService} settingsService Setting service
    */
   constructor(private formBuilder: FormBuilder,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private router: Router,
               private route: ActivatedRoute,
               private clientsService: ClientsService,
@@ -69,7 +69,7 @@ export class EditFamilyMemberComponent implements OnInit {
       'genderId': [familyMember.genderId, Validators.required],
       'professionId': [familyMember.professionId],
       'maritalStatusId': [familyMember.maritalStatusId],
-      'dateOfBirth': [this.datePipe.transform(familyMember.dateOfBirth, 'yyyy-MM-dd'), Validators.required]
+      'dateOfBirth': [this.dateUtils.formatDate(familyMember.dateOfBirth, 'yyyy-MM-dd'), Validators.required]
     });
   }
 
@@ -77,16 +77,19 @@ export class EditFamilyMemberComponent implements OnInit {
    * Submits the form and updates the client family member.
    */
   submit() {
-    const prevDateOfBirth: Date = this.editFamilyMemberForm.value.dateOfBirth;
+    const editFamilyMemberFormData = this.editFamilyMemberForm.value;
-    // TODO: Update once language and date settings are setup
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.editFamilyMemberForm.patchValue({
+    const prevDateOfBirth: Date = this.editFamilyMemberForm.value.dateOfBirth;
-      dateOfBirth: this.datePipe.transform(prevDateOfBirth, dateFormat)
+    if (editFamilyMemberFormData.dateOfBirth instanceof Date) {
-    });
+      editFamilyMemberFormData.dateOfBirth = this.dateUtils.formatDate(prevDateOfBirth, dateFormat);
-    const familyMemberData = this.editFamilyMemberForm.value;
+    }
-    familyMemberData.locale = this.settingsService.language.code;
+    const data = {
-    familyMemberData.dateFormat = dateFormat;
+      ...editFamilyMemberFormData,
-    this.clientsService.editFamilyMember(this.familyMemberDetails.clientId, this.familyMemberDetails.id, familyMemberData).subscribe(res => {
+      dateFormat,
+      locale
+    };
+    this.clientsService.editFamilyMember(this.familyMemberDetails.clientId, this.familyMemberDetails.id, data).subscribe(res => {
       this.router.navigate(['../../'], { relativeTo: this.route });
     });
   }

src/app/clients/edit-client/edit-client.component.ts

@@ -2,11 +2,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { ClientsService } from '../clients.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Client Component
@@ -51,14 +51,14 @@ export class EditClientComponent implements OnInit {
    * @param {ActivatedRoute} route ActivatedRoute
    * @param {Router} router Router
    * @param {ClientsService} clientsService Clients Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
               private route: ActivatedRoute,
               private router: Router,
               private clientsService: ClientsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private settingsService: SettingsService) {
     this.route.data.subscribe((data: { clientDataAndTemplate: any }) => {
       this.clientDataAndTemplate = data.clientDataAndTemplate;
@@ -158,13 +158,12 @@ export class EditClientComponent implements OnInit {
   submit() {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    // TODO: Update once language and date settings are setup
     const editClientFormValue: any = this.editClientForm.getRawValue();
     const clientData = {
       ...editClientFormValue,
-      dateOfBirth: editClientFormValue.dateOfBirth && this.datePipe.transform(editClientFormValue.dateOfBirth, dateFormat),
+      dateOfBirth: editClientFormValue.dateOfBirth && this.dateUtils.formatDate(editClientFormValue.dateOfBirth, dateFormat),
-      submittedOnDate: editClientFormValue.submittedOnDate && this.datePipe.transform(editClientFormValue.submittedOnDate, dateFormat),
+      submittedOnDate: editClientFormValue.submittedOnDate && this.dateUtils.formatDate(editClientFormValue.submittedOnDate, dateFormat),
-      activationDate: this.datePipe.transform(editClientFormValue.activationDate, dateFormat),
+      activationDate: this.dateUtils.formatDate(editClientFormValue.activationDate, dateFormat),
       dateFormat,
       locale
     };
@@ -172,7 +171,7 @@ export class EditClientComponent implements OnInit {
     if (editClientFormValue.clientNonPersonDetails) {
       clientData.clientNonPersonDetails = {
         ...editClientFormValue.clientNonPersonDetails,
-        incorpValidityTillDate: editClientFormValue.clientNonPersonDetails.incorpValidityTillDate && this.datePipe.transform(editClientFormValue.clientNonPersonDetails.incorpValidityTillDate, dateFormat),
+        incorpValidityTillDate: editClientFormValue.clientNonPersonDetails.incorpValidityTillDate && this.dateUtils.formatDate(editClientFormValue.clientNonPersonDetails.incorpValidityTillDate, dateFormat),
         dateFormat,
         locale
       };

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.html

@@ -28,7 +28,7 @@
       <mat-form-field fxFlex="98%">
         <mat-label>Repayment date</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
-          formControlName="transactionDate" required>
+          formControlName="transactionDate">
         <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>
         <mat-datepicker #transactionDatePicker></mat-datepicker>
         <mat-error *ngIf="collectionSheetForm.controls.transactionDate.hasError('required')">
@@ -58,7 +58,7 @@
 
 </mat-card>
 
-<div class="showCollectionSheet">
+<div class="showcollectionsheet">
 
   <div class="container" *ngIf="isCollapsed">
 

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.scss

@@ -5,18 +5,18 @@
   .margin-v {
     margin: 1em 0;
   }
-  
+
   .margin-b {
     margin: 0 0 1em 0;
   }
-  
+
   .margin-t {
     margin-top: 1em;
   }
 
 }
 
-.showCollectionSheet {
+.showcollectionsheet {
   .container {
     max-width: 73rem;
   }

src/app/collections/individual-collection-sheet/individual-collection-sheet.component.ts

@@ -6,7 +6,6 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Services Import */
 import { CollectionsService } from '../collections.service';
@@ -21,6 +20,7 @@ import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 
 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Individual Collection Sheet
@@ -82,7 +82,7 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {OrganizationService} collectionsService Organization Service.
    * @param {Route} route Route.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    * @param {Dialog} dialog Dialog component.
    * @param {Router} router Router for navigation.
    * @param {SettingsService} settingsService Settings Service
@@ -90,7 +90,7 @@ export class IndividualCollectionSheetComponent implements OnInit {
   constructor(private formBuilder: FormBuilder,
               private collectionsService: CollectionsService,
               private route: ActivatedRoute,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               public dialog: MatDialog,
               private router: Router,
               private settingsService: SettingsService) {
@@ -280,12 +280,11 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * Searches collection sheet data
    */
   previewCollectionSheet() {
-    // TODO: Update once language and date settings are setup
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const collectionSheet = {
       ...this.collectionSheetForm.value,
-      'transactionDate': this.datePipe.transform(this.collectionSheetForm.value.transactionDate, dateFormat),
+      transactionDate: this.dateUtils.formatDate(this.collectionSheetForm.value.transactionDate, dateFormat),
       dateFormat,
       locale
     };
@@ -308,7 +307,6 @@ export class IndividualCollectionSheetComponent implements OnInit {
    * Submit the data with all the payments data
    */
   submit() {
-    // TODO: Update once language and date settings are setup
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     this.bulkDisbursementTransactionsData['bulkRepaymentTransactions'] = this.bulkRepaymentTransactions;
@@ -316,8 +314,8 @@ export class IndividualCollectionSheetComponent implements OnInit {
     const finalSubmitData = {
       dateFormat,
       locale,
-      actualDisbursementDate: this.datePipe.transform(this.collectionSheetForm.value.transactionDate, dateFormat),
+      actualDisbursementDate: this.dateUtils.formatDate(this.collectionSheetForm.value.transactionDate, dateFormat),
-      transactionDate: this.datePipe.transform(this.collectionSheetForm.value.transactionDate, dateFormat),
+      transactionDate: this.dateUtils.formatDate(this.collectionSheetForm.value.transactionDate, dateFormat),
       bulkDisbursementTransactions: this.bulkDisbursementTransactionsData
     };
     this.collectionsService.executeSaveCollectionSheet(finalSubmitData).subscribe(() => {

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts

@@ -44,7 +44,7 @@ export class CreateFixedDepositAccountComponent {
    * Fetches FD account template from `resolve`
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
    * @param {SettingsService} settingsService Settings Service
    */

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

@@ -44,7 +44,7 @@ export class EditFixedDepositAccountComponent {
    * Fetches FD account template from `resolve`
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
    * @param {SettingsService} settingsService Settings Service
    */

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

@@ -45,7 +45,7 @@ export class FixedDepositAccountChargesStepComponent implements OnInit, OnChange
 
   /**
    * @param {MatDialog} dialog Mat Dialog
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(public dialog: MatDialog,

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

@@ -50,7 +50,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service.

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

@@ -41,7 +41,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service.
@@ -151,7 +151,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Maps API response to data table form fields.
    * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with date pipe.
+   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
    * @param {any} dataTableEntryObject Additional data table details.
    */
   getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/activate-fixed-deposits-account/activate-fixed-deposits-account.component.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
@@ -31,14 +31,14 @@ export class ActivateFixedDepositsAccountComponent implements OnInit {
    * Fixed deposits endpoint is not supported so using Savings endpoint.
    * @param {FormBuilder} formBuilder Form Builder
    * @param {SavingsService} savingsService Savings Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
               private savingsService: SavingsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -66,15 +66,15 @@ export class ActivateFixedDepositsAccountComponent implements OnInit {
    * if successful redirects to the fixed deposit account.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const activateFixedDepositsAccountFormData = this.activateFixedDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevActivatedOnDate: Date = this.activateFixedDepositsAccountForm.value.activatedOnDate;
-    this.activateFixedDepositsAccountForm.patchValue({
+    if (activateFixedDepositsAccountFormData.activatedOnDate instanceof Date) {
-      activatedOnDate: this.datePipe.transform(prevActivatedOnDate, dateFormat),
+      activateFixedDepositsAccountFormData.activatedOnDate = this.dateUtils.formatDate(prevActivatedOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.activateFixedDepositsAccountForm.value,
+      ...activateFixedDepositsAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-deposits-account.component.html

@@ -23,7 +23,7 @@
 
             <mat-form-field>
               <mat-label>Amount</mat-label>
-              <input type=number required matInput formControlName="amount" />
+              <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="fixedDepositsChargeForm.controls.amount.hasError('required')">
                 Amount is <strong>required</strong>
               </mat-error>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/add-charge-fixed-deposits-account/add-charge-fixed-deposits-account.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
@@ -37,7 +37,7 @@ export class AddChargeFixedDepositsAccountComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {SavingsService} savingsService Savings Service
    * @param {SettingsService} settingsService Settings Service
    */
@@ -45,7 +45,7 @@ export class AddChargeFixedDepositsAccountComponent implements OnInit {
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private savingsService: SavingsService,
     private settingsService: SettingsService
   ) {
@@ -125,14 +125,14 @@ export class AddChargeFixedDepositsAccountComponent implements OnInit {
         savingsCharge.monthDayFormat = monthDayFormat;
         if (savingsCharge.feeOnMonthDay) {
           const prevDate = this.fixedDepositsChargeForm.value.feeOnMonthDay;
-          savingsCharge.feeOnMonthDay = this.datePipe.transform(prevDate, monthDayFormat);
+          savingsCharge.feeOnMonthDay = this.dateUtils.formatDate(prevDate, monthDayFormat);
         }
       } else {
         const dateFormat = this.settingsService.dateFormat;
         savingsCharge.dateFormat = dateFormat;
         if (savingsCharge.dueDate) {
           const prevDate = this.fixedDepositsChargeForm.value.dueDate;
-          savingsCharge.dueDate = this.datePipe.transform(prevDate, dateFormat);
+          savingsCharge.dueDate = this.dateUtils.formatDate(prevDate, dateFormat);
         }
       }
     }

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/approve-fixed-deposits-account/approve-fixed-deposits-account.component.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits.service';
@@ -30,14 +30,14 @@ export class ApproveFixedDepositsAccountComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
               private fixedDepositsService: FixedDepositsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -66,14 +66,15 @@ export class ApproveFixedDepositsAccountComponent implements OnInit {
    * if successful redirects to the fixed deposit account.
    */
   submit() {
+    const approveFixedDepositsAccountFormData = this.approveFixedDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevApprovedOnDate: Date = this.approveFixedDepositsAccountForm.value.approvedOnDate;
-    this.approveFixedDepositsAccountForm.patchValue({
+    if (approveFixedDepositsAccountFormData.approvedOnDate instanceof Date) {
-      approvedOnDate: this.datePipe.transform(prevApprovedOnDate, dateFormat),
+      approveFixedDepositsAccountFormData.approvedOnDate = this.dateUtils.formatDate(prevApprovedOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.approveFixedDepositsAccountForm.value,
+      ...approveFixedDepositsAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-deposits-account.component.html

@@ -20,7 +20,7 @@
 
           <mat-form-field>
             <mat-label>Maturity Amount</mat-label>
-            <input type=number matInput formControlName="maturityAmount"/>
+            <input type="number" matInput formControlName="maturityAmount"/>
           </mat-form-field>
 
           <mat-form-field>

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/close-fixed-deposits-account/close-fixed-deposits-account.component.ts

@@ -1,12 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { FixedDepositsService } from '../../fixed-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Close On Maturity Fixed Deposits Account Component
@@ -37,14 +37,14 @@ export class CloseFixedDepositsAccountComponent implements OnInit {
    * Fetches close action data from `resolve`
    * @param {FormBuilder} formBuilder Form Builder
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
               private fixedDepositsService: FixedDepositsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -96,14 +96,15 @@ export class CloseFixedDepositsAccountComponent implements OnInit {
    * if successful redirects to the fd account.
    */
   submit() {
+    const closeOnMaturityAccountFormData = this.closeOnMaturityAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevClosedDate: Date = this.closeOnMaturityAccountForm.value.closedOnDate;
-    this.closeOnMaturityAccountForm.patchValue({
+    if (closeOnMaturityAccountFormData.closedOnDate instanceof Date) {
-      closedOnDate: this.datePipe.transform(prevClosedDate, dateFormat),
+      closeOnMaturityAccountFormData.closedOnDate = this.dateUtils.formatDate(prevClosedDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.closeOnMaturityAccountForm.value,
+      ...closeOnMaturityAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-deposits-account.component.html

@@ -20,7 +20,7 @@
 
           <mat-form-field *ngIf="prematureCloseAccountForm.controls.maturityAmount">
             <mat-label>Maturity Amount</mat-label>
-            <input type=number matInput formControlName="maturityAmount"/>
+            <input type="number" matInput formControlName="maturityAmount"/>
           </mat-form-field>
 
           <mat-form-field *ngIf="prematureCloseAccountForm.contains('onAccountClosureId')">

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/premature-close-fixed-deposits-account/premature-close-fixed-deposits-account.component.ts

@@ -1,12 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { FixedDepositsService } from '../../fixed-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Premature Close Fixed Deposits Account Component
@@ -37,14 +37,14 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
     private fixedDepositsService: FixedDepositsService,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private route: ActivatedRoute,
     private router: Router,
     private settingsService: SettingsService) {
@@ -87,7 +87,7 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const data = {
-      closedOnDate: this.datePipe.transform(date, dateFormat),
+      closedOnDate: this.dateUtils.formatDate(date, dateFormat),
       dateFormat,
       locale
     };
@@ -124,15 +124,16 @@ export class PrematureCloseFixedDepositsAccountComponent implements OnInit {
    * if successful redirects to the fd account.
    */
   submit() {
+    const prematureCloseAccountFormData = this.prematureCloseAccountForm.value;
     this.isSubmitted = true;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevClosedDate: Date = this.prematureCloseAccountForm.value.closedOnDate;
-    this.prematureCloseAccountForm.patchValue({
+    if (prematureCloseAccountFormData.closedOnDate instanceof Date) {
-      closedOnDate: this.datePipe.transform(prevClosedDate, dateFormat),
+      prematureCloseAccountFormData.closedOnDate = this.dateUtils.formatDate(prevClosedDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.prematureCloseAccountForm.value,
+      ...prematureCloseAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/reject-fixed-deposits-account/reject-fixed-deposits-account.component.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits.service';
@@ -30,14 +30,14 @@ export class RejectFixedDepositsAccountComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
               private fixedDepositsService: FixedDepositsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -66,14 +66,15 @@ export class RejectFixedDepositsAccountComponent implements OnInit {
    * if successful redirects to the fixed deposit account.
    */
   submit() {
+    const rejectFixedDepositsAccountFormData = this.rejectFixedDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevRejectedOnDate: Date = this.rejectFixedDepositsAccountForm.value.rejectedOnDate;
-    this.rejectFixedDepositsAccountForm.patchValue({
+    if (rejectFixedDepositsAccountFormData.rejectedOnDate instanceof Date) {
-      rejectedOnDate: this.datePipe.transform(prevRejectedOnDate, dateFormat),
+      rejectFixedDepositsAccountFormData.rejectedOnDate = this.dateUtils.formatDate(prevRejectedOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.rejectFixedDepositsAccountForm.value,
+      ...rejectFixedDepositsAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/fixed-deposits/fixed-deposits-account-actions/withdraw-by-client-fixed-deposits-account/withdraw-by-client-fixed-deposits-account.component.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { FixedDepositsService } from 'app/deposits/fixed-deposits/fixed-deposits.service';
@@ -30,14 +30,14 @@ export class WithdrawByClientFixedDepositsAccountComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {FixedDepositsService} fixedDepositsService Fixed Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
               private fixedDepositsService: FixedDepositsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -66,14 +66,15 @@ export class WithdrawByClientFixedDepositsAccountComponent implements OnInit {
    * if successful redirects to the fixed deposit account.
    */
   submit() {
+    const withdrawFixedDepositsAccountFormData = this.withdrawFixedDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevWithdrawnOnDate: Date = this.withdrawFixedDepositsAccountForm.value.withdrawnOnDate;
-    this.withdrawFixedDepositsAccountForm.patchValue({
+    if (withdrawFixedDepositsAccountFormData.withdrawnOnDate instanceof Date) {
-      withdrawnOnDate: this.datePipe.transform(prevWithdrawnOnDate, dateFormat),
+      withdrawFixedDepositsAccountFormData.withdrawnOnDate = this.dateUtils.formatDate(prevWithdrawnOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.withdrawFixedDepositsAccountForm.value,
+      ...withdrawFixedDepositsAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/activate-recurring-deposits-account/activate-recurring-deposits-account.component.ts

@@ -1,12 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../../recurring-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Activate Recurring Deposits Account Component
@@ -30,14 +30,14 @@ export class ActivateRecurringDepositsAccountComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {recurringDepositsService} recurringDepositsService Recurring Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SavingsService} savingsService Savings Service
    */
   constructor(private formBuilder: FormBuilder,
     private recurringDepositsService: RecurringDepositsService,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private route: ActivatedRoute,
     private router: Router,
     private settingsService: SettingsService) {
@@ -65,15 +65,15 @@ export class ActivateRecurringDepositsAccountComponent implements OnInit {
    * if successful redirects to the recurring deposit account.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const activateRecurringDepositsAccountFormData = this.activateRecurringDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevActivatedOnDate: Date = this.activateRecurringDepositsAccountForm.value.activatedOnDate;
-    this.activateRecurringDepositsAccountForm.patchValue({
+    if (activateRecurringDepositsAccountFormData.activatedOnDate instanceof Date) {
-      activatedOnDate: this.datePipe.transform(prevActivatedOnDate, dateFormat),
+      activateRecurringDepositsAccountFormData.activatedOnDate = this.dateUtils.formatDate(prevActivatedOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.activateRecurringDepositsAccountForm.value,
+      ...activateRecurringDepositsAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.html

@@ -23,7 +23,7 @@
 
             <mat-form-field>
               <mat-label>Amount</mat-label>
-              <input type=number required matInput formControlName="amount" />
+              <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="recurringDepositsChargeForm.controls.amount.hasError('required')">
                 Amount is <strong>required</strong>
               </mat-error>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.ts

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { SavingsService } from 'app/savings/savings.service';
@@ -37,14 +37,14 @@ export class AddChargeRecurringDepositsAccountComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {SavingsService} savingsService Savings Service
    */
   constructor(
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private savingsService: SavingsService,
     private settingsService: SettingsService
   ) {
@@ -124,14 +124,14 @@ export class AddChargeRecurringDepositsAccountComponent implements OnInit {
         savingsCharge.monthDayFormat = monthDayFormat;
         if (savingsCharge.feeOnMonthDay) {
           const prevDate = this.recurringDepositsChargeForm.value.feeOnMonthDay;
-          savingsCharge.feeOnMonthDay = this.datePipe.transform(prevDate, monthDayFormat);
+          savingsCharge.feeOnMonthDay = this.dateUtils.formatDate(prevDate, monthDayFormat);
         }
       } else {
         const dateFormat = this.settingsService.dateFormat;
         savingsCharge.dateFormat = dateFormat;
         if (savingsCharge.dueDate) {
           const prevDate = this.recurringDepositsChargeForm.value.dueDate;
-          savingsCharge.dueDate = this.datePipe.transform(prevDate, dateFormat);
+          savingsCharge.dueDate = this.dateUtils.formatDate(prevDate, dateFormat);
         }
       }
     }

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/approve-recurring-deposits-account/approve-recurring-deposits-account.component.ts

@@ -1,12 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../../recurring-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Approve Recurring Deposits Account Component
@@ -30,14 +30,14 @@ export class ApproveRecurringDepositsAccountComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
     private recurringDepositsService: RecurringDepositsService,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private route: ActivatedRoute,
     private router: Router,
     private settingsService: SettingsService) {
@@ -66,15 +66,15 @@ export class ApproveRecurringDepositsAccountComponent implements OnInit {
    * if successful redirects to the recurring deposit account.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const approveRecurringDepositsAccountFormData = this.approveRecurringDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevApprovedOnDate: Date = this.approveRecurringDepositsAccountForm.value.approvedOnDate;
-    this.approveRecurringDepositsAccountForm.patchValue({
+    if (approveRecurringDepositsAccountFormData.approvedOnDate instanceof Date) {
-      approvedOnDate: this.datePipe.transform(prevApprovedOnDate, dateFormat),
+      approveRecurringDepositsAccountFormData.approvedOnDate = this.dateUtils.formatDate(prevApprovedOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.approveRecurringDepositsAccountForm.value,
+      ...approveRecurringDepositsAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.html

@@ -56,7 +56,7 @@
 
           <div fxFlexFill>
             <span fxFlex="25%">Show Payment Details</span>
-            <span fxFlex="75%" class="expandCollapsebutton" (click)="toggleDisplay()">
+            <span fxFlex="75%" class="expandcollapsebutton" (click)="toggleDisplay()">
               <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
                 <i class="fa fa-minus"></i>
               </button>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.scss

@@ -2,7 +2,7 @@
   max-width: 37rem;
 }
 
-.expandCollapsebutton {
+.expandcollapsebutton {
     margin-top: -7px;
     margin-left: 2%;
 }

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/close-recurring-deposits-account/close-recurring-deposits-account.component.ts

@@ -1,12 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../../recurring-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Close Recurring Deposits Account Component
@@ -42,14 +42,14 @@ export class CloseRecurringDepositsAccountComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private recurringDepositsService: RecurringDepositsService,
     private settingsService: SettingsService
   ) {
@@ -99,14 +99,15 @@ export class CloseRecurringDepositsAccountComponent implements OnInit {
    * Submits the close recurring deposit form
    */
   submit() {
+    const closeRecurringDepositFormData = this.closeRecurringDepositForm.value;
     const closedOnDate = this.closeRecurringDepositForm.value.closedOnDate;
     const dateFormat = this.settingsService.dateFormat;
     const locale = this.settingsService.language.code;
-    this.closeRecurringDepositForm.patchValue({
+    if (closeRecurringDepositFormData.closedOnDate instanceof Date) {
-      closedOnDate: this.datePipe.transform(closedOnDate, dateFormat)
+      closeRecurringDepositFormData.closedOnDate = this.dateUtils.formatDate(closedOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.closeRecurringDepositForm.value,
+      ...closeRecurringDepositFormData,
       dateFormat,
       locale
     };

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.html

@@ -41,7 +41,7 @@
 
           <div fxFlexFill>
             <span fxFlex="25%">Show Payment Details</span>
-            <span fxFlex="75%" class="expandCollapsebutton" (click)="toggleDisplay()">
+            <span fxFlex="75%" class="expandcollapsebutton" (click)="toggleDisplay()">
               <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
                 <i class="fa fa-minus"></i>
               </button>
@@ -96,4 +96,4 @@
 
   </mat-card>
 
-</div>
+</div>

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/deposit-recurring-deposits-account/deposit-recurring-deposits-account.component.scss

@@ -2,7 +2,7 @@
   max-width: 37rem;
 }
 
-.expandCollapsebutton {
+.expandcollapsebutton {
     margin-top: -7px;
     margin-left: 2%;
 }

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

@@ -1,12 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../../recurring-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Deposits Recurring Deposits Account Component
@@ -40,14 +40,14 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private recurringDepositsService: RecurringDepositsService,
     private settingsService: SettingsService
   ) {
@@ -94,14 +94,15 @@ export class DepositRecurringDepositsAccountComponent implements OnInit {
    * Submits the deposits recurring deposit form
    */
   submit() {
-    const transactionDate = this.depositRecurringDepositForm.value.transactionDate;
+    const depositRecurringDepositFormData = this.depositRecurringDepositForm.value;
     const dateFormat = this.settingsService.dateFormat;
     const locale = this.settingsService.language.code;
-    this.depositRecurringDepositForm.patchValue({
+    const prevTransactionDate = this.depositRecurringDepositForm.value.transactionDate;
-      transactionDate: this.datePipe.transform(transactionDate, dateFormat)
+    if (depositRecurringDepositFormData.transactionDate instanceof Date) {
-    });
+      depositRecurringDepositFormData.transactionDate = this.dateUtils.formatDate(prevTransactionDate, dateFormat);
+    }
     const data = {
-      ...this.depositRecurringDepositForm.value,
+      ...depositRecurringDepositFormData,
       dateFormat,
       locale
     };

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/premature-close-recurring-deposit-account/premature-close-recurring-deposit-account.component.ts

@@ -1,12 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../../recurring-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Premature Close Recurring Deposits Account Component
@@ -31,14 +31,14 @@ export class PrematureCloseRecurringDepositAccountComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
     private recurringDepositsService: RecurringDepositsService,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private route: ActivatedRoute,
     private router: Router,
     private settingsService: SettingsService, ) {
@@ -66,15 +66,15 @@ export class PrematureCloseRecurringDepositAccountComponent implements OnInit {
    * if successful redirects to the recurring deposit account.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const prematureCloseRecurringDepositsAccountFormData = this.prematureCloseRecurringDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevClosedOnDate: Date = this.prematureCloseRecurringDepositsAccountForm.value.closedOnDate;
-    this.prematureCloseRecurringDepositsAccountForm.patchValue({
+    if (prematureCloseRecurringDepositsAccountFormData.closedOnDate instanceof Date) {
-      closedOnDate: this.datePipe.transform(prevClosedOnDate, dateFormat),
+      prematureCloseRecurringDepositsAccountFormData.closedOnDate = this.dateUtils.formatDate(prevClosedOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.prematureCloseRecurringDepositsAccountForm.value,
+      ...prematureCloseRecurringDepositsAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/reject-recurring-deposits-account/reject-recurring-deposits-account.component.ts

@@ -1,12 +1,12 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../../recurring-deposits.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 
 /**
@@ -31,14 +31,14 @@ export class RejectRecurringDepositsAccountComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
     private recurringDepositsService: RecurringDepositsService,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private route: ActivatedRoute,
     private router: Router,
     private settingsService: SettingsService) {
@@ -67,15 +67,15 @@ export class RejectRecurringDepositsAccountComponent implements OnInit {
    * if successful redirects to the recurring deposit account.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const rejectRecurringDepositsAccountFormData = this.rejectRecurringDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevRejectedOnDate: Date = this.rejectRecurringDepositsAccountForm.value.rejectedOnDate;
-    this.rejectRecurringDepositsAccountForm.patchValue({
+    if (rejectRecurringDepositsAccountFormData.rejectedOnDate instanceof Date) {
-      rejectedOnDate: this.datePipe.transform(prevRejectedOnDate, dateFormat),
+      rejectRecurringDepositsAccountFormData.rejectedOnDate = this.dateUtils.formatDate(prevRejectedOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.rejectRecurringDepositsAccountForm.value,
+      ...rejectRecurringDepositsAccountFormData,
       dateFormat,
       locale
     };

src/app/deposits/recurring-deposits/recurring-deposits-account-actions/withdraw-by-client-recurring-deposits-account/withdraw-by-client-recurring-deposits-account.component.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
@@ -29,14 +29,14 @@ export class WithdrawByClientRecurringDepositsAccountComponent implements OnInit
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
     private recurringDepositsService: RecurringDepositsService,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private route: ActivatedRoute,
     private router: Router,
     private settingsService: SettingsService, ) {
@@ -65,15 +65,15 @@ export class WithdrawByClientRecurringDepositsAccountComponent implements OnInit
    * if successful redirects to the recurring deposit account.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const withdrawRecurringDepositsAccountFormData = this.withdrawRecurringDepositsAccountForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevWithdrawnOnDate: Date = this.withdrawRecurringDepositsAccountForm.value.withdrawnOnDate;
-    this.withdrawRecurringDepositsAccountForm.patchValue({
+    if (withdrawRecurringDepositsAccountFormData.withdrawnOnDate instanceof Date) {
-      withdrawnOnDate: this.datePipe.transform(prevWithdrawnOnDate, dateFormat),
+      withdrawRecurringDepositsAccountFormData.withdrawnOnDate = this.dateUtils.formatDate(prevWithdrawnOnDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.withdrawRecurringDepositsAccountForm.value,
+      ...withdrawRecurringDepositsAccountFormData,
       dateFormat,
       locale
     };

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

@@ -4,7 +4,6 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 /** Custom Services */
 import { RecurringDepositsService } from '../../recurring-deposits.service';
-import { DatePipe } from '@angular/common';
 
 /**
  * Recurring Deposits Account Details Step
@@ -41,8 +40,7 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
    */
   constructor(private formBuilder: FormBuilder,
-    private recurringDepositsService: RecurringDepositsService,
+    private recurringDepositsService: RecurringDepositsService) {
-    private datePipe: DatePipe) {
     this.createRecurringDepositsAccountDetailsForm();
   }
 

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

@@ -3,7 +3,6 @@ import { Component, OnInit, Input, OnChanges } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 
 /** Custom Services */
-import { DatePipe } from '@angular/common';
 
 /**
  * Recurring Deposits Account Settings Step
@@ -36,8 +35,7 @@ export class RecurringDepositsAccountSettingsStepComponent implements OnInit, On
   /**
    * @param {FormBuilder} formBuilder Form Builder
    */
-  constructor(private formBuilder: FormBuilder,
+  constructor(private formBuilder: FormBuilder) {
-    private datePipe: DatePipe) {
     this.createRecurringDepositAccountSettingsForm();
     this.buildDependencies();
   }

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

@@ -49,7 +49,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    */

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

@@ -41,7 +41,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches savings account Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {SavingsService} savingsService Savingss Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service
@@ -151,7 +151,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Maps API response to data table form fields.
    * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with date pipe.
+   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
    * @param {any} dataTableEntryObject Additional data table details.
    */
   getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {

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

@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { RecurringDepositsService } from 'app/deposits/recurring-deposits/recurring-deposits.service';
@@ -44,14 +44,14 @@ export class EditTransactionComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {RecurringDepositsService} recurringDepositsService Recurring Deposits Service.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe DatePipe.
+   * @param {Dates} dateUtils Date Utils.
    * @param {Router} router Router for navigation.
    * @param {SettingsService} settingsService Settings Service
    */
   constructor(private formBuilder: FormBuilder,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe,
+    private dateUtils: Dates,
     private recurringDepositsService: RecurringDepositsService,
     private settingsService: SettingsService, ) {
     this.route.data.subscribe((data: { recurringDepositsAccountTransactionTemplate: any }) => {
@@ -108,16 +108,19 @@ export class EditTransactionComponent implements OnInit {
    * Submit the transaction details.
    */
   submit() {
-    const prevTransactionDate: Date = this.editTransactionForm.value.transactionDate;
+    const editTransactionFormData = this.editTransactionForm.value;
-    // TODO: Update once language and date settings are setup
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.editTransactionForm.patchValue({
+    const prevTransactionDate: Date = this.editTransactionForm.value.transactionDate;
-      transactionDate: this.datePipe.transform(prevTransactionDate, dateFormat)
+    if (editTransactionFormData.transactionDate instanceof Date) {
-    });
+      editTransactionFormData.transactionDate = this.dateUtils.formatDate(prevTransactionDate, dateFormat);
-    const transactionData = this.editTransactionForm.value;
+    }
-    transactionData.locale = this.settingsService.language.code;
+    const data = {
-    transactionData.dateFormat = dateFormat;
+      ...editTransactionFormData,
-    this.recurringDepositsService.executeRecurringDepositsAccountTransactionsCommand(this.recurringDepositAccountId, 'modify', transactionData, this.transactionTemplateData.id)
+      dateFormat,
+      locale
+    };
+    this.recurringDepositsService.executeRecurringDepositsAccountTransactionsCommand(this.recurringDepositAccountId, 'modify', data, this.transactionTemplateData.id)
       .subscribe(res => {
         this.router.navigate(['../'], { relativeTo: this.route });
       });

src/app/groups/create-group/create-group.component.ts

@@ -2,12 +2,12 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { GroupsService } from '../groups.service';
 import { ClientsService } from '../../clients/clients.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Create Group component.
@@ -43,7 +43,7 @@ export class CreateGroupComponent implements OnInit, AfterViewInit {
    * @param {Router} router Router for navigation.
    * @param {ClientsService} clientsService CentersService.
    * @param {GroupsService} groupService GroupsService.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
@@ -51,7 +51,7 @@ export class CreateGroupComponent implements OnInit, AfterViewInit {
               private router: Router,
               private clientsService: ClientsService,
               private groupService: GroupsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private settingsService: SettingsService) {
     this.route.data.subscribe( (data: {offices: any} ) => {
       this.officeData = data.offices;
@@ -149,20 +149,25 @@ export class CreateGroupComponent implements OnInit, AfterViewInit {
    * if successful redirects to groups.
    */
   submit() {
+    const groupFormData = this.groupForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
     const submittedOnDate: Date = this.groupForm.value.submittedOnDate;
     const activationDate: Date = this.groupForm.value.activationDate;
-    // TODO: Update once language and date settings are setup
+    if (groupFormData.submittedOnDate instanceof Date) {
-    const dateFormat = this.settingsService.dateFormat;
+      groupFormData.submittedOnDate = this.dateUtils.formatDate(submittedOnDate, dateFormat);
-    this.groupForm.patchValue({
+    }
-      submittedOnDate: this.datePipe.transform(submittedOnDate, dateFormat),
+    if (groupFormData.activationDate instanceof Date) {
-      activationDate: this.datePipe.transform(activationDate, dateFormat)
+      groupFormData.activationDate = this.dateUtils.formatDate(activationDate, dateFormat);
-    });
+    }
-    const group = this.groupForm.value;
+    const data = {
-    group.locale = this.settingsService.language.code;
+      ...groupFormData,
-    group.dateFormat = dateFormat;
+      dateFormat,
-    group.clientMembers = [];
+      locale
-    this.clientMembers.forEach((client: any) => group.clientMembers.push(client.id));
+    };
-    this.groupService.createGroup(group).subscribe((response: any) => {
+    data.clientMembers = [];
+    this.clientMembers.forEach((client: any) => data.clientMembers.push(client.id));
+    this.groupService.createGroup(data).subscribe((response: any) => {
       this.router.navigate(['../groups']);
     });
   }

src/app/groups/edit-group/edit-group.component.ts

@@ -2,11 +2,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { GroupsService } from '../groups.service';
 import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
 
 /**
  * Edit Group component.
@@ -37,14 +37,14 @@ export class EditGroupComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {GroupsService} groupService GroupsService.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {Dates} dateUtils Date Utils to format date.
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
               private route: ActivatedRoute,
               private router: Router,
               private groupService: GroupsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private settingsService: SettingsService) {
     this.route.data.subscribe( (data: { groupAndTemplateData: any, groupViewData: any } ) => {
       this.staffData = data.groupAndTemplateData.staffOptions;
@@ -96,18 +96,23 @@ export class EditGroupComponent implements OnInit {
    * if successful redirects to groups.
    */
   submit() {
+    const editGroupFormData = this.editGroupForm.value;
+    const locale = this.settingsService.language.code;
+    const dateFormat = this.settingsService.dateFormat;
     const submittedOnDate: Date = this.editGroupForm.value.submittedOnDate;
     const activationDate: Date = this.editGroupForm.value.activationDate;
-    // TODO: Update once language and date settings are setup
+    if (editGroupFormData.submittedOnDate instanceof Date) {
-    const dateFormat = this.settingsService.dateFormat;
+      editGroupFormData.submittedOnDate = this.dateUtils.formatDate(submittedOnDate, dateFormat);
-    this.editGroupForm.patchValue({
+    }
-      submittedOnDate: this.datePipe.transform(submittedOnDate, dateFormat),
+    if (editGroupFormData.activationDate instanceof Date) {
-      activationDate: activationDate && this.datePipe.transform(activationDate, dateFormat)
+      editGroupFormData.activationDate = this.dateUtils.formatDate(activationDate, dateFormat);
-    });
+    }
-    const group = this.editGroupForm.value;
+    const data = {
-    group.locale = this.settingsService.language.code;
+      ...editGroupFormData,
-    group.dateFormat = dateFormat;
+      dateFormat,
-    this.groupService.updateGroup(group, this.groupData.id).subscribe((response: any) => {
+      locale
+    };
+    this.groupService.updateGroup(data, this.groupData.id).subscribe((response: any) => {
       this.router.navigate(['../'], { relativeTo: this.route });
     });
   }

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

@@ -50,7 +50,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches group Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {GroupsService} groupsService Groups Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService SettingsService

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

@@ -40,7 +40,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches group Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {GroupsService} groupsService Groups Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService SettingsService
@@ -150,7 +150,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Maps API response to data table form fields.
    * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with date pipe.
+   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
    * @param {any} dataTableEntryObject Additional data table details.
    */
   getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {

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

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { GroupsService } from 'app/groups/groups.service';
@@ -30,14 +30,14 @@ export class ActivateGroupComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {groupsService} groupsService Groups Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
               private groupsService: GroupsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -62,15 +62,15 @@ export class ActivateGroupComponent implements OnInit {
    * if successful redirects to the group.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const activateGroupFormData = this.activateGroupForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevactivationDate: Date = this.activateGroupForm.value.activationDate;
-    this.activateGroupForm.patchValue({
+    if (activateGroupFormData.activationDate instanceof Date) {
-      activationDate: this.datePipe.transform(prevactivationDate, dateFormat),
+      activateGroupFormData.activationDate = this.dateUtils.formatDate(prevactivationDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.activateGroupForm.value,
+      ...activateGroupFormData,
       dateFormat,
       locale
     };

src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.ts

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { GroupsService } from 'app/groups/groups.service';
@@ -39,14 +39,14 @@ export class AttachGroupMeetingComponent implements OnInit {
    * Fetches Calendar Template from `resolve`
    * @param {FormBuilder} formBuilder Form Builder
    * @param {GroupsService} groupsService Shares Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
               private groupsService: GroupsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -114,17 +114,17 @@ export class AttachGroupMeetingComponent implements OnInit {
    * Submits the form and attatches the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const groupMeetingFormData = this.groupMeetingForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const title = `groups_${this.groupId}_CollectionMeeting`;
     const typeId = '1';
     const prevStartDate: Date = this.groupMeetingForm.value.startDate;
-    this.groupMeetingForm.patchValue({
+    if (groupMeetingFormData.startDate instanceof Date) {
-      startDate: this.datePipe.transform(prevStartDate, dateFormat),
+      groupMeetingFormData.startDate = this.dateUtils.formatDate(prevStartDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.groupMeetingForm.value,
+      ...groupMeetingFormData,
       title,
       typeId,
       dateFormat,

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

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { GroupsService } from 'app/groups/groups.service';
@@ -32,14 +32,14 @@ export class CloseGroupComponent implements OnInit {
   /**
    * @param {FormBuilder} formBuilder Form Builder
    * @param {GroupsService} groupsService Shares Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
               private groupsService: GroupsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -67,15 +67,15 @@ export class CloseGroupComponent implements OnInit {
    * Submits the form and closes the group.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const closeGroupFormData = this.closeGroupForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const prevClosedDate: Date = this.closeGroupForm.value.closureDate;
-    this.closeGroupForm.patchValue({
+    if (closeGroupFormData.closureDate instanceof Date) {
-      closureDate: this.datePipe.transform(prevClosedDate, dateFormat),
+      closeGroupFormData.closureDate = this.dateUtils.formatDate(prevClosedDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.closeGroupForm.value,
+      ...closeGroupFormData,
       dateFormat,
       locale
     };

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

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { GroupsService } from 'app/groups/groups.service';
@@ -37,14 +37,14 @@ export class EditGroupMeetingScheduleComponent implements OnInit {
    * Fetches Calendar Template from `resolve`
    * @param {FormBuilder} formBuilder Form Builder
    * @param {GroupsService} groupsService Shares Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
               private groupsService: GroupsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -74,18 +74,20 @@ export class EditGroupMeetingScheduleComponent implements OnInit {
    * Submits the form and updates the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const groupEditMeetingScheduleFormData = this.groupEditMeetingScheduleForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const reschedulebasedOnMeetingDates = true;
     const prevOldDate: Date = new Date(this.groupEditMeetingScheduleForm.value.presentMeetingDate);
     const prevNewDate: Date = this.groupEditMeetingScheduleForm.value.newMeetingDate;
-    this.groupEditMeetingScheduleForm.patchValue({
+    if (groupEditMeetingScheduleFormData.presentMeetingDate instanceof Date) {
-      'presentMeetingDate': this.datePipe.transform(prevOldDate, dateFormat),
+      groupEditMeetingScheduleFormData.presentMeetingDate = this.dateUtils.formatDate(prevOldDate, dateFormat);
-      'newMeetingDate': this.datePipe.transform(prevNewDate, dateFormat)
+    }
-    });
+    if (groupEditMeetingScheduleFormData.newMeetingDate instanceof Date) {
+      groupEditMeetingScheduleFormData.newMeetingDate = this.dateUtils.formatDate(prevNewDate, dateFormat);
+    }
     const data = {
-      ...this.groupEditMeetingScheduleForm.value,
+      ...groupEditMeetingScheduleFormData,
       reschedulebasedOnMeetingDates,
       dateFormat,
       locale

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

@@ -1,8 +1,8 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
-import { DatePipe } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
+import { Dates } from 'app/core/utils/dates';
 
 /** Custom Services */
 import { GroupsService } from 'app/groups/groups.service';
@@ -41,14 +41,14 @@ export class EditGroupMeetingComponent implements OnInit {
    * Fetches Calendar Template from `resolve`
    * @param {FormBuilder} formBuilder Form Builder
    * @param {GroupsService} groupsService Shares Service
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {Dates} dateUtils Date Utils
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
   constructor(private formBuilder: FormBuilder,
               private groupsService: GroupsService,
-              private datePipe: DatePipe,
+              private dateUtils: Dates,
               private route: ActivatedRoute,
               private router: Router,
               private settingsService: SettingsService) {
@@ -119,17 +119,17 @@ export class EditGroupMeetingComponent implements OnInit {
    * Submits the form and updates the meeting.
    */
   submit() {
-    // TODO: Update once language and date settings are setup
+    const groupEditMeetingFormData = this.groupEditMeetingForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const title = `groups_${this.groupId}_CollectionMeeting`;
     const typeId = '1';
     const prevStartDate: Date = this.groupEditMeetingForm.value.startDate;
-    this.groupEditMeetingForm.patchValue({
+    if (groupEditMeetingFormData.startDate instanceof Date) {
-      startDate: this.datePipe.transform(prevStartDate, dateFormat),
+      groupEditMeetingFormData.startDate = this.dateUtils.formatDate(prevStartDate, dateFormat);
-    });
+    }
     const data = {
-      ...this.groupEditMeetingForm.value,
+      ...groupEditMeetingFormData,
       repeating: true,
       title,
       typeId,

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

@@ -44,7 +44,7 @@ export class GroupAttendanceComponent implements OnInit {
   /**
    * Retrieves the group members data from `resolve`.
    * @param {ActivatedRoute} route Route
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    * @param {Router} router Router
    * @param {GroupsService} groupsService Groups Service
    * @param {MatDialog} dialog Mat Dialog

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

@@ -39,7 +39,7 @@ export class ClientTrendsBarComponent implements OnInit {
    * Fetches offices data from `resolve`
    * @param {HomeService} homeService Home Service
    * @param {ActivatedRoute} route Activated Route
-   * @param {DatePipe} datePipe Date Pipe
+   * @param {DatePipe} datePipe Date Utils
    */
   constructor(private homeService: HomeService,
               private route: ActivatedRoute,

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 Pipe
+   * @param {datePipe} DatePipe 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 Pipe
+   * @param {datePipe} DatePipe Date Utils
    * @param {loansService} LoansService Loans Service
    * @param {SettingsService} settingsService Settings Service
    */

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

@@ -4,7 +4,6 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 /** Custom Services */
 import { LoansService } from '../../loans.service';
-import { DatePipe } from '@angular/common';
 
 /**
  * Loans Account Details Step
@@ -46,8 +45,7 @@ export class LoansAccountDetailsStepComponent implements OnInit {
    * @param {LoansService} loansService Loans Service.
    */
   constructor(private formBuilder: FormBuilder,
-    private loansService: LoansService,
+    private loansService: LoansService) {
-    private datePipe: DatePipe) {
     this.createLoansAccountDetailsForm();
   }
 

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

@@ -50,7 +50,7 @@ export class MultiRowComponent implements OnInit, OnChanges {
   /**
    * Fetches loan Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {LoansService} loansService Loans Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service

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

@@ -38,7 +38,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Fetches loan Id from parent route params.
    * @param {ActivatedRoute} route Activated Route.
-   * @param {DatePipe} datePipe Date Pipe.
+   * @param {DatePipe} datePipe Date Utils.
    * @param {LoansService} loansService Loans Service.
    * @param {MatDialog} dialog Mat Dialog.
    * @param {SettingsService} settingsService Settings Service
@@ -148,7 +148,7 @@ export class SingleRowComponent implements OnInit {
   /**
    * Maps API response to data table form fields.
    * @param {any} columns Data Table Columns.
-   * @param {string[]} dateTransformColumns Columns transformed with date pipe.
+   * @param {string[]} dateTransformColumns Columns transformed with Date Utils.
    * @param {any} dataTableEntryObject Additional data table details.
    */
   getFormfields(columns: any, dateTransformColumns: string[], dataTableEntryObject: any) {

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html

@@ -21,7 +21,7 @@
 
           <mat-form-field>
             <mat-label>Amount</mat-label>
-            <input type=number required matInput formControlName="amount" />
+            <input type="number" required matInput formControlName="amount" />
             <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
               Amount is <strong>required</strong>
             </mat-error>

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

@@ -98,16 +98,19 @@ export class AddLoanChargeComponent implements OnInit {
   }
 
   submit() {
-    const prevDueDate: Date = this.loanChargeForm.value.dueDate;
+    const loanChargeFormData = this.loanChargeForm.value;
-    // TODO: Update once language and date settings are setup
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.loanChargeForm.patchValue({
+    const prevDueDate: Date = this.loanChargeForm.value.dueDate;
-      dueDate: this.dateUtils.formatDate(prevDueDate, dateFormat)
+    if (loanChargeFormData.dueDate instanceof Date) {
-    });
+      loanChargeFormData.dueDate = this.dateUtils.formatDate(prevDueDate, dateFormat);
-    const loanCharge = this.loanChargeForm.value;
+    }
-    loanCharge.locale = this.settingsService.language.code;
+    const data = {
-    loanCharge.dateFormat = dateFormat;
+      ...loanChargeFormData,
-    this.loansService.createLoanCharge(this.loanId, 'charges', loanCharge).subscribe(res => {
+      dateFormat,
+      locale
+    };
+    this.loansService.createLoanCharge(this.loanId, 'charges', data).subscribe(res => {
       this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }

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

@@ -34,7 +34,7 @@
 
           <mat-form-field>
             <mat-label>Transaction Amount</mat-label>
-            <input matInput type="number" required formControlName="approvedLoanAmount" required>
+            <input matInput type="number" required formControlName="approvedLoanAmount">
             <mat-error *ngIf="approveLoanForm.controls.approvedLoanAmount.hasError('required')">
               Transaction Amount is <strong>required</strong>
             </mat-error>

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 Pipe.
+   * @param datePipe Date Utils.
    * @param loanService Loan Service.
    * @param router Router.
    * @param {SettingsService} settingsService Settings Service
@@ -76,20 +76,23 @@ export class ApproveLoanComponent implements OnInit {
    * Submits Approve form.
    */
   submit() {
+    const approveLoanFormData = this.approveLoanForm.value;
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
     const approvedOnDate = this.approveLoanForm.value.approvedOnDate;
     const expectedDisbursementDate = this.approveLoanForm.value.expectedDisbursementDate;
-    this.approveLoanForm.patchValue({
+    if (approveLoanFormData.approvedOnDate instanceof Date) {
-      approvedOnDate: this.dateUtils.formatDate(approvedOnDate, dateFormat),
+      approveLoanFormData.approvedOnDate = this.dateUtils.formatDate(approvedOnDate, dateFormat);
-      expectedDisbursementDate: this.dateUtils.formatDate(expectedDisbursementDate, dateFormat)
+    }
-    });
+    if (approveLoanFormData.expectedDisbursementDate instanceof Date) {
-    const approveLoanFormData = {
+      approveLoanFormData.expectedDisbursementDate = this.dateUtils.formatDate(expectedDisbursementDate, dateFormat);
-      ... this.approveLoanForm.value,
+    }
+    const data = {
+      ...approveLoanFormData,
       dateFormat,
       locale
     };
-    this.loanService.loanActionButtons(this.loanId, 'approve', approveLoanFormData).subscribe((response: any) => {
+    this.loanService.loanActionButtons(this.loanId, 'approve', data).subscribe((response: any) => {
       this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }

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

@@ -60,17 +60,20 @@ export class AssignLoanOfficerComponent implements OnInit {
   }
 
   submit() {
-    const assignmentDate = this.assignOfficerForm.value.assignmentDate;
+    const assignOfficerFormData = this.assignOfficerForm.value;
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.assignOfficerForm.patchValue({
+    const assignmentDate = this.assignOfficerForm.value.assignmentDate;
-      assignmentDate: this.dateUtils.formatDate(assignmentDate, dateFormat)
+    if (assignOfficerFormData.assignmentDate instanceof Date) {
-    });
+      assignOfficerFormData.assignmentDate = this.dateUtils.formatDate(assignmentDate, dateFormat);
-    const assignForm = this.assignOfficerForm.value;
+    }
-    assignForm.locale = this.settingsService.language.code;
+    const data = {
-    assignForm.dateFormat = dateFormat;
+      ...assignOfficerFormData,
-    assignForm.fromLoanOfficerId = this.dataObject.loanOfficerId || '';
+      dateFormat,
-
+      locale
-    this.loanService.loanActionButtons(this.loanId, 'assignLoanOfficer', assignForm)
+    };
+    data.fromLoanOfficerId = this.dataObject.loanOfficerId || '';
+    this.loanService.loanActionButtons(this.loanId, 'assignLoanOfficer', data)
       .subscribe((response: any) => {
         this.router.navigate([`../../general`], { relativeTo: this.route });
     });

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.ts

@@ -63,15 +63,19 @@ export class CloseAsRescheduledComponent implements OnInit {
    * if successful redirects to view created close.
    */
   submit() {
-    const transactionDate = this.closeLoanForm.value.transactionDate;
+    const closeLoanFormData = this.closeLoanForm.value;
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.closeLoanForm.patchValue({
+    const transactionDate = this.closeLoanForm.value.transactionDate;
-      transactionDate: this.dateUtils.formatDate(transactionDate, dateFormat)
+    if (closeLoanFormData.transactionDate instanceof Date) {
-    });
+      closeLoanFormData.transactionDate = this.dateUtils.formatDate(transactionDate, dateFormat);
-    const closeForm = this.closeLoanForm.value;
+    }
-    closeForm.locale = this.settingsService.language.code;
+    const data = {
-    closeForm.dateFormat = dateFormat;
+      ...closeLoanFormData,
-    this.loanService.submitLoanActionButton(this.loanId, closeForm, 'close-rescheduled')
+      dateFormat,
+      locale
+    };
+    this.loanService.submitLoanActionButton(this.loanId, data, 'close-rescheduled')
       .subscribe((response: any) => {
         this.router.navigate(['../../general'], { relativeTo: this.route });
     });

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html

@@ -23,7 +23,7 @@
             </mat-form-field>
 
             <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient"
-              (optionSelected)='clientSelected($event.option.value)'>
+              (optionSelected)="clientSelected($event.option.value)">
               <mat-option *ngFor="let client of clientsData" [value]="client">
                 {{ client.displayName }}
               </mat-option>
@@ -51,7 +51,7 @@
 
               <mat-form-field>
                 <mat-label>Amount</mat-label>
-                <input type="number" matInput required formControlName="amount" required>
+                <input type="number" matInput required formControlName="amount">
               </mat-form-field>
 
             </ng-container>
@@ -71,7 +71,7 @@
 
             <mat-form-field>
               <mat-label>First Name</mat-label>
-              <input matInput required formControlName="firstname" required>
+              <input matInput required formControlName="firstname">
               <mat-error *ngIf="newGuarantorForm.controls.firstname.hasError('required')">
                 First Name <strong>is required</strong>
               </mat-error>
@@ -79,7 +79,7 @@
 
             <mat-form-field>
               <mat-label>Last Name</mat-label>
-              <input matInput required formControlName="lastname" required>
+              <input matInput required formControlName="lastname">
               <mat-error *ngIf="newGuarantorForm.controls.lastname.hasError('required')">
                 Last Name <strong>is required</strong>
               </mat-error>

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

@@ -149,28 +149,31 @@ export class CreateGuarantorComponent implements OnInit, AfterViewInit {
 
   /** Submits the new guarantor details form */
   submit() {
-    const prevdob: Date = this.newGuarantorForm.value.dob;
+    const newGuarantorFormData = this.newGuarantorForm.value;
-    const guarantorTypeId: number = this.newGuarantorForm.value.existingClient ? this.dataObject.guarantorTypeOptions[0].id : this.dataObject.guarantorTypeOptions[2].id;
-    // TODO: Update once language and date settings are setup
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    const newGuarantorData = {
+
-      ... this.newGuarantorForm.value,
+    const prevdob: Date = this.newGuarantorForm.value.dob;
+    const guarantorTypeId: number = this.newGuarantorForm.value.existingClient ? this.dataObject.guarantorTypeOptions[0].id : this.dataObject.guarantorTypeOptions[2].id;
+    const data = {
+      ...newGuarantorFormData,
       locale,
+      dateFormat,
       guarantorTypeId
     };
 
     if (this.newGuarantorForm.value.existingClient) {
-      newGuarantorData['entityId'] = this.newGuarantorForm.controls.name.value.id;
+      data['entityId'] = this.newGuarantorForm.controls.name.value.id;
     } else {
-      newGuarantorData['dob'] = this.dateUtils.formatDate(prevdob, dateFormat),
+      if (newGuarantorFormData.dob instanceof Date) {
-      newGuarantorData['dateFormat'] = dateFormat;
+        data['dob'] = this.dateUtils.formatDate(prevdob, dateFormat);
+      }
     }
 
-    delete newGuarantorData.existingClient;
+    delete data.existingClient;
-    delete newGuarantorData.name;
+    delete data.name;
 
-    this.loanService.createNewGuarantor(this.loanId, newGuarantorData)
+    this.loanService.createNewGuarantor(this.loanId, data)
       .subscribe((response: any) => {
         this.router.navigate(['../../general'], { relativeTo: this.route });
       });

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

@@ -64,16 +64,20 @@ export class DisburseLoanAccountComponent implements OnInit {
    * Submit Disburse Form.
    */
   submit() {
-    const actualDisbursementDate = this.disbursementForm.value.actualDisbursementDate;
+    const disbursementLoanFormData = this.disbursementForm.value;
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.disbursementForm.patchValue({
+    const prevActualDisbursementDate: Date = this.disbursementForm.value.actualDisbursementDate;
-      actualDisbursementDate: this.dateUtils.formatDate(actualDisbursementDate, dateFormat)
+    if (disbursementLoanFormData.actualDisbursementDate instanceof Date) {
-    });
+      disbursementLoanFormData.actualDisbursementDate = this.dateUtils.formatDate(prevActualDisbursementDate, dateFormat);
+    }
+    const data = {
+      ...disbursementLoanFormData,
+      dateFormat,
+      locale
+    };
     const loanId = this.route.parent.snapshot.params['loanId'];
-    const disbursementForm = this.disbursementForm.value;
+    this.loanService.loanActionButtons(loanId, 'disbursetosavings', data).subscribe((response: any) => {
-    disbursementForm.locale = this.settingsService.language.code;
-    disbursementForm.dateFormat = dateFormat;
-    this.loanService.loanActionButtons(loanId, 'disbursetosavings', disbursementForm).subscribe((response: any) => {
       this.router.navigate(['../../general'], {relativeTo: this.route});
     });
   }

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html

@@ -38,7 +38,7 @@
 
           <div fxFlexFill>
             <span fxFlex="25%">Show Payment Details</span>
-            <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
+            <span fxFlex="75%" class="expandcollapsebutton" (click)="addPaymentDetails()">
               <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
                 <i class="fa fa-minus"></i>
               </button>

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.scss

@@ -1,4 +1,4 @@
-.expandCollapsebutton {
+.expandcollapsebutton {
     margin-top: -7px;
 }
 

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

@@ -100,16 +100,19 @@ export class DisburseComponent implements OnInit {
 
   /** Submits the disbursement form */
   submit() {
-    const prevActualDisbursementDate: Date = this.disbursementLoanForm.value.actualDisbursementDate;
+    const disbursementLoanFormData = this.disbursementLoanForm.value;
-    // TODO: Update once language and date settings are setup
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.disbursementLoanForm.patchValue({
+    const prevActualDisbursementDate: Date = this.disbursementLoanForm.value.actualDisbursementDate;
-      actualDisbursementDate: this.dateUtils.formatDate(prevActualDisbursementDate, dateFormat)
+    if (disbursementLoanFormData.actualDisbursementDate instanceof Date) {
-    });
+      disbursementLoanFormData.actualDisbursementDate = this.dateUtils.formatDate(prevActualDisbursementDate, dateFormat);
-    const disbursementLoanData = this.disbursementLoanForm.value;
+    }
-    disbursementLoanData.locale = this.settingsService.language.code;
+    const data = {
-    disbursementLoanData.dateFormat = dateFormat;
+      ...disbursementLoanFormData,
-    this.loanService.loanActionButtons(this.loanId, 'disburse', disbursementLoanData )
+      dateFormat,
+      locale
+    };
+    this.loanService.loanActionButtons(this.loanId, 'disburse', data )
       .subscribe((response: any) => {
         this.router.navigate(['../../general'], { relativeTo: this.route });
       });

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

@@ -13,8 +13,6 @@ import { Dates } from 'app/core/utils/dates';
   styleUrls: ['./foreclosure.component.scss']
 })
 export class ForeclosureComponent implements OnInit {
-
-
   loanId: any;
   foreclosureForm: FormGroup;
   /** Minimum Date allowed. */
@@ -24,7 +22,6 @@ export class ForeclosureComponent implements OnInit {
   foreclosuredata: any;
   paymentTypes: any;
 
-
   /**
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {LoansService} systemService Loan Service.
@@ -108,19 +105,20 @@ export class ForeclosureComponent implements OnInit {
   }
 
   submit() {
-    const transactionDate = this.foreclosureForm.value.transactionDate;
+    const foreclosureFormData = this.foreclosureForm.value;
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.foreclosureForm.patchValue({
+    const prevTransactionDate = this.foreclosureForm.value.transactionDate;
-      transactionDate: this.dateUtils.formatDate(transactionDate, dateFormat)
+    if (foreclosureFormData.transactionDate instanceof Date) {
-    });
+      foreclosureFormData.transactionDate = this.dateUtils.formatDate(prevTransactionDate, dateFormat);
-    const formData = {
+    }
-      transactionDate: this.foreclosureForm.value.transactionDate,
+    const data = {
-      locale: this.settingsService.language.code,
+      ...foreclosureFormData,
-      dateFormat: dateFormat,
+      dateFormat,
-      note: this.foreclosureForm.value.note
+      locale
     };
 
-    this.loanService.loanForclosureData(this.loanId, formData)
+    this.loanService.loanForclosureData(this.loanId, data)
       .subscribe((response: any) => {
         this.router.navigate([`../../general`], { relativeTo: this.route });
       });

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

@@ -66,21 +66,28 @@ export class LoanRescheduleComponent implements OnInit {
   }
 
   submit() {
-    const rescheduleFromDate = this.rescheduleLoanForm.value.rescheduleFromDate;
+    const rescheduleLoanFormData = this.rescheduleLoanForm.value;
-    const adjustedDueDate = this.rescheduleLoanForm.value.adjustedDueDate;
+    const locale = this.settingsService.language.code;
-    const submittedOnDate = this.rescheduleLoanForm.value.submittedOnDate;
     const dateFormat = this.settingsService.dateFormat;
-
+    const prevRescheduleFromDate = this.rescheduleLoanForm.value.rescheduleFromDate;
-    this.rescheduleLoanForm.patchValue({
+    const prevAdjustedDueDate = this.rescheduleLoanForm.value.adjustedDueDate;
-      rescheduleFromDate: this.dateUtils.formatDate(rescheduleFromDate, dateFormat),
+    const prevSubmittedOnDate = this.rescheduleLoanForm.value.submittedOnDate;
-      adjustedDueDate: this.dateUtils.formatDate(adjustedDueDate, dateFormat),
+    if (rescheduleLoanFormData.rescheduleFromDate instanceof Date) {
-      submittedOnDate: this.dateUtils.formatDate(submittedOnDate, dateFormat)
+      rescheduleLoanFormData.rescheduleFromDate = this.dateUtils.formatDate(prevRescheduleFromDate, dateFormat);
-    });
+    }
-    const rescheduleForm = this.rescheduleLoanForm.value;
+    if (rescheduleLoanFormData.rescheduleFromDate instanceof Date) {
-    rescheduleForm.locale = this.settingsService.language.code;
+      rescheduleLoanFormData.adjustedDueDate = this.dateUtils.formatDate(prevAdjustedDueDate, dateFormat);
-    rescheduleForm.dateFormat = dateFormat;
+    }
-    rescheduleForm.loanId = this.loanId;
+    if (rescheduleLoanFormData.rescheduleFromDate instanceof Date) {
-    this.loanService.submitRescheduleData(rescheduleForm).subscribe((response: any) => {
+      rescheduleLoanFormData.submittedOnDate = this.dateUtils.formatDate(prevSubmittedOnDate, dateFormat);
+    }
+    const data = {
+      ...rescheduleLoanFormData,
+      dateFormat,
+      locale
+    };
+    data.loanId = this.loanId;
+    this.loanService.submitRescheduleData(data).subscribe((response: any) => {
 
       // TODO: needs to be updated
       // mentioned in Community App:

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

@@ -64,15 +64,19 @@ export class LoansAccountCloseComponent implements OnInit {
    * if successful redirects to view created close.
    */
   submit() {
-    const transactionDate = this.closeLoanForm.value.transactionDate;
+    const closeLoanFormData = this.closeLoanForm.value;
+    const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    this.closeLoanForm.patchValue({
+    const preTransactionDate = this.closeLoanForm.value.transactionDate;
-      transactionDate: this.dateUtils.formatDate(transactionDate, dateFormat)
+    if (closeLoanFormData.transactionDate instanceof Date) {
-    });
+      closeLoanFormData.transactionDate = this.dateUtils.formatDate(preTransactionDate, dateFormat);
-    const closeForm = this.closeLoanForm.value;
+    }
-    closeForm.locale = this.settingsService.language.code;
+    const data = {
-    closeForm.dateFormat = dateFormat;
+      ...closeLoanFormData,
-    this.loanService.submitLoanActionButton(this.loanId, closeForm, 'close')
+      dateFormat,
+      locale
+    };
+    this.loanService.submitLoanActionButton(this.loanId, data, 'close')
       .subscribe((response: any) => {
         this.router.navigate(['../../general'], { relativeTo: this.route });
     });

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -38,7 +38,7 @@
 
           <div fxFlexFill>
             <span fxFlex="25%">Show Payment Details</span>
-            <span fxFlex="75%" class="expandCollapsebutton" (click)="addPaymentDetails()">
+            <span fxFlex="75%" class="expandcollapsebutton" (click)="addPaymentDetails()">
               <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
                 <i class="fa fa-minus"></i>
               </button>

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.scss

@@ -1,4 +1,4 @@
-.expandCollapsebutton {
+.expandcollapsebutton {
     margin-top: -7px;
 }