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 · Accepted Answer · 2017-07-18 16:51:02Z

1

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

answered Jul 18, 2017 at 16:51

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material Design - Bind Date object to MdDatepicker

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related