如何在angular2中检测引导日期时间选择器更改事件 [英] How to detect bootstrap datetimepicker change events within angular2

问题描述

我在角度2中使用引导日期时间选择器

I am using the bootstrap datetimepicker in angular 2

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

在我的模板中，我有:

<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>

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

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?

推荐答案

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

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.

<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>

通知更改:

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

• [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中检测引导日期时间选择器更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！