Replace datepickers with material datepickers

src/app/child-dev-project/attendance/add-day-attendance/add-day-attendance.component.html

@@ -22,7 +22,9 @@ <h2>{{stages[currentStage]}}</h2>
   </div>
 
   <mat-form-field>
-    <input matInput placeholder="Date" type="date" [valueAsDate]='day' (change)='day=$event.target.valueAsDate'>
+    <input matInput placeholder="Date" [value]='day' (dateChange)='day=$event.target.value' [matDatepicker]="addDayAttendanceDatepicker">
+    <mat-datepicker-toggle matSuffix [for]="addDayAttendanceDatepicker"></mat-datepicker-toggle>
+    <mat-datepicker #addDayAttendanceDatepicker></mat-datepicker>
   </mat-form-field>
 
   <div fxFlex>

src/app/child-dev-project/attendance/add-day-attendance/add-day-attendance.component.spec.ts

@@ -16,6 +16,8 @@ import { Database } from '../../../core/database/database';
 import { MockDatabase } from '../../../core/database/mock-database';
 import { EntityModule } from '../../../core/entity/entity.module';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
 
 describe('AddDayAttendanceComponent', () => {
   let component: AddDayAttendanceComponent;
@@ -25,7 +27,7 @@ describe('AddDayAttendanceComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ AddDayAttendanceComponent, SchoolBlockComponent, ChildBlockComponent ],
       imports: [FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule, MatButtonToggleModule,
-        MatIconModule, MatProgressBarModule, NoopAnimationsModule,
+        MatIconModule, MatProgressBarModule, MatDatepickerModule, MatNativeDateModule, NoopAnimationsModule,
         EntityModule],
       providers: [
         {provide: ChildrenService, useClass: ChildrenService},

src/app/child-dev-project/attendance/attendance-manager/attendance-manager.component.html

@@ -14,10 +14,14 @@ <h1>Attendance Register</h1>
   <div fxLayout='row' fxLayoutGap='10px' style='margin-top: 20px;'>
     <div>
       <mat-form-field>
-        <input matInput placeholder="From" type="date" [valueAsDate]='filterFrom' (change)='filterFrom=$event.target.valueAsDate'>
+        <input matInput placeholder="From" [value]='filterFrom' (dateChange)='filterFrom=$event.target.value' [matDatepicker]="attendanceFromDatepicker">
+        <mat-datepicker-toggle matSuffix [for]="attendanceFromDatepicker"></mat-datepicker-toggle>
+        <mat-datepicker #attendanceFromDatepicker></mat-datepicker>
       </mat-form-field>
       <mat-form-field>
-        <input matInput placeholder="Until" type="date" [valueAsDate]='filterUntil' (change)='filterUntil=$event.target.valueAsDate'>
+        <input matInput placeholder="Until" [value]='filterUntil' (dateChange)='filterUntil=$event.target.value' [matDatepicker]="attendanceUntilDatepicker">
+        <mat-datepicker-toggle matSuffix [for]="attendanceUntilDatepicker"></mat-datepicker-toggle>
+        <mat-datepicker #attendanceUntilDatepicker></mat-datepicker>
       </mat-form-field>
     </div>
 

src/app/child-dev-project/attendance/attendance-manager/attendance-manager.component.spec.ts

@@ -23,6 +23,8 @@ import { Database } from '../../../core/database/database';
 import { MockDatabase } from '../../../core/database/mock-database';
 import { EntityModule } from '../../../core/entity/entity.module';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
 
 describe('AttendanceManagerComponent', () => {
   let component: AttendanceManagerComponent;
@@ -33,8 +35,8 @@ describe('AttendanceManagerComponent', () => {
       declarations: [ AttendanceManagerComponent, ChildBlockComponent, AttendanceBlockComponent, AttendanceDayBlockComponent,
         AttendanceDaysComponent, SchoolBlockComponent ],
       imports: [ MatFormFieldModule, MatInputModule, MatButtonToggleModule, MatExpansionModule, MatButtonModule, MatTableModule,
-        MatProgressBarModule, MatTooltipModule, MatSelectModule, MatIconModule, FormsModule, NoopAnimationsModule,
-        UiHelperModule, EntityModule],
+        MatProgressBarModule, MatTooltipModule, MatSelectModule, MatIconModule, MatDatepickerModule, MatNativeDateModule,
+        FormsModule, NoopAnimationsModule, UiHelperModule, EntityModule],
       providers: [
         {provide: ChildrenService, useClass: ChildrenService},
         {provide: Database, useClass: MockDatabase},

src/app/child-dev-project/children/child-details/child-details.component.html

@@ -293,22 +293,32 @@ <h3>Coaching Attendance</h3>
 
       <div>
         <mat-form-field>
-          <input matInput formControlName="health_lastDentalCheckup" placeholder="Last Dental Check-Up" type="date">
+          <input matInput formControlName="health_lastDentalCheckup" placeholder="Last Dental Check-Up" [matDatepicker]="lastDentalCheckupDatepicker" [disabled]='!editing'>
+          <mat-datepicker-toggle matSuffix [for]="lastDentalCheckupDatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #lastDentalCheckupDatepicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field>
-          <input matInput formControlName="health_lastEyeCheckup" placeholder="Last Eye Check-Up" type="date">
+          <input matInput formControlName="health_lastEyeCheckup" placeholder="Last Eye Check-Up" [matDatepicker]="lastEyeCheckupDatepicker" [disabled]='!editing'>
+          <mat-datepicker-toggle matSuffix [for]="lastEyeCheckupDatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #lastEyeCheckupDatepicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field>
-          <input matInput formControlName="health_lastENTCheckup" placeholder="Last ENT Check-Up" type="date">
+          <input matInput formControlName="health_lastENTCheckup" placeholder="Last ENT Check-Up" [matDatepicker]="lastENTCheckupDatepicker" [disabled]='!editing'>
+          <mat-datepicker-toggle matSuffix [for]="lastENTCheckupDatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #lastENTCheckupDatepicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field>
-          <input matInput formControlName="health_lastVitaminD" placeholder="Last Vitamin D" type="date">
+          <input matInput formControlName="health_lastVitaminD" placeholder="Last Vitamin D" [matDatepicker]="lastVitaminDDatepicker" [disabled]='!editing'>
+          <mat-datepicker-toggle matSuffix [for]="lastVitaminDDatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #lastVitaminDDatepicker></mat-datepicker>
         </mat-form-field>
         <mat-form-field>
-          <input matInput formControlName="health_lastDeworming" placeholder="Last De-Worming" type="date">
+          <input matInput formControlName="health_lastDeworming" placeholder="Last De-Worming" [matDatepicker]="lastDewormingDatepicker" [disabled]='!editing'>
+          <mat-datepicker-toggle matSuffix [for]="lastDewormingDatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #lastDewormingDatepicker></mat-datepicker>
         </mat-form-field>
       </div>
 
@@ -339,7 +349,9 @@ <h3>Height & Weight Tracking</h3>
       </mat-expansion-panel-header>
 
       <mat-form-field>
-        <input matInput formControlName="dropoutDate" placeholder="Dropout Date" type="date">
+        <input matInput formControlName="dropoutDate" placeholder="Dropout Date" [matDatepicker]="dropoutDatepicker" [disabled]='!editing'>
+        <mat-datepicker-toggle matSuffix [for]="dropoutDatepicker"></mat-datepicker-toggle>
+        <mat-datepicker #dropoutDatepicker></mat-datepicker>
       </mat-form-field>
 
       <mat-form-field>

src/app/child-dev-project/children/child-details/child-details.component.spec.ts

@@ -87,6 +87,7 @@ describe('ChildDetailsComponent', () => {
         MatInputModule,
         FormsModule,
         MatAutocompleteModule,
+        MatDatepickerModule,
         BrowserAnimationsModule,
       ],
       providers: [

src/app/child-dev-project/health-checkup/health-checkup-component/health-checkup.component.spec.ts

@@ -18,6 +18,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableModule } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ConfirmationDialogService } from 'app/core/ui-helper/confirmation-dialog/confirmation-dialog.service';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 
 describe('HealthCheckupComponent', () => {
   let component: HealthCheckupComponent;
@@ -40,7 +41,7 @@ describe('HealthCheckupComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ HealthCheckupComponent, EntitySubrecordComponent],
       imports: [CommonModule, MatTableModule, MatSelectModule, MatOptionModule, MatAutocompleteModule, MatFormFieldModule,
-      MatIconModule, NoopAnimationsModule, MatDialogModule],
+      MatIconModule, NoopAnimationsModule, MatDialogModule, MatDatepickerModule],
       providers: [
         DatePipe,
         MatSnackBar,

src/app/child-dev-project/notes/note-details/note-details.component.html

@@ -26,8 +26,10 @@ <h2 mat-dialog-title>{{note.date.toLocaleDateString()}}: {{note.subject}}</h2>
     <div fxLayout='row wrap' fxLayoutGap='20px'>
       <div fxFlex>
         <mat-form-field>
-          <input matInput placeholder="Date" name="date" type="date"
-                 [valueAsDate]="note.date" (change)='note.date=$event.target.valueAsDate;recordForm.form.markAsDirty();'>
+          <input matInput placeholder="Date" name="date"
+                  [value]="note.date" (dateChange)='note.date=$event.target.value;recordForm.form.markAsDirty();' [matDatepicker]="noteDatepicker">
+          <mat-datepicker-toggle matSuffix [for]="noteDatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #noteDatepicker></mat-datepicker>
         </mat-form-field>
       </div>
 

src/app/child-dev-project/notes/note-details/note-details.component.spec.ts

@@ -19,6 +19,8 @@ import { ChildrenService } from '../../children/children.service';
 import { WarningLevel } from '../../warning-level';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SchoolBlockComponent } from '../../schools/school-block/school-block.component';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
 
 describe('NoteDetailsComponent', () => {
   let component: NoteDetailsComponent;
@@ -38,7 +40,7 @@ describe('NoteDetailsComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ NoteDetailsComponent, ChildSelectComponent, ChildBlockComponent, SchoolBlockComponent ],
       imports: [MatDialogModule, MatAutocompleteModule, MatFormFieldModule, MatInputModule, MatSelectModule,
-        FormsModule, NoopAnimationsModule, MatIconModule,
+        FormsModule, NoopAnimationsModule, MatIconModule, MatDatepickerModule, MatNativeDateModule,
         UiHelperModule, EntityModule],
       providers: [
         {provide: Database, useClass: MockDatabase},

src/app/core/ui-helper/entity-subrecord/entity-subrecord.component.html

@@ -32,7 +32,9 @@
                  matInput type="number" min="0" [title]="col.label" [value]="rec[col.name]" (change)="rec[col.name]=$event.target.valueAsNumber">
 
           <input *ngIf="col.inputType === 'date'"
-                 matInput type="date" [title]="col.label" [valueAsDate]="rec[col.name]" (change)="rec[col.name]=$event.target.valueAsDate">
+                 matInput [title]="col.label" [value]="rec[col.name]" (dateChange)="rec[col.name]=$event.target.value"  [matDatepicker]="subrecordDatepicker">
+          <mat-datepicker-toggle *ngIf="col.inputType === 'date'" matSuffix [for]="subrecordDatepicker"></mat-datepicker-toggle>
+          <mat-datepicker #subrecordDatepicker ></mat-datepicker>
 
           <input *ngIf="col.inputType === 'month'"
                  matInput type="month" [title]="col.label" [valueAsDate]="rec[col.name]" (change)="rec[col.name]=$event.target.valueAsDate">

src/app/core/ui-helper/entity-subrecord/entity-subrecord.component.spec.ts

@@ -14,6 +14,7 @@ import { ConfirmationDialogService } from '../confirmation-dialog/confirmation-d
 import { CommonModule } from '@angular/common';
 import { Database } from '../../database/database';
 import { EntitySchemaService } from '../../entity/schema/entity-schema.service';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 
 describe('EntitySubrecordComponent', () => {
   let component: EntitySubrecordComponent;
@@ -23,7 +24,7 @@ describe('EntitySubrecordComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ EntitySubrecordComponent ],
       imports: [MatTableModule, MatFormFieldModule, MatIconModule,
-        MatSnackBarModule, MatSelectModule, MatDialogModule, MatAutocompleteModule, CommonModule],
+        MatSnackBarModule, MatSelectModule, MatDialogModule, MatAutocompleteModule, MatDatepickerModule, CommonModule],
       providers: [
         EntityMapperService,
         EntitySchemaService,

src/app/core/ui-helper/ui-helper.module.ts

@@ -13,6 +13,7 @@ import { MatTableModule } from '@angular/material/table';
 import { ConfirmationDialogService } from './confirmation-dialog/confirmation-dialog.service';
 import { EntitySubrecordComponent } from './entity-subrecord/entity-subrecord.component';
 import { KeysPipe } from './keys-pipe/keys.pipe';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 
 @NgModule({
   imports: [
@@ -26,6 +27,7 @@ import { KeysPipe } from './keys-pipe/keys.pipe';
     MatSnackBarModule,
     MatSortModule,
     MatAutocompleteModule,
+    MatDatepickerModule,
   ],
   declarations: [ConfirmationDialogComponent, EntitySubrecordComponent, KeysPipe],
   exports: [EntitySubrecordComponent, KeysPipe],