Angular材料:MatDatepicker:找不到DateAdapter的提供者

Question

我正在尝试在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';

还有什么我想念的吗？

Answer 1

您需要导入两者MatDatepickerModule 和MatNativeDateModule导入,并MatDatepickerModule在提供者下添加

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

Answer 2

角 8,9

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

Angular 7 及以下

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

您需要在导入下导入 MatDatepickerModule 和 MatNativeDateModule 并在提供者下添加 MatDatepickerModule

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

Answer 3

只需导入

MatNativeDateModule

随着

MatDatepickerModule

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

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

Answer 4

官方文档：错误：MatDatepicker：未找到 DateAdapter/MAT_DATE_FORMATS 的提供程序

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

使固定：

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

Answer 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 {}