如何检测 angular2 中的 bootstrap datetimepicker 更改事件 [英] How to detect bootstrap datetimepicker change events within angular2

问题描述

我在 angular 2 中使用 bootstrap datetimepicker

https://eonasdan.github.io/bootstrap-datetimepicker/

在我的模板中，我有:

<input type='text' class="form-control" [(ngModel)]="date"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"(点击)="getCalendar()"></span></span>{{日期}}

问题是当我通过点击在日历上选择一个日期时，它不会触发任何更改"事件(换句话说，ngModel 不会被触发).如果我在文本框中输入，则 {{date}} 会显示值加上我输入的文本.

如果用户单击选择器中的日期进行更改，我如何检测文本框上的更改?

解决方案

问题是 Angular 不知道输入的值已更改以更新 ngModel.另一个奇怪的事情是 bootstrap-datetimepicker 不会触发输入的更改事件 - 这需要一些解决方法.

查看这个工作示例:

<input type='text' class="form-control" #datePicker [ngModel]="date" (blur)="date = datePicker.value"><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"(点击)="getCalendar()"></span></span>{{日期}}

注意变化:

• [ngModel]="date":我们只需要单向数据绑定(从模型到视图)，因为 Angular 不知道输入的值何时发生变化
• #datePicker:我创建了一个局部变量来访问它的值
• (blur)="date = datePicker.value":在模糊时我们更新模型

I am using the bootstrap datetimepicker in angular 2

https://eonasdan.github.io/bootstrap-datetimepicker/

In my template i have:

<div class='input-group date datepicker'>
         <input type='text' class="form-control" [(ngModel)]="date">
         <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar" (click)="getCalendar()"></span>
       </span>
   {{date}}
</div>

The problem is when I select a date on the calendar by click, it does not trigger any "change" event (in other words, ngModel is not fired). If i type in the text box, then the {{date}} shows me the value plus the text i typed.

How can I detect changes on the text box if the user clicks on a date in the selector to change it?

解决方案

The problem is that Angular doesn't know that the input's value has changed in order to update ngModel. Another weird thing is that bootstrap-datetimepicker doesn't trigger the change event on the input - this requires some workaround.

See this working example:

<div class='input-group date datepicker'>
  <input type='text' class="form-control" #datePicker [ngModel]="date" (blur)="date = datePicker.value">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar" (click)="getCalendar()"></span>
  </span>

  {{date}}
</div>

Notice the changes:

• [ngModel]="date": we only need one-way data binding (from model to view) since Angular doesn't know when the input's value has changed
• #datePicker: I've created a local variable in order to access its value
• (blur)="date = datePicker.value": on blur we update the model

这篇关于如何检测 angular2 中的 bootstrap datetimepicker 更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！