Question

我的应用中有以下日期选择器：

<mat-form-field>
<input mdInput
   [matDatepicker]="dp3"
   placeholder="Select Birthday"
   name="birthday"
   disabled>
<mat-datepicker-toggle matSuffix
     [for]="dp3">
</mat-datepicker-toggle>
<mat-datepicker #dp3 disabled="false">
</mat-datepicker>
</mat-form-field>

当页面加载时，生日值会写在matInput中，但是当我通过日历弹出窗口更改日期时，日期不会更改。

我试图绑定到（更改）事件，但是什么也没有发生。当我删除ngModel时，我可以看到matInput中的日期实际上发生了变化。

我正在使用angular 4，这是我的包，json：

"dependencies": {
  "@agm/core": "^1.0.0-beta.2",
  "@angular-mdl/core": "^4.0.7",
  "@angular-mdl/datepicker": "0.0.4",
  "@angular-mdl/expansion-panel": "^5.0.0",
  "@angular/animations": "^6.0.3",
  "@angular/cdk": "^5.2.2",
  "@angular/common": "^4.3.2",
  "@angular/compiler": "^4.3.2",
  "@angular/core": "^4.3.2",
  "@angular/flex-layout": "^2.0.0-beta.8",
  "@angular/forms": "^4.3.2",
  "@angular/http": "^4.3.2",
  "@angular/material": "^5.2.5",
  "@angular/platform-browser": "^4.3.2",
  "@angular/platform-browser-dynamic": "^4.3.2",
  "@angular/router": "^4.3.2",
  "@angular2-mdl-ext/expansion-panel": "0.0.1",
  "@angular2-mdl-ext/popover": "^0.6.0",
  "@angular2-mdl-ext/select": "^0.10.3",
  "@cloudinary/angular": "^2.1.1",
  "@cloudinary/angular-4.x": "^1.0.0",
  "@ngrx/core": "^1.2.0",
  "@ngrx/db": "^2.0.2",
  "@ngrx/effects": "^2.0.3",
  "@ngrx/notify": "^1.0.0",
  "@ngrx/router-store": "^1.2.6",
  "@ngrx/store": "^2.2.2",
  "@ngrx/store-devtools": "^3.2.4",
  "angular-2-local-storage": "^1.0.1",
  "angular-star-rating": "^3.0.3",
  "angular2-busy": "^2.0.4",
  "angular2-infinite-scroll": "^0.3.42",
  "angular2-mdl": "^2.13.2",
  "angular2-moment": "^1.8.0",
  "angular2localization": "^1.4.2",
  "moment": "^2.20.1",
  "ngrx-store-freeze": "^0.1.9",
  "ngrx-store-localstorage": "^0.1.8",
  "ngrx-store-logger": "^0.1.8",
  "ngx-chips": "^1.4.5",
  "ngx-infinite-scroll": "^0.5.1",
  "normalizr": "^3.2.3",
  "npm": "^5.3.0",
  "primeng": "^4.1.0-rc.2",
  "reselect": "^3.0.1",
  "rxjs": "^5.4.0",
  "sha.js": "^2.4.11",
  "ts-helpers": "^1.1.2",
  "zone.js": "^0.8.12"
},
"devDependencies": {
  "@angular/cli": "1.2.1",
  "@angular/compiler-cli": "^4.0.0",
  "@angular/language-service": "^4.0
  "node-sass": "^4.7.2",
  "sass-loader": "^6.0.7",
  "style-loader": "^0.20.2",
  "typescript": "~2.3.3",
  "webpack": "^3.11.0"
}

我想念什么？

Answer 1

使用matInput代替mdInput

<input matInput
   [matDatepicker]="dp3"
   placeholder="Select Birthday"
   name="birthday"
   [(ngModel)]="model"
   disabled>

工作DEMO

Answer 2

事实证明，我的日期选择器代码很好，只是我在ngAfterViewChecked上有一个订阅，每次订阅都一直强制使用初始日期。将订阅移至ngOnInit并解决了问题。

Angular 4 Mat-DatePicker日期更改事件

2 个答案: