Angular Material - Data binding with md datapicker in angular material2 - Angular Material Tutorial
Data binding with md datapicker in angular material2
datepicker-overview-example.html
<md-input-container>
<input mdInput
[mdDatepicker]="picker"
[(ngModel)]="date"
placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
<div>
Date Chosen using 'ngModel':
<div>{{ date }}</div>
</div>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial team
datepicker-overview-example.ts
<md-input-container>
<input mdInput
[mdDatepicker]="picker"
[(ngModel)]="date"
placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
<div>
Date Chosen using 'ngModel':
<div>{{ date }}</div>
</div>
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'datepicker-overview-example',
templateUrl: 'datepicker-overview-example.html'
})
export class DatepickerOverviewExample implements OnInit {
date;
ngOnInit(){
this.date = new Date();
}
}
}