Angular 2：JQuery UI日期选择器不改变ngModel

我有我的角度2应用程序中工作的JQuery UI的日期选择器，但它不更新我的ngModel。我有一个名为SeasonStartDate的变量，我想更新为用户输入的任何日期。当我在日期选择器中选择一个日期时，例如10月31日，我的输入将填写10/31/2016，如我所料，但ngModel未成功更新。Angular 2：JQuery UI日期选择器不改变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的版本。

来源

2016-10-31 Brett

这可能不是最优雅的解决方案，但我确实找到了一种方法来完成这项工作。

首先，我更新了我的输入如下所示：

<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日期选择器时输入的值发生变化时，(change)事件将不会注册。我不知道这是否是Angular 2的一个缺陷，或者它是否是有意的行为，但这是我能够实现它的唯一方法。

如果有人有更好的解决方案，请让我知道，我会接受你的答案。

来源

2016-10-31 23:58:57 Brett

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

如果您使用jQueryUI的日期选择器，你可以告诉datepicker在onSelect事件中要做什么。赋予它一个将选定日期分配给模型的功能。

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

来源

2017-09-10 13:01:37 Ayo

Angular 2：JQuery UI日期选择器不改变ngModel

回答

相关问题