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

Answer 2

Try ngModelChange instead of change.

<input class="form-control" (ngModelChange)="changeDate($event)"
      [(ngModel)]="startRegistrationDate" ngbDatepicker #start="ngbDatepicker">

// to catch the event
changeDate(event: any) {
  console.log(event);
}

Answer 3

The problem as stated by the other answers is that ngModel is not picking up the change being made by the third-party library. ngModel uses two-way data-binding. Essentially, when you say

<div [(ngModel)]="date">

that is equivalent to

<div [ngModel]="date" (ngModelChange)="date=$event">.

What I did was create a directive to emit the ngModelChange event, as follows:

@Directive({
    selector: [datepicker],
    outputs: [
        "ngModelChange"
    ]
})
export class DatePickerDirective {
    //Emits changes to ngModel
    ngModelChange = new EventEmitter();
    el: JQuery;

    //Obtains the handle to the jQuery element
    constructor(el){
        this.el = jQuery(el.nativeElement);
    }

    ngOnInit() {
        this.el.datetimepicker({
            //Initialization options
        });

        this.el.on('dp.change', (event) => {
            var moment: Moment = event.date;

            //Emit new value
            this.ngModelChange.emit(date.format(/*However you want it formatted*/));
        });
    };

    ngOnDestroy() {
        //Clean up
        this.el.data('DateTimePicker').destroy();
    };
};

Answer 4

The solution posted by user3169887 worked great for me until I switched from a template-driven form (uses ngModel) to a reactive form.

Looking further into the original problem, I learned that Angular is listening for the "input" event which these datepicker libraries don't fire. My solution was to tweak the directive to fire the "input" event rather than emit the ngModelChange event. I tested this directive with both a template-driven form and a reactive form and both seemed to work.

import { Directive, ElementRef, Renderer, Input, OnInit } from "@angular/core";

declare var $: any;

@Directive({
    selector: "[datepicker]"
})
export class DatePickerDirective implements OnInit {
    @Input("datepicker")
    private datepickerOptions: any = {};
    private $el: any;

    constructor(private el: ElementRef, private renderer: Renderer) {
        this.$el = $(el.nativeElement);
    }

    ngOnInit() {
        // Initialize the date picker
        this.$el.datepicker(this.datepickerOptions)
            // Angular is watching for the "input" event which is not fired when choosing
            // a date within the datepicker, so watch for the "changeDate" event and manually
            // fire the "input" event so that Angular picks up the change
            // See: angular/modules/@angular/forms/src/directives/default_value_accessor.ts
            .on("changeDate", (event) => {
                let inputEvent = new Event("input", { bubbles: true });
                this.renderer.invokeElementMethod(this.el.nativeElement, "dispatchEvent", [inputEvent]);
            });
    };

    ngOnDestroy() {
        this.$el.datepicker("destroy");
    };
};

Note that I'm using a different datepicker library, so I'm listening for the "changeDate" event and your library may fire a different event like "dp.change".