"How to set the DatePicker in Angular Matrial 7 ? Input Tag getting hide ?"

Issue

I am working with Angular Material and facing the problem to manage the DatePicker component because it’s doing hide input box and because of that the date is not coming in the value of Input tag.

 <input matInput [matDatepicker]="picker1" placeholder="Anniversary">

 <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>

 <mat-datepicker #picker1> </mat-datepicker>

Solution

I think you are missing <mat-form-field>. Try to do like this:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Answered By – Tushar

Answer Checked By – Gilberto Lyons (AngularFixing Admin)