4

angular 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のバージョンを好みます。

4

4 に答える 4

10

これは最もエレガントな解決策ではないかもしれませんが、これを機能させる方法を見つけました。

まず、入力を次のように更新しました。

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

重要な変更点は、#startDateとの追加です。(click)="updateSeasonStartDate(startDate.value)"

これは、この入力をクリックするとupdateSeasonStartDate()、入力の現在の値が何であれ、呼び出して渡すことを意味します。SeasonStartDate入力がクリックされたときだけでなく、新しい日付が入力されるたびに入力の値を変数にバインドしたいので、それだけでは望ましい結果が得られません。そのため、次のコードも追加しました関数ngOnInit:

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

これで、その入力の値が変更updateSeasonStartDate()されるたびに呼び出され、必要に応じて変更されますSeasonStartDate。これは間違いなくハッキーな回避策であり、なぜ入力に(change)代わりを入れなかったのか不思議に思うかもしれません(click)。これは、何らかの理由で、(change)JQuery Date Picker の使用中に入力の値が変更されたときにイベントが登録されないためです。これが Angular 2 のバグなのか、それとも意図した動作なのかはわかりませんが、それが機能させる唯一の方法です。

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

于 2016-10-31T23:58:57.967 に答える