角材质: MatDatepicker: 没有为 DateAdapter 找到提供程序

我正在尝试使用角度材质中的数据采集器组件，下面是我的 HTML 代码:

<input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled>
<mat-datepicker #picker disabled="false"></mat-datepicker>

然而，它对我不起作用，我得到了下面的错误:

错误: MatDatepicker: 找不到 DateAdapter 的提供程序。

错误消息告诉我需要导入 MatNativeDateModule 以及 MatDatepickerModule，但我已经这样做了。下面是我从 app.module.ts 导入的代码:

import {
MatFormFieldModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule
} from '@angular/material';

我还漏掉了什么吗？

125267 次浏览
小开

Official docs: Error: MatDatepicker: No provider found for DateAdapter/MAT_DATE_FORMATS

The datepicker was built to be date implementation agnostic. This means that it can be made to work with a variety of different date implementations. However it also means that developers need to make sure to provide the appropriate pieces for the datepicker to work with their chosen implementation. The easiest way to ensure this is just to import one of the pre-made modules: MatNativeDateModule, MatMomentDateModule.

Fix:

@NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}
小开
最佳答案

You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers

 imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
],
小开

Just import the

MatNativeDateModule

along with the

MatDatepickerModule

at the app.module.ts or app-routing.module.ts.

@NgModule({
imports: [
MatDatepickerModule,
MatNativeDateModule
]
})
小开

Angular 8, 9

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

Angular 7 and below

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

You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers

imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
MatNativeDateModule
],
小开

In contrast on what has been said previously by some colleagues, you should NOT put MatDatepickerModule in prodivers array unless you have a good reason for it.

As a reminder (https://angular.io/guide/providers), and as it is well explained in the official documentation: A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide. In addition to this, providers are available to all the classes in the application which is not i guess, the purpose of MatDatepickerModule ! (since you should use it just in some few components)

So all what you need is to follow of course the examples well documented in the Angular official website (https://material.angular.io/components/datepicker/overview)

But before to check the solution, let's have a look at the self-explanatory error message:

ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, ....

It is not because the error talks initially about provider, that you just need to inject the staff in provider. Continue reading the full error...

Just one word about DateAdapter: DateAdapter is a class which adapts an object to be usable as a date by cdk-based components that work with dates. This DateAdapter needs to use some native functions from MatNativeDateModule

The suggested solution is:

In your app.module.ts import both MatDatepickerModule and MatNativeDateModule

...
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
...
@NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}
小开

When using the MatNativeDateModule together with MatDatepicker or MatCalendar inside your "sub module" (when you create your own module inside main app) you might need to import the MatNativeDateModule inside your main app module. Without this I was still getting

core.js?4dd3:1673 ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.
at createMissingDateImplError (datepicker.es5.js?d462:38:1)
at new MatCalendar (datepicker.es5.js?d462:1563:1)

Please not what the message is saying "at your application root".

My "submodule" delaration was looking like this:

@NgModule({
imports: [
(...)
MatDatepickerModule
],
providers: [MatDatepickerModule],
})
export class MySubModule

Adding MatNativeDateModule to above submodule delaration was not helping. I was getting another error:

core.js?4dd3:1673 ERROR Error: Uncaught (in promise): Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
at syntaxError (compiler.js?db2b:1021:1)
at eval (compiler.js?db2b:10589:1)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js?db2b:10558:1)

Finally when I added the import to main app module it started working correctly:

// NOTE: see the import below
import { MatNativeDateModule } from "@angular/material/";


@NgModule({
imports: [
MatNativeDateModule
],
})
export class AppModule {

提交答案