使用 jQuery 日期选择器和 Angular 2 更改事件

Change event with jQuery datepicker and Angular 2

本文关键字：事件 Angular jQuery 日期 选择器 使用      更新时间：2023-09-26

当我使用 jQuery 日期选择器插件时，我在捕获更改事件时遇到了一些问题，我正在尝试使用 （change） 方法来捕获更改，但似乎当我使用此插件时，angular 无法捕获它。

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

我已经删除了日期选择器初始化并且工作正常，但是当我再次使用它时......不行。

有人可以帮助我！

非常感谢。

您可以实现以下指令：

@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

相关文章：