How to detect bootstrap datetimepicker change events within angular2

Question

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?

Answer 1

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