Reputation: 28939
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
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.
Upvotes: 2
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
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
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