Изменить событие с помощью jQuery datepicker и Angular 2

Question

У меня есть некоторые проблемы, чтобы поймать событие изменения, когда я использую плагин jQuery datepicker, и я пытаюсь использовать метод (change), чтобы поймать изменение, но кажется, что когда я используя этот плагин, угловые не могут его поймать.

@Component({ 
    selector: 'foo-element', 
    template: '<input type="text" (change)="checkDates($event)" id="foo_date_picker" class="datepicker">' 
}) 

export class FooComponentClass implements AfterViewInit { 

    ngAfterViewInit():any{ 
     $('#end_day').datepicker(); 
    } 

    private function checkDates(e){ 
     console.log("Please, catch the change event): "); 
    } 
} 

Я удалил инициализацию datepicker и отлично работает, но когда я использую его снова ... не работает.

Кто-то может мне помочь!

Большое спасибо.

Answer 1

Вы могли бы реализовать следующую директиву:

@Directive({ 
    selector: '[datepicker]' 
}) 
export class DatepickerDirective { 
    @Output() 
    change:EventEmitter<string> = new EventEmitter(); 

    constructor(private elementRef:ElementRef) { 
    } 

    ngOnInit() { 
    $(this.elementRef.nativeElement).datepicker({ 
     onSelect: (dateText) => { 
     this.change.emit(dateText); 
     } 
    }); 
    } 
} 

Таким образом, вы сможете поймать change событие так:

@Component({ 
    selector: 'app', 
    template: '<input type="text" id="end_day" (change)="checkDates($event)" class="datepicker" datepicker>', 
    directives: [ DatepickerDirective ] 
}) 
export class App implements AfterViewInit { 
    checkDates(e){ 
    console.log("Please, catch the change event): "+e); 
    } 
} 

Посмотреть этот plunkr: https://plnkr.co/edit/TVk11FsItoTuNDZLJx5X?p=preview