From cf8963c44aaee375bfc3806b8684a87d9047bdf2 Mon Sep 17 00:00:00 2001
From: Admir Sabanovic <admir_sabanovic@live.com>
Date: Sat, 20 May 2017 01:24:49 +0200
Subject: [PATCH] 262-datepicker-binding fix

---
 sample/src/app/components/datepicker.ts | 22 +++++++++++++------
 src/materialize-directive.ts            | 28 ++++++++++++-------------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/sample/src/app/components/datepicker.ts b/sample/src/app/components/datepicker.ts
index e30e01e..4745e40 100644
--- a/sample/src/app/components/datepicker.ts
+++ b/sample/src/app/components/datepicker.ts
@@ -1,5 +1,5 @@
-import {MaterializeDirective} from "angular2-materialize";
-import {Component} from "@angular/core"
+import {Component} from '@angular/core';
+declare var Materialize: any;
 
 @Component({
     selector: "datePicker",
@@ -7,14 +7,24 @@ import {Component} from "@angular/core"
       <form materialize class="col s12">
         <div class="row">
           <div class="col s6">
-            <label for="birthdate">Birthdate</label>
-            <input id="birthdate"
+            <label for="birthdate">Birthdate {{birthdate}}</label>
+            <input id="birthdate" [(ngModel)]="birthdate" name="birthdate" (ngModelChange)="modelChanged($event)"
                    materialize="pickadate"
-                   [materializeParams]="[{selectMonths: true, selectYears: 15}]"
+                   [materializeParams]="[{format: 'dd/mm/yyyy'}]"
                    type="text" />
           </div>
         </div>
       </form>
     `
 })
-export class DatePicker {}
+export class DatePicker {
+    birthdate;
+
+    constructor() {
+        this.birthdate = new Date('03/12/2017');
+    }
+
+    modelChanged($event) {
+        console.log($event);
+    }
+}
diff --git a/src/materialize-directive.ts b/src/materialize-directive.ts
index 72c646a..e3a1649 100644
--- a/src/materialize-directive.ts
+++ b/src/materialize-directive.ts
@@ -68,6 +68,9 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
     // this is here to trigger change detection for select elements
     @Input() public set materializeSelectOptions(options:any) { }
 
+    //used for the datepicker at the moment
+    @Input() ngModel;
+
     public ngAfterViewInit() {
       this.performElementUpdates();
     }
@@ -153,22 +156,17 @@ export class MaterializeDirective implements AfterViewInit,DoCheck,OnChanges,OnD
         jQueryElement.on("change", e => nativeElement.dispatchEvent((<any>CustomEvent("input"))));
       }
 
-      if (this.isDatePicker()) {
-        const nativeElement = this._el.nativeElement;
-        const jQueryElement = $(nativeElement);
-        const enablebtns = this.enableDPButtons;
+        if (this.isDatePicker()) {
+            const nativeElement = this._el.nativeElement;
+            const jqueryPickerElement = $(nativeElement);
 
-        jQueryElement.on("change", e => nativeElement.dispatchEvent((<any>CustomEvent("input"))));
-        const datePicker = jQueryElement[this._functionName](...this._params);
-        const picker = datePicker.pickadate('picker');
-        jQueryElement.mousedown(() => {
-          if (!jQueryElement.val()) {
-            return;
-          }
-
-          return picker.set('select', jQueryElement.val(), ...this._params)
-        });
-      }
+            const datePicker = jqueryPickerElement[this._functionName](...this._params);
+            const picker = datePicker.pickadate('picker');
+            setTimeout(() => {
+                picker.set('select', this.ngModel);
+                jqueryPickerElement.on('change', e => nativeElement.dispatchEvent(new Event('input')));
+            });
+        }
 
       if (this.isTimePicker()) {
         const nativeElement = this._el.nativeElement;