Angular 2: JQuery UI 日期选择器未更改 ngModel

Question

我的 JQuery UI 的日期选择器在我的 angular 2 应用程序中工作，但是它没有更新我的 ngModel。我有一个名为 SeasonStartDate 的变量，我想将其更新为用户输入的任何日期。当我在我的日期选择器中 select 一个日期时，例如 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 class（这是启动日期选择器所必需的）并且我只是手动输入，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)。这是因为无论出于何种原因，当使用 JQuery 日期选择器时输入值发生变化时，(change) 事件不会注册。我不知道这是 Angular 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 日期选择器，您可以告诉日期选择器在 onSelect 事件中要做什么。给它一个函数，将选定的日期分配给模型。

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

Answer 4

这可能是一个迟到的答案，但我找到了一种无需 "hacky" 方法即可使其工作的方法。只需在 angular 之前导入 jquery！ ngModel 将立即识别在 jQuery 的日期选择器中选择的日期。

它在 angularJS (1.6.4) 中对我有用。

Angular 2: JQuery UI 日期选择器未更改 ngModel

Angular 2: JQuery UI Datepicker not changing ngModel

angular

jquery-ui-datepicker

angular2-ngmodel