Getting data from Datepicker materialize

Question

How do you get the data out of a materialize datepicker?

I am trying to use Angular 2 data binding to get the data and it is not working.

My binding to startDate is never called and it never changes, it stays undefined.

---

DateStuff.html

<form action="#">
  <div class="input-field">
    <input id="date_picker" type="date" class="datepicker" [(ngModel)]="startDate">
    <label for="date_picker">Start Date</label>
  </div>
</form>

---

DateStuff.ts

@Component({
    selector: "date-stuff",
    templateUrl: "./DateStuff.html"
})
export class DateStuff {

    private _startDate: string;

    public ngAfterViewInit(): void {
        $(".datepicker").pickadate({
            selectMonths: true, // Creates a dropdown to control month
            selectYears: 15 // Creates a dropdown of 15 years to control year
        });
    }

    public get startDate(): string {
        return this._startDate;
    }

    public set startDate(value: string) {
        this._startDate = value;
    }
}

Answer 1

I found a solution. I was hoping to use Angular 2 bindings, but i found a way with jquery.

let year: string = $('.datepicker').pickadate('picker').get('highlight', 'yyyy');
let day: string = $('.datepicker').pickadate('picker').get('highlight', 'dd');
let month: string = $('.datepicker').pickadate('picker').get('highlight', 'mm');

If anyone has a more elegant solution with Angular 2, that would be great!