角材料設計 - 綁定Date對象MdDatepicker

Question

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

我學習使用材料設計日期選擇器官方頁面和我想choosen數據綁定到Date對象。

日期選擇器 - 概述 - 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> 

日期選擇器 - 概述 - 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; 
} 

我如何綁定呢？

Answer 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