Javascript MatDatepicker:找不到DateAdapter的提供程序。必须在应用程序根目录下导入以下模块之一：MatNativeDateModule

我已经在app.module.ts文件中导入了matdatepicker，但它仍然显示一些错误。我无法使材料部件工作。该按钮工作良好，并使用角材质组件。但当我使用datepicker时，它不起作用

app.module.ts文件

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

<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)

提交
错误：MatDatepicker:找不到DateAdapter的提供程序。必须在应用程序根目录下导入以下模块之一：MatNativeDateModule、MatMomentDateModule或提供自定义实现。
在createMissingDateImplError处（datepicker.js:37）
在新的MatDatepickerInput上（datepicker.js:2344）
在createClass（core.js:24577）
在createDirectiveInstance上（core.js:24386）
在createViewNodes上（core.js:34994）
在callViewAction上（core.js:35444）
在execComponentViewsAction（core.js:35349）
在createViewNodes上（core.js:35023）
在callViewAction上（core.js:35444）
在execComponentViewsAction（core.js:35349）

我通过添加以下模块解决了这个问题：

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

在你的进口中

imports: [
    ...
    MatDatepickerModule,
    MatButtonModule,
    MatFormFieldModule,
    MatNativeDateModule, MatMomentDateModule,
  ],

我对材料没有那么深入，我只是按照错误信息的建议来做

错误：MatDatepicker:找不到DateAdapter的提供程序。你 必须在应用程序根目录下导入以下模块之一： MatNativeDateModule、MatMomentDateModule或提供自定义 实施

注意：对于较新的Angular版本，您只需导入一个模块：

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,
  ],

---

我刚刚使用了第一个导入：

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

另一个导入让我遇到了另一个错误，我没有解决，但这不是必须的

别忘了将MatNativeDateModule添加到app.module.ts中的imports数组。

我得到了，这里工作正常 只需导入APP.MODULE.TS文件中的模块

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

imports: [
MatDatepickerModule
,MatNativeDateModule,MatInputModule
]

HTML :
You need to wrap element with

Tag
<form>
<mat-form-field>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

import {MatNativeDateModule} from '@angular/material/core';
imports: [

...

MatNativeDateModule 
],

从'@angular/material/datepicker'导入{MatDatepickerModule}；
从“@angular/material/core”导入{MatNativeDateModule}；
从“@angular/material/input”导入{MatInputModule}；
进口：[
MatDatepickerModule
，MatNativeDateModule，MatInputModule
]
HTML:
您需要使用
标签
选择一个日期

我明白了，这里工作正常，只需导入APP.MODULE.TS文件中的模块即可

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

imports: [
MatDatepickerModule
,MatNativeDateModule,MatInputModule
]

HTML :
You need to wrap element with

Tag
<form>
<mat-form-field>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

import {MatNativeDateModule} from '@angular/material/core';
imports: [

...

MatNativeDateModule 
],

---

进口已经改变。改用这个：

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

---

我在提供程序中还添加了模块的可能副本。如你所见。但是还是一样的问题。你没有导入MatNativeDateModule。我猜自从发布后API发生了变化，现在它是从“@angular/material/core”导入{MatNativeDateModule}；我想他们又把事情搞砸了。我导入了这两个版本，但仍然在版本9.1.2中出现错误。。。您现在需要将它们添加到应用程序模块中，而不是导入的模块中…：/适当的文档可以帮助。。。正确的？