Angular2 - 日期选择器的绑定

问题描述：

如何获取输入的选定日期并将标记<p>。Angular2 - 日期选择器的绑定

我正在使用jqueryUI datepicker，我试图做绑定尝试捕获与更改并单击事件，但没有奏效。

任何人都可以帮助我吗？

<input [(ngModel)]="date" type="date" id="datepicker">

该编译器告诉你，格式必须是YYYY-MM-DD格式：

import "rxjs/Rx"; 
import {Component, AfterViewInit} from '@angular/core'; 

declare var $: any; 

@Component({ 
    selector: '<my-evento></my-evento>', 
    template: `<input (change)="updateDate($event)" type="text" id="datepicker"> 
       <p>{{ date }}</p>` 
}) 

export class EventoComponent implements AfterViewInit{ 
    date: string; 

    constructor(){} 

    ngAfterViewInit() { 
     $(function() { 
      $("#datepicker").datepicker(); 
     }); 
    } 

    updateDate($event): void { 
     this.date = $event.target.value; 
    } 
}

你可能想看看ngModel https://angular.io/ docs/ts/latest/api/forms/index/NgModel-directive.html –

它只在输入时写入绑定。 ''但是当我使用日历不会做绑定 – rafaelcb21

注入'ChangeDetectorRef'https://angular.io/ docs/ts/latest/api/core/index/ChangeDetectorRef-class.html，并调用'markForCheck'或'detectChanges'来触发更新。还可以查看'DoCheck'生命周期钩子https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#docheck，这是您在'ChangeDetectorRef'上进行调用的位置 –

答

在绑定模型这样

？

如果是这样，你可能需要使用自定义directive或日期字段的日期管这样的绑定：

<input [ngModel]="date | date:'y-MM-dd'" (ngModelChange)="date=$event" type="date" id="datepicker">

Angular2 - 日期选择器的绑定

相关推荐