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

Angullar 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 2

您需要在导入下导入 MatDatepickerModule 和 MatNativeDateModule ，然后在 MatDatepickerModule 下添加提供商

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

Answer 3

只需导入

MatNativeDateModule

以及

MatDatepickerModule

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

except D

Answer 4

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

datepicker构建为与日期实现无关。这意味着它可以用于各种不同的日期实现。但是，这也意味着开发人员需要确保为datepicker提供适当的部分以使用他们选择的实现。确保这一点的最简单方法就是导入一个预先制作的模块：MatNativeDateModule，MatMomentDateModule。

修正：

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

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

4 个答案: