diff --git a/demo/src/app/pages/modules/datepicker/datepicker.page.ts b/demo/src/app/pages/modules/datepicker/datepicker.page.ts
index cde1ad3c2..e62719742 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">
@@ -205,6 +206,7 @@ export class DatepickerExampleButton {}
 export class DatepickerExampleMinMax {
     public min:Date;
     public max:Date;
+    public date:Date;
 
     constructor() {
         const today = new Date();
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")