From c634e3f6755c95c3277f29ed85597642065a659a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Radim=20Str=C3=BD=C4=8Dek?= <radim.strycek@gmail.com>
Date: Wed, 29 Nov 2017 22:01:32 +0100
Subject: [PATCH 1/2] fix(datepicker): Changed handling of value change

---
 .../pages/modules/datepicker/datepicker.page.ts    |  1 +
 .../datepicker/directives/datepicker.directive.ts  | 11 ++++++-----
 .../datepicker/directives/input.directive.ts       | 14 +++++++++-----
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/demo/src/app/pages/modules/datepicker/datepicker.page.ts b/demo/src/app/pages/modules/datepicker/datepicker.page.ts
index cde1ad3c2..9fac9f4cf 100644
--- a/demo/src/app/pages/modules/datepicker/datepicker.page.ts
+++ b/demo/src/app/pages/modules/datepicker/datepicker.page.ts
@@ -54,6 +54,7 @@ const exampleMinMaxTemplate = `
         <div class="ui left icon input">
             <i class="calendar icon"></i>
             <input suiDatepicker
+                   [(ngModel)]="date"
                    [pickerMinDate]="min"
                    [pickerMaxDate]="max"
                    [pickerUseNativeOnMobile]="false">
diff --git a/src/modules/datepicker/directives/datepicker.directive.ts b/src/modules/datepicker/directives/datepicker.directive.ts
index a78851614..7e23ab924 100644
--- a/src/modules/datepicker/directives/datepicker.directive.ts
+++ b/src/modules/datepicker/directives/datepicker.directive.ts
@@ -29,6 +29,7 @@ export class SuiDatepickerDirective
     public set selectedDate(date:Date | undefined) {
         this._selectedDate = date;
         this.onSelectedDateChange.emit(date);
+        this.onViewValueChange.emit(date);
     }
 
     private _mode:DatepickerMode;
@@ -104,6 +105,8 @@ export class SuiDatepickerDirective
     @Output("pickerValidatorChange")
     public onValidatorChange:EventEmitter<void>;
 
+    public onViewValueChange:EventEmitter<Date>;
+
     constructor(public renderer:Renderer2,
                 element:ElementRef,
                 componentFactory:SuiComponentFactory,
@@ -125,6 +128,7 @@ export class SuiDatepickerDirective
 
         this.onSelectedDateChange = new EventEmitter<Date>();
         this.onValidatorChange = new EventEmitter<void>();
+        this.onViewValueChange = new EventEmitter<Date>();
 
         this.mode = DatepickerMode.Datetime;
     }
@@ -181,11 +185,8 @@ export class SuiDatepickerDirective
     }
 
     public writeValue(value:Date | undefined):void {
-        this.selectedDate = value;
-
-        if (this.componentInstance) {
-            this.componentInstance.service.selectedDate = value;
-        }
+        this._selectedDate = value;
+        this.onViewValueChange.emit(value);
     }
 
     @HostListener("keydown", ["$event"])
diff --git a/src/modules/datepicker/directives/input.directive.ts b/src/modules/datepicker/directives/input.directive.ts
index ceea9258d..d4f3c4304 100644
--- a/src/modules/datepicker/directives/input.directive.ts
+++ b/src/modules/datepicker/directives/input.directive.ts
@@ -96,7 +96,7 @@ export class SuiDatepickerInputDirective {
         this.fallbackActive = false;
 
         // Whenever the datepicker value updates, update the input text alongside it.
-        this.datepicker.onSelectedDateChange.subscribe(() =>
+        this.datepicker.onViewValueChange.subscribe(() =>
             this.updateValue(this.selectedDateString));
 
         localizationService.onLanguageUpdate.subscribe(() =>
@@ -120,14 +120,18 @@ export class SuiDatepickerInputDirective {
 
         if (!value) {
             // Delete the selected date if no date was entered manually.
-            return this.datepicker.writeValue(undefined);
+            this.datepicker.selectedDate = undefined;
+            return;
         }
 
-        const parsed = this.parser.parse(value, this.datepicker.selectedDate);
+        const parsed:Date = this.parser.parse(value, this.datepicker.selectedDate);
+
         if (!isNaN(parsed.getTime()) && value === this.parser.format(parsed)) {
-            return this.datepicker.writeValue(parsed);
+            this.datepicker.selectedDate = parsed;
+            return;
         }
-        return this.datepicker.writeValue(undefined);
+
+        this.datepicker.selectedDate = undefined;
     }
 
     @HostListener("focusout")

From a843df838d7b70de51d1dd1b2a069dfbda7f100f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Radim=20Str=C3=BD=C4=8Dek?= <radim.strycek@gmail.com>
Date: Wed, 29 Nov 2017 22:58:34 +0100
Subject: [PATCH 2/2] fix(datepicker): Fixed missing property in
 DatepickerExampleMinMax documentation class

---
 demo/src/app/pages/modules/datepicker/datepicker.page.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/demo/src/app/pages/modules/datepicker/datepicker.page.ts b/demo/src/app/pages/modules/datepicker/datepicker.page.ts
index 9fac9f4cf..e62719742 100644
--- a/demo/src/app/pages/modules/datepicker/datepicker.page.ts
+++ b/demo/src/app/pages/modules/datepicker/datepicker.page.ts
@@ -206,6 +206,7 @@ export class DatepickerExampleButton {}
 export class DatepickerExampleMinMax {
     public min:Date;
     public max:Date;
+    public date:Date;
 
     constructor() {
         const today = new Date();