CODEWITHSUNDEEP
angulardatepickerangular-material
WasiF
WasiF

Reputation: 28939

'mat-datepicker-actions' is not a known element - best solution required

I have imported MatDatepickerModule and getting mat-datepicker-actions are not known. I guess there is some other module that needs to import. Here is code snippet:

<mat-form-field appearance="fill" class="example-form-field">
   <mat-label>Choose a date</mat-label>
   <input matInput [matDatepicker]="datepicker">
   <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
   <mat-datepicker #datepicker>
     <mat-datepicker-actions>
       <button mat-button matDatepickerCancel>Cancel</button>
       <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
     </mat-datepicker-actions>
   </mat-datepicker>
 </mat-form-field>

Note: anyone provides solution within the angular-material library, not third party (normally has too much size). I'll be thankful.

Upvotes: 3

Views: 18785

Answers (4)

Alin Ciocan
Alin Ciocan

Reputation: 3078

mat-datepicker-actions is in version 11.2.13 of Angular Material Docs.

My issue was that I was using @angular/material: 11.0.0. So I have update my packages with: npm update @angular/material @angular/cdk and everything work fine now.

enter image description here

Upvotes: 2

Nikhil
Nikhil

Reputation: 1018

You need to import MatDatepickerModule and MatNativeDateModule into your module for which your component is a part of. I use below for Angular 11

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

    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...
        MatNativeDateModule,
        MatDatepickerModule
        ...

Upvotes: 9

WasiF
WasiF

Reputation: 28939

No need for third party libraries, you can fix it by updating @angular/material.

ng update @angular/material

Thanks to @msrumon, who found this solution.

Upvotes: 0

Benzara Tahar
Benzara Tahar

Reputation: 2205

Make sure to import the MatDatepickerModule and MatMomentDateModule.

import { MatDatepickerModule, MatMomentDateModule } from '@coachcare/datepicker';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatMomentDateModule,
    ...
  ],
  ...
})
export class AppModule {}

Update:

coachcare/npm-datepicker is a Fork of the official Material Datepicker for Angular v6 with timepicker support. The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components and directives that work together.

There is no official date and time picker from angular itself, that's why people create solutions based on the official one with the new functionality added on top of that. However, these forks are not always up-to-date with the latest angular/angular-material version, hence it is not wise to rely on them.

You find more details on this stackoverflow thread

Upvotes: 1

Related Questions