title: Angular 2 Directive implementing ControlValueAccessor doesn't update 'touched' property on change
body: <p>I'm trying to create my own Angular 2 Directive for Jquery UI Datepicker. I've seen some different approaches on the internet and in SO as well, but no one achieves the goal that I want to. So this is the code that I have so far:</p>
  
  <pre><code>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(() =&gt; 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 =&gt; this.onChange(e.target.value));
    }
  
    onChange: Function = () =&gt; {};
  
    onTouched: Function = () =&gt; {};
  
    writeValue(val: string) : void {
      this.value = val;
    }
  
    registerOnChange(fn: Function): void {
      this.onChange = fn;
    }
  
    registerOnTouched(fn: Function): void {
      this.onTouched = fn;
    }
  }
  </code></pre>
  
  <p>What is happening is that even when I select a date (picker) or type it directly on input field, it isn't updating "touched" property.</p>
  
  <p>Do you have any ideas for fixing it?</p>