Angular 2:JQuery UI Datepicker不改变ngModel

Question

我有JQuery UI的datepicker工作在我的角度2应用程序,但它没有更新我的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;
}

如果我删除了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">

最重要的变化是的补充#startDate和(click)="updateSeasonStartDate(startDate.value)"

这说,当您单击此输入时,调用updateSeasonStartDate()并传入输入的当前值.现在单独不会给我想要的结果,因为我想在输入SeasonStartDate新日期的任何时候将输入的值绑定到我的变量,而不仅仅是在点击输入时,这就是为什么我还添加了以下代码该ngOnInit函数:

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

现在,只要输入的值发生变化,updateSeasonStartDate()就会调用并按照SeasonStartDate我的意愿进行更改.这绝对是一个hacky工作,你可能想知道为什么我不是简单地把它(change)而不是(click)我的输入.这是因为无论出于何种原因,(change)当使用JQuery Date Picker时输入值发生变化时,事件将不会注册.我不知道这是否是Angular 2的错误,或者它是否是预期的行为,但这是我能让它工作的唯一方法.

如果有人有更好的解决方案,请告诉我,我会接受您的回答.