Question

我在我的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;
}

如果我删除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。这绝对是一个愚蠢的工作，你可能想知道为什么我不是简单地在我的输入中放置(change)而不是(click)。这是因为无论出于何种原因，当使用JQuery Date Picker时输入值发生变化时，(change)事件不会注册。我不知道这是否是Angular 2的错误，或者它是否是预期的行为，但这是我能让它工作的唯一方法。

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

Answer 2

如果您正在使用JqueryUI datepicker，您可以告诉datepicker在onSelect事件中要做什么。给它一个功能，将所选日期分配给模型。

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

Answer 3

如果您确实不需要检测输入的更改，而是在事件发生时需要该值，则可以使用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 4

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

它在angularJS（1.6.4）中对我有用。

Angular 2：JQuery UI Datepicker不改变ngModel

4 个答案: