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

Question

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.

what is that you are trying to achieve with the `@coachcare/datepicker` and that doesn't exists on angular-material official datepicker? — Benzara Tahar, Feb 03 '21 at 14:09
angular material official docs is using this `@coachcare/datepicker`? if yes, can you please paste the link. Thank you. — WasiF, Feb 03 '21 at 14:12

score 8 · Accepted Answer · edited Apr 29 '21 at 07:09

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
        ...

score 2 · Answer 2 · answered Jun 02 '21 at 11:37

2

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.

answered Jun 02 '21 at 11:37

Alin Ciocan

3,082
4
34
47

Benzara Tahar · Answer 3 · 2021-02-03T14:25:19.200

1

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

edited Feb 03 '21 at 14:25

answered Feb 03 '21 at 12:46

Benzara Tahar

2,058
1
17
21

This library `@coachcare/datepicker` has bigger size just to get one feature. – WasiF Feb 03 '21 at 13:08
Can you provide solution within the `angular-material`, not third party? – WasiF Feb 03 '21 at 13:09
Solution to what, my post answers your question regarding how to fix the `mat-datepicker-actions are not known.` error you are having. If you have another question update your post or create a new question – Benzara Tahar Feb 03 '21 at 13:50
Come on @WasiF, this cannot be an answer! Angular Material is perfectly capable of this functionality. Demo can be seen [here](https://run.stackblitz.com/api/angular/v1?file=src%2Fapp%2Fdatepicker-actions-example.ts). – msrumon Feb 04 '21 at 15:59
Capable of what? The answer states that the official angular material date picker doesn't support time selection, among other things supported coachcare/npm-datepicker package. The disadvantage of this is the later is not active anymore – Benzara Tahar Feb 04 '21 at 18:37
@msrumon demo link is broken. – WasiF Feb 04 '21 at 19:00
1

@WasiF Here's the [updated link](https://stackblitz.com/angular/pelmpjkrjja?file=src%2Fapp%2Fdatepicker-actions-example.ts). @Benzara Tahar I think OP didn't ask for time picker, he asked why `mat-datepicker-actions` isn't identified as valid component, although he correctly imported the required modules. To @WasiF, try `ng update @angular/material`, it solved the problem for me. I hope it'll work for you too. – msrumon Feb 04 '21 at 19:10
@msrumon My heart says you're right because angular itself didn't mention any third party library. I can't test now, you can post an answer to this, If your answer gets more votes than this one, I'll approve your answer. – WasiF Feb 05 '21 at 11:44
1

@WasiF Adding `ng update @angular/material` as a dedicated answer is not a good idea I think. It resolved the issue in my case, but doesn't necessarily mean you shouldn't try other ways if that doesn't work for you. Besides, keeping your project dependencies up-to-date is also part of long-term development. If my solution worked for you, you can add a solution by yourself and credit me, and then mark that one as answer. – msrumon Feb 05 '21 at 12:29

score 0 · Answer 4 · answered Feb 06 '21 at 08:24

0

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.

answered Feb 06 '21 at 08:24

WasiF

26,101
16
120
128

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

4 Answers4