Angular Material Design - 将日期对象绑定到 MdDatepicker答案

【问题标题】：Angular Material Design - Bind Date object to MdDatepickerAngular Material Design - 将日期对象绑定到 MdDatepicker
【发布时间】：2017-12-23 16:04:15
【问题描述】：

https://material.angular.io/components/datepicker/examples

我从官方页面学习使用 Material Design datepicker，我想将选择的数据绑定到 Date 对象。

datepicker-overview-example.component.html:

<md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

datepicker-overview-example.component.ts:

import {Component} from '@angular/core';


@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.component.html',
  styleUrls: ['datepicker-overview-example.component.css'],
})
export class DatepickerOverviewExample {
        @Input() date: Date;
}

如何绑定？

【问题讨论】：

标签： javascript angular typescript material-design

【解决方案1】：

通过将value 属性绑定分配给input 元素

<md-input-container>
  <input  [value]="value" mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker (selectedChanged)="selectedChanged($event)" #picker></md-datepicker>

打字稿：

value:Date =new Date();

LIVE DEMO

【讨论】：