Add support controlvalue accessor

integration-test/app.component.ts

@@ -1,32 +1,34 @@
 import { Component, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'my-app',
   template: `
       <material-datepicker
-        [(date)]="date"
         (onSelect)="onSelect($event)"
+        [formControl]="dateControl"
         dateFormat="YYYY-MM-DD"
         [rangeEnd]="testRangeDate"
       ></material-datepicker>
 
       <button (click)="setToday()">today</button>
       <button (click)="clearDate()">reset</button>
       <hr>
-      {{ date }}
+      {{ dateControl.value }}
       <p>
       Mirror(disabled, DD-MM-YYYY):
       <material-datepicker
+      [formControl]="dateControl"
         placeholder="nothing is selected"
         disabled="true"
-        [(date)]="date"
         [dateFormat]="formatDate"
       ></material-datepicker>
 
     `
 })
 export class AppComponent {
-  date: Date;
+  date = new Date();
+  dateControl = new FormControl(this.date);
   disabled: boolean;
   @Input() testRangeDate: Date;
 
@@ -42,9 +44,9 @@ export class AppComponent {
     console.log("onSelect: ", date);
   }
   clearDate() {
-    this.date = null;
+    this.dateControl.reset();
   }
   setToday() {
-    this.date = new Date();
+    this.dateControl.setValue(new Date());
   }
 }

integration-test/app.module.ts

@@ -1,17 +1,18 @@
-import { NgModule }      from '@angular/core';
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule }   from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { AppComponent }   from './app.component';
+import { AppComponent } from './app.component';
 import { DatepickerModule } from '../src/datepicker.module';
 
 @NgModule({
   imports: [
     BrowserModule,
     DatepickerModule,
     FormsModule,
+    ReactiveFormsModule
   ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
+  declarations: [AppComponent],
+  bootstrap: [AppComponent]
 })
 export class AppModule { }

src/datepicker.component.ts

@@ -1,21 +1,27 @@
 import {
   animate, Component, ElementRef, EventEmitter, Input, keyframes, OnChanges,
-  OnInit, Output, Renderer, SimpleChange, state, style, transition, trigger
+  OnInit, Output, Renderer, SimpleChange, state, style, transition, trigger,
+  forwardRef, HostListener
 } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
-
+import { FormControl, Validators, NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+export const DATETIME_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => DatepickerComponent),
+  multi: true
+};
 import { Calendar } from './calendar';
 
 interface DateFormatFunction {
   (date: Date): string;
 }
 
 interface ValidationResult {
-  [key:string]: boolean;
+  [key: string]: boolean;
 }
 
 @Component({
   selector: 'material-datepicker',
+  providers: [DATETIME_VALUE_ACCESSOR],
   animations: [
     trigger('calendarAnimation', [
       transition('* => left', [
@@ -316,8 +322,7 @@ export class DatepickerComponent implements OnInit, OnChanges {
   // two way bindings
   @Output() dateChange = new EventEmitter<Date>();
 
-  @Input() get date(): Date { return this.dateVal; };
-  set date(val: Date) {
+  writeValue(val: any) {
     this.dateVal = val;
     this.dateChange.emit(val);
   }
@@ -353,7 +358,8 @@ export class DatepickerComponent implements OnInit, OnChanges {
   clickListener: Function;
   // forms
   yearControl: FormControl;
-
+  // control value accessor
+  propagateChange = (_: any) => { };
 
   constructor(private renderer: Renderer, private elementRef: ElementRef) {
     this.dateFormat = 'YYYY-MM-DD';
@@ -403,7 +409,17 @@ export class DatepickerComponent implements OnInit, OnChanges {
   ngOnDestroy() {
     this.clickListener();
   }
-
+  //----------------------------------------------------------------------------------//
+  //-------------------------------- ControlValueAccessor ----------------------------//
+  //----------------------------------------------------------------------------------//
+  /**
+  * To act like a normal input
+  */
+  registerOnChange(fn: any) {
+    this.propagateChange = fn;
+  }
+  registerOnTouched(fn: any) { this.onTouched = fn; }
+  onTouched() { }
   //----------------------------------------------------------------------------------//
   //-------------------------------- State Management --------------------------------//
   //----------------------------------------------------------------------------------//
@@ -434,9 +450,9 @@ export class DatepickerComponent implements OnInit, OnChanges {
   * Visually syncs calendar and input to selected date or current day
   */
   syncVisualsWithDate(): void {
-    if (this.date) {
-      this.setInputText(this.date);
-      this.setCurrentValues(this.date);
+    if (this.dateVal) {
+      this.setInputText(this.dateVal);
+      this.setCurrentValues(this.dateVal);
     }
     else {
       this.inputText = '';
@@ -567,7 +583,9 @@ export class DatepickerComponent implements OnInit, OnChanges {
   * Returns the font color for a day
   */
   onSelectDay(day: Date): void {
-    this.date = day;
+    this.propagateChange(day)
+    this.dateVal = day;
+    this.setInputText(day)
     this.onSelect.emit(day);
     this.showCalendar = !this.showCalendar;
   }
@@ -622,7 +640,7 @@ export class DatepickerComponent implements OnInit, OnChanges {
   */
   isChosenDay(day: Date): boolean {
     if (day) {
-      return this.date ? day.toDateString() == this.date.toDateString() : false;
+      return this.dateVal ? day.toDateString() == this.dateVal.toDateString() : false;
     } else {
       return false;
     }
@@ -683,5 +701,5 @@ export class DatepickerComponent implements OnInit, OnChanges {
       return null;
     }
     return { "invalidYear": true };
-	}
+  }
 }