EDIT 1
My code is:
Modal.ts
import {Component, NgIf, FORM_DIRECTIVES} from 'angular2/angular2';
declare function initMaterial();
@Component({
selector: 'modal',
directives: [NgIf, FORM_DIRECTIVES],
templateUrl: './frontend/components/modal/modal.html',
styleUrls: ['./frontend/components/modal/modal.css']
})
export class Modal {
public isOpen: boolean = false;
public dtCompromise: Date;
constructor() {
this.dtCompromise = new Date();
}
open() {
this.isOpen = true;
initMaterial();
}
close() {
this.isOpen = false;
}
}
Modal.html
<div class="card-wide mdl-card mdl-shadow--2dp modal" *ng-if="isOpen">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Novo compromisso</h2>
</div>
<div class="mdl-card__supporting-text">
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="date" [(ng-model)]="dtCompromise"/>
<label class="mdl-textfield__label" for="dtCompromisse">Data</label>
</div><br>
<div class="mdl-textfield mdl-js-textfield">
<textarea class="mdl-textfield__input" type="text" rows= "5" [(ng-model)]="dsCompromise"></textarea>
<label class="mdl-textfield__label" for="dsCompromisse">Descrição</label>
</div>
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" (click)="save($event, dsCompromise, dtCompromise);">
Salvar <i class="material-icons">save</i>
</button>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="close()">
<i class="material-icons">close</i>
</button>
</div>
</div>
In the constructor, I tried to initialize the dtCompromise variable as this.dtCompromise = new Date (); . But after that the value is undefined. Any sugestion to fix?
UPDATED
, . Angular2 = "". . . datepicker. material-design-lite . datepicker, . jquery datepicker. -. Angular2, . .