fix: Merge pull request #272 from criticalbh/262-datepicker-binding

262-datepicker-binding fix
InfomediaLtd · May 21, 2017 · 275fc45 · 275fc45
2 parents 4e9b922 + cf8963c
commit 275fc45
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/sample/src/app/components/datepicker.ts b/sample/src/app/components/datepicker.ts
@@ -1,20 +1,30 @@
-import {MaterializeDirective} from "angular2-materialize";
-import {Component} from "@angular/core"
+import {Component} from '@angular/core';
+declare var Materialize: any;
 
 @Component({
     selector: "datePicker",
     template: `
       <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
@@ -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;