使用jQuery datepicker和Angular 2更改事件

当我使用jQuery datepicker插件并且我正在尝试使用（更改）方法来捕获更改时，我有一些问题来捕获更改事件但似乎当我使用此插件时，angular无法捕获它。

@Component({ selector: 'foo-element', template: '' }) 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 = new EventEmitter(); constructor(private elementRef:ElementRef) { } ngOnInit() { $(this.elementRef.nativeElement).datepicker({ onSelect: (dateText) => { this.change.emit(dateText); } }); } } 

这样您就可以捕获这样的change事件：

 @Component({ selector: 'app', template: '', 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