Angular Material Date-Picker is not working properly

angularangular-material

I am trying to get date using Angular Material datepicker as mentioned bellow,

In html

<mat-form-field>
<mat-label>Custom calendar color</mat-label>
<input matInput [matDatepicker]="picker2">
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 color="primary"></mat-datepicker>
</mat-form-field>

In app.module.ts

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material';

imports: [
  MatDatepickerModule,
  MatNativeDateModule
],

In my package.json

"dependencies": {
"@angular/animations": "^8.2.9",
"@angular/cdk": "^8.2.3",
"@angular/core": "~8.2.0",
"@angular/material": "^8.2.3",
"@angular/router": "~8.2.0",
"angular-mat-datepicker": "0.0.2",
"angular-material-datepicker": "^1.0.2",
"hammerjs": "^2.0.8",
"ng-material-datetimepicker": "^1.19.2",
},

But the date picker icon is not working, even icon is not showing in the view. I have updated Angular material version as well but that didn't work. What is the solution for this problem?

Best Answer

You also have to import MatFormFieldModule and MatInputModule to get it working.

Also don't forget to import BrowserAnimationsModule. Check out this StackBlitz

Related Topic