Angular2 jquery date picker

<!DOCTYPE html>
<html>

  <head>
    <title>Angular2 Example</title>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script>
    <script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
    <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->
    <!--script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.3/build/jquery.datetimepicker.full.js"/-->
    <script   src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"   integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="   crossorigin="anonymous"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {
          'app': {
            defaultExtension: 'ts'
          }
        } 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <app>
    loading...
  </app>
  </body>

</html>

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  }
});

import {bootstrap} from 'angular2/platform/browser';
import {
  Component, 
  ElementRef,
  Directive,
  Output,
  EventEmitter
} from 'angular2/core';

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

@Component({
  selector: 'app',
  template: '<input type="date" [(ngModel)]="datum"  id="end_day" (change)="checkDates($event)" class="datepicker" datepicker><br>{{datum}}',
  directives: [ DatepickerDirective ]
})

export class App implements AfterViewInit {
    datum:string = '1970-01-01';
    ngAfterViewInit():any{
        /*$('#end_day').datepicker({
          onSelect: () => {
            console.log('select');
          }
        });*/
    }

    checkDates(e){
        console.log("Please, catch the change event ): "+e);
    }
}

bootstrap(App).catch(err => console.error(err));