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:

        
                      

              相关标签:
       
      

Answer 1

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

Answer 2

Not sure if this works but according to the docs the right event to listen for is change

<div class='input-group date datepicker' (change)="date=$event">

Answer 3

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 4

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 5

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