Angular Material Design - Bind Date object to MdDatepicker

Question

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

I learn using Material Design datepicker from official page and I would like to bind choosen data to Date object.

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;
}

How can I bind it?

Aravind Aravind · Accepted Answer · 2017-07-18T16:51:02

By assigning a value property binding to the input element

<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>

Typescript:

value:Date =new Date();

LIVE DEMO

Angular Material Design - Bind Date object to MdDatepicker

1 Answers