Angular Material Datepicker is not working

Posted by Raja under Error and Solution on 5/25/2020 | Points: 10 | Views : 1668 | Status : [Member] | Replies : 0

This generally happens when you are not importing proper modules into your appModule.ts.

Your imports should contain at least following

import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';


Your imports module should be at least importing following

imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule
],

and your view code should look like following

<mat-form-field color="accent">                
<input matInput [matDatepicker]="picker1" placeholder="Select date">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>


Hope this works.

Regards,
Raja, USA



Responses

(No response found.)

Login to post response