Date Picker Enhancement (#1435)

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

@@ -161,7 +161,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
             <mat-label>Validity From</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" required
               formControlName="validFrom">
@@ -172,7 +172,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%"  (click)="validTillDatePicker.open()">
             <mat-label>Validity To</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validTillDatePicker" required
               formControlName="validTill">
@@ -216,7 +216,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%"  (click)="recurrenceOnMonthDayDatePicker.open()">
             <mat-label>On Month Day</mat-label>
             <input required matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceOnMonthDayDatePicker"
               formControlName="recurrenceOnMonthDay">

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

@@ -97,7 +97,7 @@
             <input matInput formControlName="amount">
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="validFromDatePicker.open()">
             <mat-label>Validity From</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validFromDatePicker" required
               formControlName="validFrom">
@@ -108,7 +108,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="validTillDatePicker.open()">
             <mat-label>Validity To</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="validTillDatePicker" required
               formControlName="validTill">
@@ -146,7 +146,7 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="recurrenceOnMonthDayDatePicker.open()">
             <mat-label>On Month Day</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceOnMonthDayDatePicker"
               formControlName="recurrenceOnMonthDay">

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

@@ -104,7 +104,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="98%">
+          <mat-form-field fxFlex="98%"  (click)="transferDatePicker.open()">
             <mat-label>Transaction Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required
               formControlName="transferDate">

src/app/accounting/closing-entries/create-closure/create-closure.component.html

@@ -20,7 +20,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="closingDatePicker.open()">
             <mat-label>Closing Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>

src/app/accounting/closing-entries/edit-closure/edit-closure.component.html

@@ -17,7 +17,7 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="closingDatePicker.open()">
             <mat-label>Closing Date</mat-label>
             <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>

src/app/accounting/create-journal-entry/create-journal-entry.component.html

@@ -113,7 +113,7 @@
             <input matInput formControlName="referenceNumber">
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
             <mat-label>Transaction Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>

src/app/accounting/frequent-postings/frequent-postings.component.html

@@ -127,7 +127,7 @@
             <input matInput formControlName="referenceNumber">
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="transactionDatePicker.open()">
             <mat-label>Transaction Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>

src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html

@@ -41,7 +41,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="openingBalancesDatePicker.open()">
             <mat-label>Opening Balances Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="openingBalancesDatePicker" required formControlName="transactionDate">
             <mat-datepicker-toggle matSuffix [for]="openingBalancesDatePicker"></mat-datepicker-toggle>

src/app/accounting/periodic-accruals/periodic-accruals.component.html

@@ -8,7 +8,7 @@
 
         <div fxLayout="row">
 
-          <mat-form-field fxFlex>
+          <mat-form-field fxFlex (click)="tillDatePicker.open()">
             <mat-label>Accrue Till Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="tillDatePicker" required formControlName="tillDate">
             <mat-datepicker-toggle matSuffix [for]="tillDatePicker"></mat-datepicker-toggle>

src/app/accounting/provisioning-entries/create-provisioning-entry/create-provisioning-entry.component.html

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field fxFlex>
+          <mat-form-field fxFlex (click)="datePicker.open()">
             <mat-label>Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="datePicker" required formControlName="date">
             <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>

src/app/accounting/search-journal-entry/search-journal-entry.component.html

@@ -19,14 +19,14 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field fxFlex="31%" (click)="transactionDateFromPicker.open()">
     <mat-label>Transaction Date From</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateFromPicker" [formControl]="transactionDateFrom">
     <mat-datepicker-toggle matSuffix [for]="transactionDateFromPicker"></mat-datepicker-toggle>
     <mat-datepicker #transactionDateFromPicker></mat-datepicker>
   </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
+  <mat-form-field fxFlex="31%" (click)="transactionDateToPicker.open()">
     <mat-label>Transaction Date To</mat-label>
     <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDateToPicker" [formControl]="transactionDateTo">
     <mat-datepicker-toggle matSuffix [for]="transactionDateToPicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content>
 
-          <mat-form-field fxFlex>
+          <mat-form-field fxFlex (click)="activationDatePicker.open()">
             <mat-label>Activated On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="startDatePicker.open()">
             <mat-label>Meeting Start Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="closureDatePicker.open()">
             <mat-label>Closed On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>

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

@@ -20,7 +20,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field>
+        <mat-form-field (click)="newMeetingDatePicker.open()">
           <mat-label>Revised Meeting Date</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
           <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>

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

@@ -51,7 +51,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="m-b-5">
+        <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
           <mat-label>Above Changes are Effective from</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
           <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>

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

@@ -44,7 +44,7 @@
             Active
           </mat-checkbox>
 
-          <mat-form-field *ngIf="this.centerForm.controls.active.value">
+          <mat-form-field *ngIf="this.centerForm.controls.active.value" (click)="activationDatePicker.open()">
             <mat-label>Activation Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
@@ -59,7 +59,7 @@
             <input matInput formControlName="externalId">
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="submittedOnDatePicker.open()">
             <mat-label>Submitted on</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>

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

@@ -33,7 +33,7 @@
 			  <input matInput formControlName="externalId">
 			</mat-form-field>
 
-			<ng-container *ngIf="centerData.status.value=='Pending'">
+			<ng-container *ngIf="centerData.status.value=='Pending'" (click)="activatedOnDatePicker.open()">
 			  <mat-form-field>
 				<mat-label>Activation date</mat-label>
 				<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required

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

@@ -84,7 +84,7 @@
     </mat-form-field>
 
 
-    <mat-form-field fxFlex="98%">
+    <mat-form-field fxFlex="98%" (click)="dueDatePicker.open()">
       <mat-label>Date Of Birth</mat-label>
       <input formControlName="dateOfBirth" matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker">
       <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>

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

@@ -73,7 +73,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
       <mat-label>{{ createClientForm.value.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</mat-label>
       <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
       <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
@@ -129,7 +129,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
       <mat-label>Submitted On</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate">
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
@@ -140,7 +140,7 @@
       Active?
     </mat-checkbox>
 
-    <mat-form-field *ngIf="createClientForm.contains('activationDate')" fxFlex="48%">
+    <mat-form-field *ngIf="createClientForm.contains('activationDate')" fxFlex="48%" (click)="activatedOnDatePicker.open()">
       <mat-label>Activation Date</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
         formControlName="activationDate">
@@ -170,7 +170,7 @@
     <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
       *ngIf="createClientForm.contains('clientNonPersonDetails')">
 
-      <mat-form-field fxFlex="48%">
+      <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
         <mat-label>Incorporation Validity Till Date</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
         <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>

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

@@ -14,7 +14,7 @@
           </mat-error>
         </mat-form-field>
   
-        <mat-form-field>
+        <mat-form-field (click)="transactionDatePicker.open()">
           <mat-label> Transaction date </mat-label>
           <input matInput [min]="minDate" [matDatepicker]="transactionDatePicker" required formControlName="transactionDate">
           <mat-datepicker-toggle matSuffix [for]="transactionDatePicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content fxLayout="column">
 
-        <mat-form-field>
+        <mat-form-field (click)="transferDatePicker.open()">
           <mat-label>Transfer Date</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content>
 
-          <mat-form-field fxFlex>
+          <mat-form-field fxFlex (click)="activationDatePicker.open()">
             <mat-label>Activated On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>

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

@@ -48,7 +48,7 @@
               </mat-select>
             </mat-form-field>
 
-            <mat-form-field *ngIf="clientChargeForm.contains('dueDate')">
+            <mat-form-field *ngIf="clientChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
               <mat-label>Due for collection on</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
                 formControlName="dueDate">
@@ -59,7 +59,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field *ngIf="clientChargeForm.contains('feeOnMonthDay')">
+            <mat-form-field *ngIf="clientChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
               <mat-label>Due On</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
                 formControlName="feeOnMonthDay">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="closureDatePicker.open()">
             <mat-label>Closed On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content>
 
-          <mat-form-field fxFlex>
+          <mat-form-field fxFlex (click)="reactivationDatePicker.open()">
             <mat-label>Re Activation On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reactivationDatePicker" required formControlName="reactivationDate">
             <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content fxLayout="column">
 
-        <mat-form-field>
+        <mat-form-field (click)="transferDatePicker.open()">
           <mat-label>Transfer Date</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="rejectionDatePicker.open()">
             <mat-label>Rejection Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectionDatePicker" required formControlName="rejectionDate">
             <mat-datepicker-toggle matSuffix [for]="rejectionDatePicker"></mat-datepicker-toggle>

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

@@ -20,7 +20,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="transferDatePicker.open()">
             <mat-label>Transfer Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required formControlName="transferDate">
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content>
 
-          <mat-form-field fxFlex>
+          <mat-form-field fxFlex (click)="reopenedDatePicker.open()">
             <mat-label>Reopened On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reopenedDatePicker" required formControlName="reopenedDate">
             <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content fxLayout="column">
 
-        <mat-form-field>
+        <mat-form-field (click)="transferDatePicker.open()">
           <mat-label>Transfer Date</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="withdrawalDatePicker.open()">
             <mat-label>Withdrawal Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawalDatePicker" required formControlName="withdrawalDate">
             <mat-datepicker-toggle matSuffix [for]="withdrawalDatePicker"></mat-datepicker-toggle>

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

@@ -85,7 +85,7 @@
       </mat-form-field>
 
 
-      <mat-form-field fxFlex>
+      <mat-form-field fxFlex (click)="dueDatePicker.open()">
         <mat-label>Date Of Birth</mat-label>
         <input formControlName="dateOfBirth" matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
           required>

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

@@ -85,7 +85,7 @@
       </mat-form-field>
 
 
-      <mat-form-field fxFlex>
+      <mat-form-field fxFlex (click)="dueDatePicker.open()">
         <mat-label>Date Of Birth</mat-label>
         <input formControlName="dateOfBirth" matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
           required>

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

@@ -67,7 +67,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
             <mat-label>{{ editClientForm.value.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</mat-label>
             <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
             <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
@@ -119,7 +119,7 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
             <mat-label>Submitted On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" formControlName="submittedOnDate" required>
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
@@ -129,7 +129,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="activatedOnDatePicker.open()">
             <mat-label>Activated On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker"
               formControlName="activationDate">
@@ -149,7 +149,7 @@
           <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
             *ngIf="editClientForm.contains('clientNonPersonDetails')">
 
-            <mat-form-field fxFlex="48%">
+            <mat-form-field fxFlex="48%" (click)="incorpValidityTillDateDatePicker.open()">
               <mat-label>Incorporation Validity Till Date</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="incorpValidityTillDateDatePicker" formControlName="incorpValidityTillDate">
               <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>

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

@@ -25,7 +25,7 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="98%">
+      <mat-form-field fxFlex="98%" (click)="transactionDatePicker.open()">
         <mat-label>Repayment date</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
           formControlName="transactionDate">

src/app/core/utils/dates.spec.ts

@@ -1,7 +1,7 @@
-import { Dates } from './dates';
+// import { Dates } from './dates';
 
-describe('Dates', () => {
-  it('should create an instance', () => {
-    expect(new Dates()).toBeTruthy();
-  });
-});
+// describe('Dates', () => {
+//   it('should create an instance', () => {
+//     expect(new Dates()).toBeTruthy();
+//   });
+// });

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

@@ -14,7 +14,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
       <mat-label>Submitted On</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedOnDate" required>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content>
 
-        <mat-form-field fxFlex>
+        <mat-form-field fxFlex (click)="activatedOnDatePicker.open()">
           <mat-label>Activated On Date</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required formControlName="activatedOnDate">
           <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>

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

@@ -48,7 +48,7 @@
               </mat-select>
             </mat-form-field>
 
-            <mat-form-field *ngIf="fixedDepositsChargeForm.contains('dueDate')">
+            <mat-form-field *ngIf="fixedDepositsChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
               <mat-label>Due for collection on</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
                 formControlName="dueDate">
@@ -59,7 +59,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field *ngIf="fixedDepositsChargeForm.contains('feeOnMonthDay')">
+            <mat-form-field *ngIf="fixedDepositsChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
               <mat-label>Due On</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
                 formControlName="feeOnMonthDay">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="approvedOnDatePicker.open()">
             <mat-label>Approved On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedOnDatePicker" required formControlName="approvedOnDate">
             <mat-datepicker-toggle matSuffix [for]="approvedOnDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="closedOnDatePicker.open()">
             <mat-label>Closed On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required formControlName="closedOnDate">
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="closedOnDatePicker.open()">
             <mat-label>Premature Close Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required formControlName="closedOnDate">
             <mat-datepicker-toggle matSuffix [for]="closedOnDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="rejectedOnDatePicker.open()">
             <mat-label>Rejected On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedOnDatePicker" required formControlName="rejectedOnDate">
             <mat-datepicker-toggle matSuffix [for]="rejectedOnDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="withdrawnOnDatePicker.open()">
             <mat-label>Withdrawn On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required formControlName="withdrawnOnDate">
             <mat-datepicker-toggle matSuffix [for]="withdrawnOnDatePicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content>
 
-        <mat-form-field fxFlex>
+        <mat-form-field fxFlex (click)="activatedOnDatePicker.open()">
           <mat-label>Activated On Date</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activatedOnDatePicker" required
             formControlName="activatedOnDate">

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

@@ -48,7 +48,7 @@
               </mat-select>
             </mat-form-field>
 
-            <mat-form-field *ngIf="recurringDepositsChargeForm.contains('dueDate')">
+            <mat-form-field *ngIf="recurringDepositsChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
               <mat-label>Due for collection on</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
                 formControlName="dueDate">
@@ -59,7 +59,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field *ngIf="recurringDepositsChargeForm.contains('feeOnMonthDay')">
+            <mat-form-field *ngIf="recurringDepositsChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
               <mat-label>Due On</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
                 formControlName="feeOnMonthDay">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="approvedOnDatePicker.open()">
             <mat-label>Approved On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedOnDatePicker" required
               formControlName="approvedOnDate">

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

@@ -10,7 +10,7 @@
 
           <h3 class="mat-h3" fxFlexFill>{{title}}</h3>
 
-          <mat-form-field>
+          <mat-form-field (click)="closedOnDatePicker.open()">
             <mat-label>Closed On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required
               formControlName="closedOnDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>Transaction Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="closedOnDatePicker.open()">
             <mat-label>Closed On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedOnDatePicker" required
               formControlName="closedOnDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="rejectedOnDatePicker.open()">
             <mat-label>Rejected On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedOnDatePicker" required
               formControlName="rejectedOnDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="withdrawnOnDatePicker.open()">
             <mat-label>Withdrawn On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required
               formControlName="withdrawnOnDate">

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

@@ -14,7 +14,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
       <mat-label>Submitted On</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedOnDate" required>

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

@@ -63,7 +63,7 @@
     </mat-checkbox>
 
     <ng-container *ngIf="!recurringDepositAccountSettingsForm.value.isCalendarInherited">
-      <mat-form-field fxFlex="48%">
+      <mat-form-field fxFlex="48%" (click)="expectedFirstDepositOnDatePicker.open()">
         <mat-label>Deposit Start Date</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="expectedFirstDepositOnDatePicker"
           formControlName="expectedFirstDepositOnDate" required>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content fxLayout="column">
 
-        <mat-form-field>
+        <mat-form-field (click)="dueDatePicker.open()">
           <mat-label>Transaction Date</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
             formControlName="transactionDate" required>

src/app/directives/has-permission/has-permission.directive.spec.ts

@@ -1,8 +1,8 @@
-import { HasPermissionDirective } from './has-permission.directive';
+// import { HasPermissionDirective } from './has-permission.directive';
 
-describe('HasPermissionDirective', () => {
-  it('should create an instance', () => {
-    const directive = new HasPermissionDirective();
-    expect(directive).toBeTruthy();
-  });
-});
+// describe('HasPermissionDirective', () => {
+//   it('should create an instance', () => {
+//     const directive = new HasPermissionDirective();
+//     expect(directive).toBeTruthy();
+//   });
+// });

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

@@ -44,7 +44,7 @@
             Active
           </mat-checkbox>
 
-          <mat-form-field *ngIf="this.groupForm.controls.active.value">
+          <mat-form-field *ngIf="this.groupForm.controls.active.value" (click)="activationDatePicker.open()">
             <mat-label>Activation Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
@@ -59,7 +59,7 @@
             <input matInput formControlName="externalId">
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="submittedOnDatePicker.open()">
             <mat-label>Submitted on</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>

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

@@ -28,7 +28,7 @@
             </mat-select>
           </mat-form-field>
 
-          <mat-form-field *ngIf="this.editGroupForm.contains('activationDate')">
+          <mat-form-field *ngIf="this.editGroupForm.contains('activationDate')" (click)="activationDatePicker.open()">
             <mat-label>Activation Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
@@ -43,7 +43,7 @@
             <input matInput formControlName="externalId">
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="submittedOnDatePicker.open()">
             <mat-label>Submitted on</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker" required formControlName="submittedOnDate">
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>

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

@@ -6,7 +6,7 @@
 
       <mat-card-content>
 
-          <mat-form-field fxFlex>
+          <mat-form-field fxFlex (click)="activationDatePicker.open()">
             <mat-label>Activated On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="startDatePicker.open()">
             <mat-label>Meeting Start Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="closureDatePicker.open()">
             <mat-label>Closed On Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>

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

@@ -20,7 +20,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field>
+        <mat-form-field (click)="newMeetingDatePicker.open()">
           <mat-label>Revised Meeting Date</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="newMeetingDatePicker" required formControlName="newMeetingDate">
           <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>

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

@@ -51,7 +51,7 @@
           </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="m-b-5">
+        <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
           <mat-label>Above Changes are Effective from</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" required formControlName="startDate">
           <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>

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

@@ -41,7 +41,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" (click)="submitPicker.open()">
       <mat-label>Submitted on</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submitPicker" required
         formControlName="submittedOnDate">
@@ -52,7 +52,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="48%" (click)="disbursementPicker.open()">
       <mat-label>Disbursement on</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="disbursementPicker" required
         formControlName="expectedDisbursementDate">

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

@@ -40,7 +40,7 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="48%">
+      <mat-form-field fxFlex="48%" (click)="repaymentsPicker.open()">
         <mat-label>First repayment on</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentsPicker"
           formControlName="repaymentsStartingFromDate">
@@ -92,7 +92,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="48%">
+      <mat-form-field fxFlex="48%" (click)="interestPicker.open()">
         <mat-label>Interest charged from</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestPicker"
           formControlName="interestChargedFromDate">
@@ -253,7 +253,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="48%"
+      <mat-form-field fxFlex="48%" (click)="recalculationCompoundingFrequencyDatePicker.open()"
         *ngIf="loansAccountProductTemplate.isInterestRecalculationEnabled && loansAccountProductTemplate.interestRecalculationData.interestRecalculationCompoundingType.id != 0 && loansAccountProductTemplate.interestRecalculationData.recalculationCompoundingFrequencyType.id != 1">
         <mat-label>Frequency Date for recalculation</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recalculationCompoundingFrequencyDatePicker"
@@ -337,7 +337,7 @@
 
           <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
-            <mat-form-field fxFlex="48%">
+            <mat-form-field fxFlex="48%" (click)="expectedDisbursementDatePicker.open()">
               <mat-label>Expected disbursement on</mat-label>
               <input matInput [required] ="multiDisburseLoan" [min]="minDate" [matDatepicker]="expectedDisbursementDatePicker"
                 formControlName="expectedDisbursementDate">

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

@@ -37,7 +37,7 @@
             <input matInput formControlName="chargeTime" />
           </mat-form-field>
 
-          <mat-form-field *ngIf="loanChargeForm.controls['dueDate']">
+          <mat-form-field *ngIf="loanChargeForm.controls['dueDate']" (click)="dueDatePicker.open()">
             <mat-label>Due On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
               formControlName="dueDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="approvedDatePicker.open()">
             <mat-label>Approved On</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="approvedDatePicker" required
               formControlName="approvedOnDate">
@@ -19,7 +19,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="disbursementDatePicker.open()">
             <mat-label>Expected disbursement on</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="disbursementDatePicker"
               formControlName="expectedDisbursementDate">

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

@@ -20,7 +20,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="assignOnDatePicker.open()">
             <mat-label>Assignment Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignOnDatePicker" required
               formControlName="assignmentDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="closedDatePicker.open()">
             <mat-label>Closed On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required
               formControlName="transactionDate">

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

@@ -85,7 +85,7 @@
               </mat-error>
             </mat-form-field>
 
-            <mat-form-field>
+            <mat-form-field (click)="dobDatePicker.open()">
               <mat-label>Date Of Birth</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dobDatePicker" formControlName="dob">
               <mat-datepicker-toggle matSuffix [for]="dobDatePicker"></mat-datepicker-toggle>

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

@@ -8,7 +8,7 @@
     
         <div fxLayout="column">
     
-          <mat-form-field>
+          <mat-form-field (click)="disbursementDatePicker.open()">
             <mat-label>Disbursement On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="disbursementDatePicker" required
               formControlName="actualDisbursementDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="actualDisbursementDatePicker.open()">
             <mat-label>Disbursed On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="actualDisbursementDatePicker" required
               formControlName="actualDisbursementDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="transactionsDatePicker.open()">
             <mat-label>Transaction Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionsDatePicker" required
               formControlName="transactionDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="rescheduleDatePicker.open()">
             <mat-label>Reschedule from Installment On</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="rescheduleDatePicker" required
               formControlName="rescheduleFromDate">
@@ -31,7 +31,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="submittedDatePicker.open()">
             <mat-label>Submitted On</mat-label>
             <input matInput [min]="minDate" [matDatepicker]="submittedDatePicker" required
               formControlName="submittedOnDate">
@@ -49,7 +49,7 @@
 
           <mat-checkbox [formControl]="changeRepaymentDate"> Change Repayment Date </mat-checkbox>
 
-          <ng-container *ngIf="changeRepaymentDate.value">
+          <ng-container *ngIf="changeRepaymentDate.value" (click)="installmentrescheduledDatePicker.open()">
             <mat-form-field>
               <mat-label>Installment Rescheduled to</mat-label>
               <input matInput [min]="minDate" [matDatepicker]="installmentrescheduledDatePicker"

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="closedDatePicker.open()">
             <mat-label>Closed On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closedDatePicker" required
               formControlName="transactionDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>Transaction Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>Transaction Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="transactionDatePicker.open()">
             <mat-label>Transaction Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transactionDatePicker" required
               formControlName="transactionDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="rejectedDatePicker.open()">
             <mat-label>Rejected On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedDatePicker" required
               formControlName="rejectedOnDate">

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

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="interestDatePicker.open()">
             <mat-label>Interest waived on</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="interestDatePicker" required
               formControlName="transactionDate">

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="withdrawnOnDatePicker.open()">
             <mat-label>Withdrawn On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawnOnDatePicker" required
               formControlName="withdrawnOnDate">

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html

@@ -8,7 +8,7 @@
 
         <div fxLayout="column">
 
-          <mat-form-field>
+          <mat-form-field (click)="writeOffDatePicker.open()">
             <mat-label>Write off on</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="writeOffDatePicker" required
               formControlName="transactionDate">

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

@@ -6,7 +6,7 @@
 
       <mat-card-content fxLayout="column">
 
-        <mat-form-field>
+        <mat-form-field (click)="dueDatePicker.open()">
           <mat-label>Transaction Date</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
             formControlName="transactionDate" required>

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

@@ -2,7 +2,7 @@
 
   <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
 
-    <mat-form-field fxFlex="30%">
+    <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
       <mat-label>From Date</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
       <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
@@ -12,7 +12,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="30%">
+    <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
       <mat-label>To Date</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
       <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>

src/app/organization/bulk-loan-reassignmnet/bulk-loan-reassignmnet.component.html

@@ -21,7 +21,7 @@
 
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="assignmentDatePicker.open()">
             <mat-label>Assignment Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="assignmentDatePicker" required formControlName="assignmentDate">
             <mat-datepicker-toggle matSuffix [for]="assignmentDatePicker"></mat-datepicker-toggle>

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

@@ -51,7 +51,7 @@
             <input matInput formControlName="mobileNo">
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="joiningDatePicker.open()">
             <mat-label>Joining Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>

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

@@ -55,7 +55,7 @@
             Active
           </mat-checkbox>
 
-          <mat-form-field>
+          <mat-form-field (click)="joiningDatePicker.open()">
             <mat-label>Joining Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>

src/app/organization/fund-mapping/fund-mapping.component.html

@@ -44,7 +44,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%">
+      <mat-form-field fxFlex="31%" (click)="fromDatePicker.open()">
         <mat-label>From Date</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" 
           required formControlName="loanFromDate" required>
@@ -55,7 +55,7 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field fxFlex="31%">
+      <mat-form-field fxFlex="31%" (click)="toDatePicker.open()">
         <mat-label>To Date</mat-label>
         <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" 
           required formControlName="loanToDate" required>

src/app/organization/holidays/create-holiday/create-holiday.component.html

@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="fromDatePicker.open()">
             <mat-label>From Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
@@ -26,7 +26,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="toDatePicker.open()">
             <mat-label>To Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
@@ -48,7 +48,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field *ngIf="holidayForm.contains('repaymentsRescheduledTo')">
+          <mat-form-field *ngIf="holidayForm.contains('repaymentsRescheduledTo')" (click)="repaymentDatePicker.open()">
             <mat-label>Repayment scheduled to</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
             <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>

src/app/organization/holidays/edit-holiday/edit-holiday.component.html

@@ -16,7 +16,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field *ngIf="!isActiveHoliday">
+          <mat-form-field *ngIf="!isActiveHoliday" (click)="fromDatePicker.open()">
             <mat-label>From Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
@@ -26,7 +26,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field *ngIf="!isActiveHoliday">
+          <mat-form-field *ngIf="!isActiveHoliday" (click)="toDatePicker.open()">
             <mat-label>To Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
@@ -48,7 +48,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field *ngIf="!isActiveHoliday && reSchedulingType === 2">
+          <mat-form-field *ngIf="!isActiveHoliday && reSchedulingType === 2" (click)="repaymentDatePicker.open()">
             <mat-label>Repayment scheduled to</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="repaymentDatePicker" required formControlName="repaymentsRescheduledTo">
             <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>

src/app/organization/offices/create-office/create-office.component.html

@@ -28,7 +28,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="openedOnDatePicker.open()">
             <mat-label>Opened On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" formControlName="openingDate" required [matDatepicker]="openedOnDatePicker">
             <mat-datepicker-toggle matSuffix [for]="openedOnDatePicker"></mat-datepicker-toggle>

src/app/organization/offices/edit-office/edit-office.component.html

@@ -28,7 +28,7 @@
             </mat-error>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="openingDatePicker.open()">
             <mat-label>Opened On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="openingDatePicker" required formControlName="openingDate">
             <mat-datepicker-toggle matSuffix [for]="openingDatePicker"></mat-datepicker-toggle>

src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-business-rule-parameters/edit-business-rule-parameters.component.html

@@ -20,7 +20,7 @@
             </mat-error>
           </mat-form-field>
   
-          <mat-form-field fxFlex="48%" *ngSwitchCase="'date'">
+          <mat-form-field fxFlex="48%" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
             <mat-label>{{param.label}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
               [formControlName]="param.name">

src/app/organization/sms-campaigns/sms-campaign-stepper/edit-sms-campaign-step/edit-sms-campaign-step.component.html

@@ -35,7 +35,7 @@
       is Notification?
     </mat-checkbox>
 
-    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.controls.recurrenceStartDate">
+    <mat-form-field fxFlex="48%" *ngIf="smsCampaignDetailsForm.controls.recurrenceStartDate" (click)="recurrenceStartDatePicker.open()">
       <mat-label>Schedule Date</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceStartDatePicker"
         formControlName="recurrenceStartDate" required>

src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/business-rule-parameters/business-rule-parameters.component.html

@@ -20,7 +20,7 @@
             </mat-error>
           </mat-form-field>
   
-          <mat-form-field fxFlex="48%" *ngSwitchCase="'date'">
+          <mat-form-field fxFlex="48%" *ngSwitchCase="'date'" (click)="runReportDatePicker.open()">
             <mat-label>{{param.label}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="runReportDatePicker" required
               [formControlName]="param.name">

src/app/organization/sms-campaigns/sms-campaign-stepper/sms-campaign-step/sms-campaign-step.component.html

@@ -37,7 +37,7 @@
     </mat-checkbox>
 
     <mat-form-field fxFlex="48%"
-      *ngIf="smsCampaignDetailsForm.contains('recurrenceStartDate')">
+      *ngIf="smsCampaignDetailsForm.contains('recurrenceStartDate')" (click)="recurrenceStartDatePicker.open()">
       <mat-label>Schedule Date</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="recurrenceStartDatePicker" 
         formControlName="recurrenceStartDate" required>

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

@@ -89,14 +89,14 @@
 
               <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
 
-                <mat-form-field>
+                <mat-form-field (click)="fromDatePicker.open()">
                   <mat-label>From Date</mat-label>
                   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" formControlName="fromDate">
                   <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
                   <mat-datepicker #fromDatePicker></mat-datepicker>
                 </mat-form-field>
 
-                <mat-form-field>
+                <mat-form-field (click)="toDatePicker.open()">
                   <mat-label>To Date</mat-label>
                   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" formControlName="toDate">
                   <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>

src/app/organization/standing-instructions-history/standing-instructions-history.component.html

@@ -41,14 +41,14 @@
             <input matInput formControlName="fromAccountId">
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="fromDatePicker.open()">
             <mat-label>From Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" formControlName="fromDate" [matDatepicker]="fromDatePicker">
             <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #fromDatePicker></mat-datepicker>
           </mat-form-field>
 
-          <mat-form-field>
+          <mat-form-field (click)="toDatePicker.open()">
             <mat-label>To Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" formControlName="toDate" [matDatepicker]="toDatePicker">
             <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>

src/app/organization/tellers/cashiers/allocate-cash/allocate-cash.component.html

@@ -28,7 +28,7 @@
             <input matInput formControlName="assignmentPeriod">
           </mat-form-field>
 
-          <mat-form-field fxFlex="48%">
+          <mat-form-field fxFlex="48%" (click)="cashDatePicker.open()">
             <mat-label>Date</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="cashDatePicker" required formControlName="txnDate">
             <mat-datepicker-toggle matSuffix [for]="cashDatePicker"></mat-datepicker-toggle>