Material 日期选择器在 Angular4 中不工作

Material Datepicker is not working in Angular4

Material Datepicker 在 angular4 项目中不工作。我按照 angular 官方文档 here 中所示的方式进行了所有操作,但仍然出现错误。 这是我的模块

import { MdTabsModule, MdProgressSpinnerModule, MdInputModule, MdDatepickerModule, MdNativeDateModule} from '@angular/material';

这是进口

imports: [
BrowserModule,
HttpModule,
BrowserAnimationsModule,
MdTabsModule,
MdProgressSpinnerModule,
MdInputModule,
FormsModule,
ReactiveFormsModule,
AmChartsModule,
MdDatepickerModule,
MdNativeDateModule,

这是HTML

<md-form-field>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
  <md-datepicker #picker></md-datepicker>
</md-form-field>

屏幕截图错误

Angular版本

<md-datepicker-toggle>已在material2版本2.0.0-beta.10中引入。

mdDatepickerToggle is now an element < md-datepicker-toggle > with a for property that points to the MdDatepicker instance

这里有一个link完成CHANGELOG. Using <md-datepicker-toggle> will throw an error if you have version 2.0.0-beta.8或更低的安装。要更新到新版本,请执行以下操作:

  • 在您的 package.json 中,将 "@angular/material""@angular/cdk" 版本更改为 "2.0.0-beta.10"
  • 在您的终端 window 中,导航到项目中 package.json 所在的文件夹。
  • 运行命令npm install

这里是 working demo 使用版本 2.0.0-beta.10。