Angular 2：JQuery UI Datepicker不改变ngModel
|
我在我的angular 2应用程序中使用了
JQuery UI的datepicker,但它没有更新我的ngModel.我有一个名为SeasonStartDate的变量,我想更新到用户输入的任何日期.例如,当我在日期选择器中选择日期时,例如10月31日,我的输入将填充10/31/2016,正如我所料,但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;
}
如果我删除日期选择器类(启动日期选择器所需)并且我只是手动输入输入,SeasonStartDate将按预期更新,所以我知道我的其余代码工作,它只是结束日期选择器打破它.如何让ngModel和JQuery UI Datepicker一起工作？这可能吗？我知道还有其他日期选择器专门用于Angular 2,但如果可能的话我更喜欢JQuery的版本. 解决方法
这可能不是最优雅的解决方案,但我确实找到了一种方法来完成这项工作.
首先,我将输入更新为如下所示： <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.这肯定是一个hacky工作,你可能想知道我为什么不简单地(改变)而不是(点击)我的输入.这是因为无论出于何种原因,当使用JQuery Date Picker时输入值发生变化时,(change)事件不会注册.我不知道这是否是Angular 2的错误,或者它是否是预期的行为,但这是我能让它工作的唯一方法. 如果有人有更好的解决方案,请告诉我,我会接受您的回答. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |