4

我有 JQuery UI 的 datepicker 在我的 angular 2 应用程序中工作，但是它没有更新我的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将按预期更新，所以我知道我的其余代码有效，它只是日期选择器最终破坏它。如何让ngModelJQuery 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像我想要的那样被调用和改变。这绝对是一个 hacky 解决方法，您可能想知道为什么我不简单地输入(change)而不是(click)输入。这是因为无论出于何种原因，(change)当使用 JQuery Date Picker 时输入的值发生更改时，该事件都不会注册。我不知道这是否是 Angular 2 的错误，或者它是否是预期的行为，但这是我可以让它工作的唯一方法。

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

于 2016-10-31T23:58:57.967 回答
3

如果您使用的是 JqueryUI 日期选择器，您可以告诉日期选择器在 onSelect 事件中要做什么。给它一个函数，将选定的日期分配给模型。

     $('#SeasonStartDate').datepicker({
         onSelect: (selectedDate, inst) => {
             this.SeasonStartDate= selectedDate;
         }
     });
于 2017-09-10T13:01:37.733 回答
1

如果您真的不需要检测输入的变化，而是在事件发生时需要该值，您可以使用 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
}
于 2017-07-29T23:29:36.300 回答
0

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

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

于 2018-09-27T03:28:18.233 回答