2016-09-22 2 views
0

どのようにして入力日付を取得し、タグ<p>を入力しますか?Angular2 - 日付ピッカーのバインド

私はjqueryUI datepickerを使用していますが、変更とクリックのイベントをキャプチャしようとしていますが、動作しませんでした。

誰かが私を助けることができますか?

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

は、あなたが見てみたいことがあります。

もしそうなら、あなたはカスタムdirectiveを使用するか、このような日付パイプで日付フィールドをバインドする必要があるかもしれませんdocs/ts/latest/api/forms/index/NgModel-directive.html –

+0

入力を書き込むときだけバインドを行います。カレンダーを使用しているときにバインディングを実行しません。 – rafaelcb21

+0

「ChangeDetectorRef」に挿入します。https://angular.io/ docs/ts/latest/api/core/index/ChangeDetectorRef-class.htmlを開き、 'markForCheck'または' detectChanges'を呼び出して更新をトリガーします。また、 'DoCheck'lifecycleフックhttps://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#docheckを見てください。これは' ChangeDetectorRef'の呼び出しを行います。 –

答えて

2

あなたはこのようなモデルバインド:

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

コンパイラはフォーマットはYYYY-DD-MMの形式でなければならないことを教えてくれありませんの? ngModel https://angular.io/で

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