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

that is equivalent to

.

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();
    };
};

0 讨论(0)

查看其它5个回答

发布评论:

提交评论

---

•  加载中...