Can't bind to 'matDatepicker' since it isn't a known property of 'input'

Question

I am going to use a material date picker controller. But it shows an error. Of course, I added MatDatepickerModule in app.module.ts file. Let me show you some parts of my code here:

import { MatDatepickerModule } from '@angular/material/datepicker';
...
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        ...,
        MatDatepickerModule,
        SharedModule.forRoot(),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

This is html code:

<mat-form-field appearance="fill">
              <mat-label>Event start time</mat-label>
              <input matInput [matDatepicker]="picker">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
            </mat-form-field>

And below is the error log:

Error: src/app/.../test.component.html:67:31 - error NG8002: Can't bind to 'matDatepicker' since it isn't a known property of 'input'.

67               <input matInput [matDatepicker]="picker">

What I missed?

And have you imported `MatNativeDateModule` or `MatMomentDateModule` as described in the [docs](https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings)? — Andrew Allen, May 28 '21 at 01:42
Included those two modules but, it also doesn't work. I didn't used ```MatNativeDateModule``` or ```MatMomentDateModule```. — Cardoso, May 28 '21 at 02:01
Does this answer your question? [Can't bind to 'matDatepicker' since it isn't a known property of 'input' - Angular](https://stackoverflow.com/questions/44584323/cant-bind-to-matdatepicker-since-it-isnt-a-known-property-of-input-angul) — Yong Shun, May 28 '21 at 02:05
Like I said you *need* one (and only one) of them. Next step is to add `FormsModule` and `ReactiveFormsModule` — Andrew Allen, May 28 '21 at 02:06
I tried to add those two modules, but it also doesn't work. I've attached the error log image. Please have a look at it. — Cardoso, May 28 '21 at 02:22
You have to import `MatDatepickerModule` in that module where your component is added in declaration array ([See this answer](https://stackoverflow.com/a/44430230/11719787)), Importing in `app.module` will only date picker to available in components which are added in `app.module` declaration — Sameer, May 28 '21 at 02:32
Great! It works. Thank you very much. :) Can you add your answer, please? — Cardoso, May 28 '21 at 02:35

score 2 · Accepted Answer · answered May 28 '21 at 02:58

You have to import MatDatepickerModule where your components are declared.

@NgModule({
    declarations: [
        AppComponent //Date picker is only available in this component
    ],
    imports: [
        ...
        MatDatepickerModule
    ]
})
export class AppModule {}

Assuming you have hallway.module

@NgModule({
    declarations: [
        HallwayComponent
    ],
    imports: [
        ...
        MatDatepickerModule //Import it here too, to make it available in Hallway component
    ]
})
export class HallwayModule {}

You can also create shared.module or material-shared.module and import material components in it and import this shared module in every module wherever required.

Can't bind to 'matDatepicker' since it isn't a known property of 'input'

1 Answers1

Linked