使用jQuery datepicker和Angular 2更改事件 [英] Change event with jQuery datepicker and Angular 2

问题描述

当我使用jQuery datepicker插件时，我有一些问题要抓住更改事件，我试图使用（更改）方法来捕获更改，但是当我使用这个插件时，角度不能抓住它。

I have some problems to catch the change event when I use the jQuery datepicker plugin and I'm trying to use the (change) method to catch the change but seems that when I'm using this plugin, angular can't catch it.

@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初始化并且工作正常，但是当我再次使用它...不工作。

I have removed the datepicker initialization and works fine, but when I use it again... don't works.

有人可以帮助我！

谢谢

推荐答案

您可以执行以下指令：

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

这样你就可以抓住一个code>更改这样的事件：

This way you will be able to catch a change event like this:

@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

See this plunkr: https://plnkr.co/edit/TVk11FsItoTuNDZLJx5X?p=preview

这篇关于使用jQuery datepicker和Angular 2更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！