角度2：JQuery UI DatePickerがngModelを変更しない

Question

私のangle 2アプリケーションでJQuery UIのdatepickerが動作していますが、ngModelは更新されません。私はSeasonStartDateと呼ばれる変数を持っています。ユーザーが入力した日付に更新します。たとえば、10月31日など、自分の日付ピッカーで日付を選択すると、予想通り入力が2016年10月31日に満たされますが、ngModelは正常に更新されません。ここで

は私の入力です：

<input [ngModel]="SeasonStartDate" (ngModelChange)="updateSeasonStartDate($event)" class="form-control date-picker" id="SeasonStartDate" name="SeasonStartDate" type="text" autocomplete="off"> 
Date: {{SeasonStartDate}} 

私は値を更新しているかどうかをテストすることができますので、私は入力以下Date: {{SeasonStartDate}}を追加しました。ここで

は、値を更新し、私のコンポーネントのコードです：

updateSeasonStartDate(updateSeasonStartDate: any) { 
    console.log(updateSeasonStartDate); 
    this.SeasonStartDate = updateSeasonStartDate; 
} 

私は（日付ピッカーを開始するのに必要とされている）date-pickerクラスを削除し、私は手動で、入力にSeasonStartDate意志を入力した場合私のコードの残りの部分を知っているので、それはそれを壊すことに終わる日付ピッカーです。 ngModelとJQuery UI Datepickerを連動させるにはどうすればよいですか？これは可能ですか？私は特にAngular 2のための他の日付ピッカーがあることを知っていますが、私は可能な限りJQueryのバージョンを好みます。

Answer 1

これは最も洗練された解決策ではないかもしれませんが、私はこの作業を行う方法を見つけました。

まず、私が見えるように、私の入力を更新し、次の

<input [(ngModel)]="SeasonStartDate" #startDate (click)="updateSeasonStartDate(startDate.value)" class="form-control date-picker" id="SeasonStartDate" name="SeasonStartDate" tabindex="5" type="text" autocomplete="off"> 

重要な変更は、この入力をクリックすると、updateSeasonStartDate()とパスを呼び出し、これは言う#startDateの追加や(click)="updateSeasonStartDate(startDate.value)"

です入力の現在の値が何であっても。入力がクリックされたときだけでなく、新しい日付が入力されたときにいつでも、入力の値をSeasonStartDate変数にバインドしたいので、これだけで目的の結果が得られないので、次のコードも追加しましたngOnInit関数に：今

$('body').on('change', '#SeasonStartDate', function() {  
    $('#SeasonStartDate').trigger('click'); 
}); 

いつでもその入力の値が変化し、updateSeasonStartDate()は私がしたいだけのように起動し、SeasonStartDateを変更します。これは間違いなくちょっとした仕事ですが、(click)の代わりに(change)を入力したのはなぜだろうかと疑問に思うかもしれません。何らかの理由で、(change)イベントは、JQuery Date Pickerの使用中に入力値が変更されたときに登録されないためです。私はこれが角度2のバグか、意図された動作かどうかはわかりませんが、動作させるには唯一の方法です。

誰かがより良い解決策を持っている場合は、私に知らせてください。代わりに回答を受け入れます。

Answer 2

入力の変更を検出する必要はなく、イベントが発生したときに値が必要な場合は、ViewChildを使用して、そのイベントが発生したときに日付変数の値を更新できます。

たとえば私の場合、フォームを送信すると、私は日付の値を設定します。

マイ入力：

<input type="text" id="date-picker-example" #dateclass="form-control pickadate" #date> 

私はViewChildを使用して、これは私の入力の宣言です：

@ViewChild('date') 
dateVariable: any; 

次に提出するときは発生します。

submit(){ 
    this.myRealDateVariable = this.resolveDate(this.dateVariable.nativeElement.value); 
    //Rest of the code here calling an http service 
} 

Answer 3

あなたがJqueryUI日付ピッカーを使用している場合onPelectのイベントで何をすべきかをdatepickerに伝えることができます。選択した日付をモデルに割り当てるfuctionを与えます。

 $('#SeasonStartDate').datepicker({ 
     onSelect: (selectedDate, inst) => { 
      this.SeasonStartDate= selectedDate; 
     } 
    });