fix(datepicker): upgrade to beta 1, issue #38

components/datepicker/datepicker-inner.ts

@@ -1,11 +1,12 @@
 import {
   Component, View, Host,
   OnInit, EventEmitter,
-  DefaultValueAccessor,
   ElementRef, ViewContainerRef,
-  NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
-  Self, NgModel, Renderer
+  Self, Renderer, Input
 } from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES,
+  DefaultValueAccessor, NgIf, NgClass, NgModel
+} from 'angular2/common';
 
 import * as moment from 'moment';
 
@@ -45,68 +46,44 @@ const KEYS = {
 @Component({
   selector: 'datepicker-inner',
   events: ['update'],
-  properties: [
-    'activeDate',
-    'datepickerMode',
-    'initDate',
-    'minDate',
-    'maxDate',
-    'minMode',
-    'maxMode',
-    'showWeeks',
-    'formatDay',
-    'formatMonth',
-    'formatYear',
-    'formatDayHeader',
-    'formatDayTitle',
-    'formatMonthTitle',
-    'startingDay',
-    'yearRange',
-    'shortcutPropagation',
-    'customClass',
-    'dateDisabled',
-    'templateUrl'
-  ]
-})
-@View({
   template: `
-<div [hidden]="!datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
-  <ng-content></ng-content>
-</div>
+    <div [hidden]="!datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--&lt;!&ndash;ng-keydown="keydown($event)"&ndash;&gt;-->
+      <ng-content></ng-content>
+    </div>
   `,
   directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass, NgModel]
 })
 export class DatePickerInner implements OnInit {
-  public datepickerMode:string;
-  public startingDay:number;
-  public yearRange:number;
+  @Input() public datepickerMode:string;
+  @Input() public startingDay:number;
+  @Input() public yearRange:number;
   public stepDay:any = {};
   public stepMonth:any = {};
   public stepYear:any = {};
 
   private modes:Array<string> = ['day', 'month', 'year'];
   private dateFormatter:DateFormatter = new DateFormatter();
   private uniqueId:string;
-  private _initDate:Date;
   private _activeDate:Date;
+  private _initDate:Date;
   private activeDateId:string;
-  private minDate:Date;
-  private maxDate:Date;
-  private minMode:string;
-  private maxMode:string;
-  private showWeeks:boolean;
-  private formatDay:string;
-  private formatMonth:string;
-  private formatYear:string;
-  private formatDayHeader:string;
-  private formatDayTitle:string;
-  private formatMonthTitle:string;
-  private shortcutPropagation:boolean;
+  @Input() private minDate:Date;
+  @Input() private maxDate:Date;
+  @Input() private minMode:string;
+  @Input() private maxMode:string;
+  @Input() private showWeeks:boolean;
+  @Input() private formatDay:string;
+  @Input() private formatMonth:string;
+  @Input() private formatYear:string;
+  @Input() private formatDayHeader:string;
+  @Input() private formatDayTitle:string;
+  @Input() private formatMonthTitle:string;
+  @Input() private shortcutPropagation:boolean;
   // todo: change type during implementation
-  private customClass:any;
+  @Input() private customClass:any;
   // todo: change type during implementation
-  private dateDisabled:any;
-  private templateUrl:string;
+  @Input() private dateDisabled:any;
+  @Input() private templateUrl:string;
 
   private refreshViewHandlerDay:Function;
   private compareHandlerDay:Function;
@@ -116,15 +93,15 @@ export class DatePickerInner implements OnInit {
   private compareHandlerYear:Function;
   private update:EventEmitter<Date> = new EventEmitter();
 
-  private get initDate():Date {
+  @Input() private get initDate():Date {
     return this._initDate;
   }
 
   private set initDate(value:Date) {
     this._initDate = value;
   }
 
-  private get activeDate():Date {
+  @Input() private get activeDate():Date {
     return this._activeDate;
   }
 
@@ -287,7 +264,7 @@ export class DatePickerInner implements OnInit {
   }
 
   public move(direction:number) {
-    let expectedStep;
+    let expectedStep:any;
     if (this.datepickerMode === 'day') {
       expectedStep = this.stepDay;
     }

components/datepicker/datepicker-popup.ts

@@ -1,12 +1,16 @@
 import {
   Component, View, Host, Directive,
-  OnInit, EventEmitter, NgControl,
-  DefaultValueAccessor, ComponentRef, ViewEncapsulation, ControlValueAccessor,
+  OnInit, EventEmitter,
+  ComponentRef, ViewEncapsulation,
   ElementRef, ViewContainerRef, DynamicComponentLoader,
-  NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
-  Self, NgModel, Renderer, NgStyle
+  Self, Renderer
 } from 'angular2/core';
 
+import {CORE_DIRECTIVES, FORM_DIRECTIVES,
+   DefaultValueAccessor, ControlValueAccessor,
+   NgIf, NgClass, NgModel, NgStyle, NgControl
+} from 'angular2/common';
+
 // import {setProperty} from 'angular2/src/forms/directives/shared';
 // import {DOM} from 'angular2/src/dom/dom_adapter';
 
@@ -42,9 +46,7 @@ const datePickerPopupConfig:Object = {
 
 @Component({
   selector: 'popup-container',
-  events: ['update1']
-})
-@View({
+  events: ['update1'],
   template: `
     <ul class="dropdown-menu"
         style="display: block"
@@ -64,24 +66,25 @@ const datePickerPopupConfig:Object = {
   directives: [NgClass, NgStyle, DatePicker, FORM_DIRECTIVES, CORE_DIRECTIVES],
   encapsulation: ViewEncapsulation.None
 })
+
 class PopupContainer {
   public popupComp:DatePickerPopup;
 
-  private classMap:Object;
+  private classMap:any;
   private top:string;
   private left:string;
   private display:string;
   private placement:string;
   private showButtonBar:boolean = true;
-  private update1:EventEmitter = new EventEmitter();
+  private update1:EventEmitter<any> = new EventEmitter();
 
   constructor(public element:ElementRef, options:PopupOptions) {
     Object.assign(this, options);
     this.classMap = {'in': false};
     this.classMap[options.placement] = true;
   }
 
-  public onUpdate($event) {
+  public onUpdate($event:any) {
     console.log('update', $event);
     if ($event) {
       if (typeof $event !== 'Date') {

components/datepicker/datepicker.ts

@@ -1,12 +1,14 @@
 import {
   Component, View, Host,
   EventEmitter,
-  ControlValueAccessor,
   ElementRef, ViewContainerRef,
-  NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
-  Self, NgModel, Renderer,
-  QueryList, Query
+  Self, Renderer,
+  QueryList, Query,
+  Input
 } from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES,
+  ControlValueAccessor, NgIf, NgClass, NgModel
+} from 'angular2/common';
 
 import * as moment from 'moment';
 
@@ -18,79 +20,66 @@ import {YearPicker} from './yearpicker';
 
 @Component({
   selector: 'datepicker[ngModel], [datepicker][ng-model]',
-  properties: [
-    'datepickerMode',
-    'minDate', 'maxDate',
-    'dateDisabled', 'activeDate',
-    'showWeeks', 'startingDay',
-    'initDate',
-    'minMode', 'maxMode',
-    'formatDay', 'formatMonth', 'formatYear',
-    'formatDayHeader', 'formatDayTitle', 'formatMonthTitle',
-    'yearRange',
-    'shortcutPropagation'
-  ]
-})
-@View({
   template: `
-    <datepicker-inner [active-date]="activeDate"
+    <datepicker-inner [activeDate]="activeDate"
                       (update)="onUpdate($event)"
-                      [datepicker-mode]="datepickerMode"
-                      [init-date]="initDate"
-                      [min-date]="minDate"
-                      [max-date]="maxDate"
-                      [min-mode]="minMode"
-                      [max-mode]="maxMode"
-                      [show-weeks]="showWeeks"
-                      [format-day]="formatDay"
-                      [format-month]="formatMonth"
-                      [format-year]="formatYear"
-                      [format-day-header]="formatDayHeader"
-                      [format-day-title]="formatDayTitle"
-                      [format-month-title]="formatMonthTitle"
-                      [starting-day]="startingDay"
-                      [year-range]="yearRange"
-                      [custom-class]="customClass"
-                      [date-disabled]="dateDisabled"
-                      [template-url]="templateUrl"
-                      [shortcut-propagation]="shortcutPropagation">
+                      [datepickerMode]="datepickerMode"
+                      [initDate]="initDate"
+                      [minDate]="minDate"
+                      [maxDate]="maxDate"
+                      [minMode]="minMode"
+                      [maxMode]="maxMode"
+                      [showWeeks]="showWeeks"
+                      [formatDay]="formatDay"
+                      [formatMonth]="formatMonth"
+                      [formatYear]="formatYear"
+                      [formatDayHeader]="formatDayHeader"
+                      [formatDayTitle]="formatDayTitle"
+                      [formatMonthTitle]="formatMonthTitle"
+                      [startingDay]="startingDay"
+                      [yearRange]="yearRange"
+                      [customClass]="customClass"
+                      [dateDisabled]="dateDisabled"
+                      [templateUrl]="templateUrl"
+                      [shortcutPropagation]="shortcutPropagation">
       <daypicker tabindex="0"></daypicker>
       <monthpicker tabindex="0"></monthpicker>
       <yearpicker tabindex="0"></yearpicker>
     </datepicker-inner>
     `,
   directives: [DatePickerInner, DayPicker, MonthPicker, YearPicker, FORM_DIRECTIVES, CORE_DIRECTIVES]
 })
+
 export class DatePicker implements ControlValueAccessor {
   private _activeDate:Date;
-  private datepickerMode:string;
-  private initDate:Date;
-  private minDate:Date;
-  private maxDate:Date;
-  private minMode:string;
-  private maxMode:string;
-  private showWeeks:boolean;
-  private formatDay:string;
-  private formatMonth:string;
-  private formatYear:string;
-  private formatDayHeader:string;
-  private formatDayTitle:string;
-  private formatMonthTitle:string;
-  private startingDay:number;
-  private yearRange:number;
-  private shortcutPropagation:boolean;
+  @Input() private datepickerMode:string;
+  @Input() private initDate:Date;
+  @Input() private minDate:Date;
+  @Input() private maxDate:Date;
+  @Input() private minMode:string;
+  @Input() private maxMode:string;
+  @Input() private showWeeks:boolean;
+  @Input() private formatDay:string;
+  @Input() private formatMonth:string;
+  @Input() private formatYear:string;
+  @Input() private formatDayHeader:string;
+  @Input() private formatDayTitle:string;
+  @Input() private formatMonthTitle:string;
+  @Input() private startingDay:number;
+  @Input() private yearRange:number;
+  @Input() private shortcutPropagation:boolean;
   // todo: change type during implementation
   private customClass:any;
   // todo: change type during implementation
-  private dateDisabled:any;
+  @Input() private dateDisabled:any;
   private templateUrl:string;
 
   constructor(@Self() public cd:NgModel) {
     // hack
     cd.valueAccessor = this;
   }
 
-  public get activeDate():Date {
+  @Input() public get activeDate():Date {
     return this._activeDate;
   }
 
@@ -99,7 +88,7 @@ export class DatePicker implements ControlValueAccessor {
     this.cd.viewToModelUpdate(moment(this.activeDate).toDate());
   }
 
-  private onUpdate(event) {
+  private onUpdate(event:any) {
     this.writeValue(event);
   }
 
@@ -124,7 +113,7 @@ export class DatePicker implements ControlValueAccessor {
 
   }
 
-  onChange = (_) => {};
+  onChange = (_:any) => {};
   onTouched = () => {};
 
   registerOnChange(fn:(_:any) => {}):void {