MatDatepicker:未找到 DateAdapter 的提供程序.您必须在应用程序根目录中导入以下模块之一:MatNativeDateModule [英] MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule
问题描述
我已经在我的 app.module.ts 文件中导入了 matdatepicker,但它仍然显示一些错误.我无法让材料组件工作.按钮工作正常并使用角材料组件.但是当我使用 datepicker 时它不起作用.
I have imported the matdatepicker in my app.module.ts file but still it shows some error. I can't get the material component working. the button works fine and uses angular material component. But when I use datepicker it doesn't work.
app.module.ts 文件
app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import{ HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material/table';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { InactiveusersComponent } from './component/inactiveusers/inactiveusers.component';
import { CalendarComponent } from './component/calendar/calendar.component';
import { InactiveItemComponent } from './component/inactive-item/inactive-item.component';
import { NewtableComponent } from './component/newtable/newtable.component';
@NgModule({
declarations: [
AppComponent,
InactiveusersComponent,
CalendarComponent,
InactiveItemComponent,
NewtableComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
MatTableModule,
MatDatepickerModule,
MatButtonModule,
MatFormFieldModule
],
exports:[
MatDatepickerModule,
MatButtonModule
],
providers: [MatFormFieldModule,MatDatepickerModule],
bootstrap: [AppComponent]
})
export class AppModule { }
calendar.component.html
calendar.component.html
<input #startDate type="date" name="startdate">
<input #endDate type="date"name="enddate">
<button (click)="sendRange(startDate.value,endDate.value)" mat-button color="primary">Submit</button>
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
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.js:37)
at new MatDatepickerInput (datepicker.js:2344)
at createClass (core.js:24577)
at createDirectiveInstance (core.js:24386)
at createViewNodes (core.js:34994)
at callViewAction (core.js:35444)
at execComponentViewsAction (core.js:35349)
at createViewNodes (core.js:35023)
at callViewAction (core.js:35444)
at execComponentViewsAction (core.js:35349)
推荐答案
我通过添加以下模块解决了这个问题:
I've solved it by adding follow modules:
import {MatNativeDateModule} from '@angular/material';
import { MatMomentDateModule } from "@angular/material-moment-adapter";
并在您的导入中
imports: [
...
MatDatepickerModule,
MatButtonModule,
MatFormFieldModule,
MatNativeDateModule, MatMomentDateModule,
],
我对材料角度不是很了解,我只遵循错误消息建议
I'm not that deep in material-angular I've only follow the error message advice
错误错误:MatDatepicker:未找到 DateAdapter 的提供程序.你必须在您的应用程序根目录中导入以下模块之一:MatNativeDateModule、MatMomentDateModule 或提供自定义实施.
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.
注意:对于较新的 Angular 版本,您只需要导入一个模块:
Attention: For newer Angular versions you only need to import one module:
import { MatNativeDateModule } from '@angular/material/core';
...
imports: [
...
MatDatepickerModule,
MatButtonModule,
MatFormFieldModule,
MatNativeDateModule,
],
相反:
import {MatNativeDateModule} from '@angular/material';
import { MatMomentDateModule } from "@angular/material-moment-adapter";
...
imports: [
...
MatDatepickerModule,
MatButtonModule,
MatFormFieldModule,
MatNativeDateModule, MatMomentDateModule,
],
这篇关于MatDatepicker:未找到 DateAdapter 的提供程序.您必须在应用程序根目录中导入以下模块之一:MatNativeDateModule的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!