fix(datepicker): Changed handling of value change

Author: rastr5189

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">

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"])

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")