import {Directive, ElementRef, Output, HostListener, EventEmitter} from 'angular2/core';
declare var Polymer;

@Directive({selector: 'vaadin-date-picker'})
export class VaadinDatePicker {

  private element;

  @Output() valueChange: EventEmitter<any> = new EventEmitter(false);
  @HostListener('value-changed', ['$event.detail.value'])
  valuechanged(value) {
    if (value) {
      this.valueChange.emit(value);
      this.element.fire('input');
    }
  }

  @Output() invalidChange: EventEmitter<any> = new EventEmitter(false);
  @HostListener('invalid-changed', ['$event.detail.value'])
  invalidchanged(value) {
    this.invalidChange.emit(value);
  }

  onImport(e) {
    this.element.$$('paper-input-container').addEventListener('blur', () => {
      if (!this.element.opened && !this.element._opened) {
        this.element.fire('blur');
      }
    });
  }

  constructor(el: ElementRef) {
    this.element = el.nativeElement;
    if (!Polymer.isInstance(el.nativeElement)) {
      Polymer.Base.importHref('bower_components/vaadin-date-picker/vaadin-date-picker.html', this.onImport.bind(this));
    }
  }
}

import {Directive, ElementRef, Output, HostListener, EventEmitter} from 'angular2/core';

@Directive({selector: 'vaadin-date-picker'})

export class VaadinDatePicker {
  
  @Output() _selectedDateChange: EventEmitter<any> = new EventEmitter(false);
  @HostListener('selected-date-changed', ['$event.detail.value'])
  _selectedDatechanged(value) {
    this._selectedDateChange.emit(value);
  }
  
  @Output() valueChange: EventEmitter<any> = new EventEmitter(false);
  @HostListener('value-changed', ['$event.detail.value'])
  valuechanged(value) {
    this.valueChange.emit(value);
  }
  
  @Output() invalidChange: EventEmitter<any> = new EventEmitter(false);
  @HostListener('invalid-changed', ['$event.detail.value'])
  invalidchanged(value) {
    this.invalidChange.emit(value);
  }
  
  constructor(el: ElementRef) {
    if (!Polymer.isInstance(el.nativeElement)) {
      Polymer.Base.importHref('bower_components/vaadin-date-picker/vaadin-date-picker.html')
    }
  }
}

--- 
+++ 
@@ -1,30 +1,38 @@
 import {Directive, ElementRef, Output, HostListener, EventEmitter} from 'angular2/core';
+declare var Polymer;
 
 @Directive({selector: 'vaadin-date-picker'})
+export class VaadinDatePicker {
 
-export class VaadinDatePicker {
-  
-  @Output() _selectedDateChange: EventEmitter<any> = new EventEmitter(false);
-  @HostListener('selected-date-changed', ['$event.detail.value'])
-  _selectedDatechanged(value) {
-    this._selectedDateChange.emit(value);
-  }
-  
+  private element;
+
   @Output() valueChange: EventEmitter<any> = new EventEmitter(false);
   @HostListener('value-changed', ['$event.detail.value'])
   valuechanged(value) {
-    this.valueChange.emit(value);
+    if (value) {
+      this.valueChange.emit(value);
+      this.element.fire('input');
+    }
   }
-  
+
   @Output() invalidChange: EventEmitter<any> = new EventEmitter(false);
   @HostListener('invalid-changed', ['$event.detail.value'])
   invalidchanged(value) {
     this.invalidChange.emit(value);
   }
-  
+
+  onImport(e) {
+    this.element.$$('paper-input-container').addEventListener('blur', () => {
+      if (!this.element.opened && !this.element._opened) {
+        this.element.fire('blur');
+      }
+    });
+  }
+
   constructor(el: ElementRef) {
+    this.element = el.nativeElement;
     if (!Polymer.isInstance(el.nativeElement)) {
-      Polymer.Base.importHref('bower_components/vaadin-date-picker/vaadin-date-picker.html')
+      Polymer.Base.importHref('bower_components/vaadin-date-picker/vaadin-date-picker.html', this.onImport.bind(this));
     }
   }
 }
Update Angular2 directive with ngControl support
