Я пытаюсь создать свою собственную Директиву Angular 2 для Jquery UI Datepicker. Я видел несколько разных подходов в Интернете, а также в SO, но никто не достигает цели, к которой я хочу. Вот код, который у меня есть:

import {Directive, ElementRef, Input, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

declare  var $:any;

@Directive({
  selector: '[date-picker]',
  providers: [{
    provide: NG_VALUE_ACCESSOR,useExisting:
      forwardRef(() => DatePickerDirective),
    multi: true
  }]
})
export class DatePickerDirective implements ControlValueAccessor {
  private value: string;

  @Input('changeMonth') changeMonth:boolean = true;
  @Input('changeYear') changeYear:boolean = true;

  constructor(private el: ElementRef) {

  }

  ngAfterViewInit(){
    $(this.el.nativeElement).datepicker({
      changeMonth: this.changeMonth,
      yearRange: "1:100",
      changeYear: this.changeYear
    }).on('change', e => this.onChange(e.target.value));
  }

  onChange: Function = () => {};

  onTouched: Function = () => {};

  writeValue(val: string) : void {
    this.value = val;
  }

  registerOnChange(fn: Function): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: Function): void {
    this.onTouched = fn;
  }
}

Происходит следующее: даже когда я выбираю дату (средство выбора) или печатаю ее непосредственно в поле ввода, она не обновляет свойство «трогано».

У вас есть какие-нибудь идеи по его устранению?