关于datepicker：angular材料2-MatDatePicker错误-‘必须导入MatNativeDateModule / MatMomentDateModule’


Angular Material 2 - MatDatePicker Error - 'Must import MatNativeDateModule/MatMomentDateModule'

我试图在使用matInput datepicker组件的组件控制器中使用momentjs格式化日期，但是当我尝试加载存在这些页面的页面时，在控制台中出现以下错误：

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.

问题是我尝试在我试图引用moment()方法的应用程序模块，主要应用程序组件和子组件中包括此内容，但仍然出现错误。我也尝试过使用MatNativeDateModule获得相同的结果。

这是我要导入的模块依赖项：

1
import { MatMomentDateModule } from '@angular/material-moment-adapter';

Datepicker元素：

1
<input matInput [matDatepicker]="invoiceDate" [max]="maxDate" name="date" placeholder="DD/MM/YYYY" formControlName="date">
相关讨论

您是否已将其添加到模块的导入中？

1
2
3
4
5
6
7
import { MatMomentDateModule } from"@angular/material-moment-adapter";

@NgModule({
  /* etc. */
  imports: [ BrowserModule, /* etc. */, MatMomentDateModule, /* etc. */ ],
  /* etc. */
}

我已经用

安装了它

1
npm i @angular/material-moment-adapter --save

一切正常。

角铁8,9

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

angular7及以下

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

您需要在导入下导入MatDatepickerModule和MatNativeDateModule，并在提供程序下添加MatDatepickerModule

1
2
3
4
5
6
7
8
imports: [
    MatDatepickerModule,
    MatNativeDateModule
  ],
  providers: [  
    MatDatepickerModule,
    MatNativeDateModule  
  ],

我在MatDatepickerModule和MatNativeDateModule上遇到了类似的错误，说

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."

我通过做

解决了这个问题

1
2
3
4
5
6
7
import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';
@NgModule({
    imports:[ MatDatepickerModule,
MatNativeDateModule],
      providers: [MatNativeDateModule, MatDatepickerModule],

})

只需将以下两个模块导入app.module.ts

1
2
3
4
5
6
import { MatDatepickerModule, MatNativeDateModule} from '@angular/material';

imports: [  
  MatDatepickerModule,
  MatNativeDateModule
]

就是这样。