角度材料：MatDatepicker：未找到 DateAdapter 的提供者答案

【问题标题】：Angular material: MatDatepicker: No provider found for DateAdapter角度材料：MatDatepicker：未找到 DateAdapter 的提供者
【发布时间】：2018-09-18 03:23:59
【问题描述】：

我正在尝试在 Angular Material 中使用 Datepicker 组件。这是我的 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';

我还有什么遗漏的吗？

【问题讨论】：

标签： javascript angular angular-material

【解决方案1】：

您需要在imports下同时导入MatDatepickerModule和MatNativeDateModule，并在providers下添加MatDatepickerModule

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

【讨论】：

不推荐使用 Md 前缀。请提供使用 Mat 语法的解决方案。
就我而言，我还需要使用 import {MatDatepickerModule} from '@angular/material/datepicker' 从 API 导入它们；从'@angular/material/'导入{MatNativeDateModule}；
这工作谢谢！但是如果我们使用单独的文件来导入材料呢？我们可以在那里设置提供者吗？我是新手！
谢谢，我刚刚添加了从核心导入 MatNativeDateModule 就可以了
我认为模块不属于 providers 数组。只需添加导入就足够了

【解决方案2】：

Angular 8、9

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

Angular 7 及以下版本

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

您需要在imports下导入MatDatepickerModule和MatNativeDateModule，并在providers下添加MatDatepickerModule

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

【讨论】：

感谢 Angular 9 的帮助。顺便说一句，从 '@angular/material' 导入 { MatDatepickerModule, MatNativeDateModule };适用于 8
为什么需要将它们添加到 providers 数组中？
如果不是你必须明智地注入每个组件
@lilansilva 你能详细说明一下吗？我的测试在不增加提供者的情况下工作，但也许我正在做一些我不需要做的习惯性的事情

【解决方案3】：

只需导入

MatNativeDateModule

随着

MatDatepickerModule

在 app.module.ts 或 app-routing.module.ts.

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

【讨论】：

【解决方案4】：

官方文档：Error: MatDatepicker: No provider found for DateAdapter/MAT_DATE_FORMATS

日期选择器被构建为与日期实现无关。这意味着它可以与各种不同的日期实现一起工作。然而，这也意味着开发人员需要确保为日期选择器提供适当的部分，以便与他们选择的实现一起工作。确保这一点的最简单方法是导入预制模块之一：MatNativeDateModule、MatMomentDateModule。

修复：

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

【讨论】：

根据文档：We highly recommend using the MomentDateAdapter or a custom DateAdapter that works with the formatting/parsing library of your choice. 自MatNativeDateModule is based off of the functionality available in JavaScript's native Date object, and is thus not suitable for many locales. One of the biggest shortcomings of the native Date object is the inability to set the parse format.

【解决方案5】：

对比之前一些同事说过的话，除非你有充分的理由，否则你不应该将 MatDatepickerModule 放在 prodivers 数组中。

作为提醒 (https://angular.io/guide/providers)，正如官方文档中很好解释的那样：提供者是依赖注入系统关于如何获取依赖项值的指令。大多数时候，这些依赖项是您创建和提供的服务。除此之外，提供程序可用于应用程序中的所有类，我猜这不是 MatDatepickerModule 的目的！（因为你应该只在一些组件中使用它）

因此，您当然需要遵循 Angular 官方网站 (https://material.angular.io/components/datepicker/overview) 中详细记录的示例

但在检查解决方案之前，让我们看一下不言自明的错误消息：

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

这并不是因为错误最初是关于 provider，你只需要在 provider 中注入人员。继续阅读完整的错误...

关于 DateAdapter 的简单介绍：DateAdapter 是一个类，它调整对象以供使用日期的基于 cdk 的组件用作日期。这个 DateAdapter 需要用到一些来自 MatNativeDateModule 的原生函数

建议的解决方案是：

在您的 app.module.ts 中同时导入 MatDatepickerModule 和 MatNativeDateModule

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

【讨论】：