How to set/get values from a date picker in jquery using angular 2

datepicker_angular2.js

/// <reference path="../../../../typings/jquery/jquery.d.ts" />
// TODO: Create date picker directive
declare var jQuery: JQueryStatic;

export class Main implements OnInit {
  public date: any;

  constructor() {
    this.date = '2016-04-29';
  }

  public ngOnInit() {
    this.initJQueryComponents();
  }

  public submit() {
    console.log(jQuery('.datepicker').val());
    console.log(this.date); // Date picker value and this.date is the same
  }

  protected initJQueryComponents() {
    jQuery(document).ready(() => {
      let datePicker = jQuery('.datepicker').pickadate({
          selectMonths: true, // Creates a dropdown to control month
          selectYears: 15 // Creates a dropdown of 15 years to control year
        })
        .on('change', () => {
          this.date = jQuery('.datepicker').val();
          console.log('triggered change');
        });

      datePicker.pickadate('picker').set('select', this.date, { format: 'yyyy-mm-dd'});
    });
  }
}

template.html

<div id="main">
  <input type="date" class="datepicker">
  <button (click)="submit()">Submit</button>
</div>