diff --git a/components/datepicker/datepicker-inner.ts b/components/datepicker/datepicker-inner.ts
index 009f02390e..e7292939fc 100644
--- a/components/datepicker/datepicker-inner.ts
+++ b/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,41 +46,17 @@ 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 = {};
@@ -87,26 +64,26 @@ export class DatePickerInner implements OnInit {
   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,7 +93,7 @@ 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;
   }
 
@@ -124,7 +101,7 @@ export class DatePickerInner implements OnInit {
     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;
     }
diff --git a/components/datepicker/datepicker-popup.ts b/components/datepicker/datepicker-popup.ts
index abc438ee65..5b0d9f2431 100644
--- a/components/datepicker/datepicker-popup.ts
+++ b/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,16 +66,17 @@ 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);
@@ -81,7 +84,7 @@ class PopupContainer {
     this.classMap[options.placement] = true;
   }
 
-  public onUpdate($event) {
+  public onUpdate($event:any) {
     console.log('update', $event);
     if ($event) {
       if (typeof $event !== 'Date') {
diff --git a/components/datepicker/datepicker.ts b/components/datepicker/datepicker.ts
index 365333d71a..a85d762d70 100644
--- a/components/datepicker/datepicker.ts
+++ b/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,42 +20,28 @@ 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>
@@ -61,28 +49,29 @@ import {YearPicker} from './yearpicker';
     `,
   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) {
@@ -90,7 +79,7 @@ export class DatePicker implements ControlValueAccessor {
     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 {
diff --git a/components/datepicker/daypicker.ts b/components/datepicker/daypicker.ts
index fdc933b9d5..5c33d0adbe 100644
--- a/components/datepicker/daypicker.ts
+++ b/components/datepicker/daypicker.ts
@@ -1,16 +1,18 @@
 import {
   Component, View, Host, Directive,
   OnInit, EventEmitter,
-  DefaultValueAccessor,
   ElementRef, ViewContainerRef,
-  NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
-  Self, NgModel, Renderer
+  Self, Renderer
 } from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES,
+  DefaultValueAccessor, NgIf, NgClass, NgModel
+} from 'angular2/common';
 
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap-config';
 import {DatePickerInner} from './datepicker-inner';
 
-const TEMPLATE_OPTIONS = {
+//write an interface for template options
+const TEMPLATE_OPTIONS:any = {
   [Ng2BootstrapTheme.BS4]: {
     DAY_BUTTON: `
         <button type="button" style="min-width:100%;" class="btn btn-sm"
@@ -33,13 +35,11 @@ const TEMPLATE_OPTIONS = {
   }
 };
 
-const CURRENT_THEME_TEMPLATE = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme || Ng2BootstrapTheme.BS3];
+const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme || Ng2BootstrapTheme.BS3];
 
 @Component({
-  selector: 'daypicker, [daypicker]'
-})
-@View({
-  template: `
+  selector: 'daypicker, [daypicker]',
+   template: `
 <table [hidden]="datePicker.datepickerMode!=='day'" role="grid" aria-labelledby="uniqueId+'-title'" aria-activedescendant="activeDateId">
   <thead>
     <tr>
@@ -90,6 +90,7 @@ const CURRENT_THEME_TEMPLATE = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme || Ng2B
   `,
   directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass]
 })
+
 export class DayPicker implements OnInit {
 
   public labels:Array<any> = [];
@@ -109,7 +110,7 @@ export class DayPicker implements OnInit {
     let dates:Array<Date> = new Array(n);
     let current = new Date(startDate.getTime());
     let i = 0;
-    let date;
+    let date:Date;
     while (i < n) {
       date = new Date(current.getTime());
       this.datePicker.fixTimeZone(date);
@@ -177,7 +178,7 @@ export class DayPicker implements OnInit {
       }
     }, 'day');
 
-    this.datePicker.setCompareHandler(function (date1, date2) {
+    this.datePicker.setCompareHandler(function (date1:Date, date2:Date) {
       let d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
       let d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
       return d1.getTime() - d2.getTime();
diff --git a/components/datepicker/index.ts b/components/datepicker/index.ts
index b99d7e2dde..0d1a579b32 100644
--- a/components/datepicker/index.ts
+++ b/components/datepicker/index.ts
@@ -1,12 +1,13 @@
 import {
   Component, View, Host,
   EventEmitter,
-  DefaultValueAccessor,
   ElementRef, ViewContainerRef,
-  NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
-  Self, NgModel, Renderer,
+  Self, Renderer,
   QueryList, Query
 } from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES,
+  DefaultValueAccessor, NgIf, NgClass, NgModel
+} from 'angular2/common';
 
 import * as moment from 'moment';
 
diff --git a/components/datepicker/monthpicker.ts b/components/datepicker/monthpicker.ts
index 398cb75673..78bb820127 100644
--- a/components/datepicker/monthpicker.ts
+++ b/components/datepicker/monthpicker.ts
@@ -1,16 +1,19 @@
 import {
   Component, View, Host,
   OnInit, EventEmitter,
-  DefaultValueAccessor,
   ElementRef, ViewContainerRef,
-  NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
-  Self, NgModel, Renderer
+  Self, Renderer
 } from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES,
+   DefaultValueAccessor, NgIf, NgClass, NgModel
+} from 'angular2/common';
+
 
 import {DatePickerInner} from './datepicker-inner';
 import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
 
-const TEMPLATE_OPTIONS = {
+//write an interface for template options
+const TEMPLATE_OPTIONS:any = {
   bs4: {
     MONTH_BUTTON: `
         <button type="button" style="min-width:100%;" class="btn btn-default"
@@ -29,13 +32,11 @@ const TEMPLATE_OPTIONS = {
   }
 };
 
-const CURRENT_THEME_TEMPLATE = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEMPLATE_OPTIONS.bs3;
+const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEMPLATE_OPTIONS.bs3;
 
 @Component({
-  selector: 'monthpicker, [monthpicker]'
-})
-@View({
-  template: `
+  selector: 'monthpicker, [monthpicker]',
+    template: `
 <table [hidden]="datePicker.datepickerMode!=='month'" role="grid">
   <thead>
     <tr>
@@ -72,6 +73,7 @@ const CURRENT_THEME_TEMPLATE = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEM
   `,
   directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass]
 })
+
 export class MonthPicker implements OnInit {
   public title:string;
   public rows:Array<any> = [];
@@ -87,7 +89,7 @@ export class MonthPicker implements OnInit {
     this.datePicker.setRefreshViewHandler(function () {
       let months:Array<any> = new Array(12);
       let year:number = this.activeDate.getFullYear();
-      let date;
+      let date:Date;
 
       for (let i = 0; i < 12; i++) {
         date = new Date(year, i, 1);
@@ -100,7 +102,7 @@ export class MonthPicker implements OnInit {
       self.rows = this.split(months, 3);
     }, 'month');
 
-    this.datePicker.setCompareHandler(function (date1, date2) {
+    this.datePicker.setCompareHandler(function (date1:Date, date2:Date) {
       let d1 = new Date(date1.getFullYear(), date1.getMonth());
       let d2 = new Date(date2.getFullYear(), date2.getMonth());
       return d1.getTime() - d2.getTime();
diff --git a/components/datepicker/yearpicker.ts b/components/datepicker/yearpicker.ts
index 2a4903ae32..3f2577cd4d 100644
--- a/components/datepicker/yearpicker.ts
+++ b/components/datepicker/yearpicker.ts
@@ -1,16 +1,18 @@
 import {
   Component, View, Host,
   OnInit, EventEmitter,
-  DefaultValueAccessor,
   ElementRef, ViewContainerRef,
-  NgIf, NgClass, FORM_DIRECTIVES, CORE_DIRECTIVES,
-  Self, NgModel, Renderer
+  Self, Renderer
 } from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES,
+   DefaultValueAccessor, NgIf, NgClass, NgModel
+} from 'angular2/common';
 
 import {Ng2BootstrapConfig} from '../ng2-bootstrap-config';
 import {DatePickerInner} from './datepicker-inner';
 
-const TEMPLATE_OPTIONS = {
+//write an interface for template options
+const TEMPLATE_OPTIONS:any = {
   bs4: {
     YEAR_BUTTON: `
         <button type="button" style="min-width:100%;" class="btn btn-default"
@@ -33,13 +35,11 @@ const TEMPLATE_OPTIONS = {
   }
 };
 
-const CURRENT_THEME_TEMPLATE = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEMPLATE_OPTIONS.bs3;
+const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEMPLATE_OPTIONS.bs3;
 
 @Component({
-  selector: 'yearpicker, [yearpicker]'
-})
-@View({
-  template: `
+  selector: 'yearpicker, [yearpicker]',
+    template: `
 <table [hidden]="datePicker.datepickerMode!=='year'" role="grid">
   <thead>
     <tr>
@@ -77,6 +77,7 @@ const CURRENT_THEME_TEMPLATE = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEM
   `,
   directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass]
 })
+
 export class YearPicker implements OnInit {
   private title:string;
   private rows:Array<any> = [];
@@ -96,7 +97,7 @@ export class YearPicker implements OnInit {
 
     this.datePicker.setRefreshViewHandler(function () {
       let years:Array<any> = new Array(this.yearRange);
-      let date;
+      let date:Date;
 
       for (let i = 0, start = self.getStartingYear(this.activeDate.getFullYear()); i < this.yearRange; i++) {
         date = new Date(start + i, 0, 1);
@@ -109,7 +110,7 @@ export class YearPicker implements OnInit {
       self.rows = this.split(years, 5);
     }, 'year');
 
-    this.datePicker.setCompareHandler(function (date1, date2) {
+    this.datePicker.setCompareHandler(function (date1:Date, date2:Date) {
       return date1.getFullYear() - date2.getFullYear();
     }, 'year');
 
diff --git a/demo/components/datepicker-section.ts b/demo/components/datepicker-section.ts
index c0514b7dc3..02c47cb90c 100644
--- a/demo/components/datepicker-section.ts
+++ b/demo/components/datepicker-section.ts
@@ -1,11 +1,9 @@
 /// <reference path="../../tsd.d.ts" />
 
-import {
-  Component, View,
-} from 'angular2/core';
+import {Component, View} from 'angular2/core';
 import { CORE_DIRECTIVES } from 'angular2/common';
 
-import {tabs} from '../../ng2-bootstrap';
+import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
 
 let name = 'Datepicker';
@@ -63,7 +61,7 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
     </div>
   </section>
   `,
-  directives: [DatepickerDemo, tabs, CORE_DIRECTIVES]
+  directives: [DatepickerDemo, TAB_DIRECTIVES, CORE_DIRECTIVES]
 })
 export class DatepickerSection {
 }
diff --git a/demo/components/datepicker/datepicker-demo.html b/demo/components/datepicker/datepicker-demo.html
index 4bd493b988..0d2a6c2374 100644
--- a/demo/components/datepicker/datepicker-demo.html
+++ b/demo/components/datepicker/datepicker-demo.html
@@ -12,10 +12,10 @@
 </style>
 
 <div>
-  <pre>Selected date is: <em>{{dt | date:'fullDate'}}</em></pre>
+  <pre>Selected date is: <em>{{getDate() | date:'fullDate'}}</em></pre>
   <h4>Inline</h4>
   <div style="display:inline-block; min-height:290px;">
-    <datepicker [(ngModel)]="dt" [min-date]="minDate" [show-weeks]="true"></datepicker>
+    <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
   </div>
 
   <hr />
diff --git a/demo/components/datepicker/datepicker-demo.ts b/demo/components/datepicker/datepicker-demo.ts
index d06fce2362..aad47d5227 100644
--- a/demo/components/datepicker/datepicker-demo.ts
+++ b/demo/components/datepicker/datepicker-demo.ts
@@ -1,6 +1,7 @@
 /// <reference path="../../../tsd.d.ts" />
 
-import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
+import {Component, View} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
 
 import * as moment from 'moment';
 import {datepicker} from '../../../ng2-bootstrap';
@@ -9,12 +10,11 @@ import {datepicker} from '../../../ng2-bootstrap';
 let template = require('./datepicker-demo.html');
 
 @Component({
-  selector: 'datepicker-demo'
-})
-@View({
+  selector: 'datepicker-demo',
   template: template,
   directives: [datepicker, CORE_DIRECTIVES, FORM_DIRECTIVES]
 })
+
 export class DatepickerDemo {
   public dt:Date = new Date();
   private minDate:Date = null;
@@ -38,7 +38,9 @@ export class DatepickerDemo {
       {date: this.afterTomorrow, status: 'partially'}
     ];
   }
-
+  public getDate():number {
+    return this.dt.getTime() || new Date().getTime();
+  }
   private today() {
     this.dt = new Date();
   }
@@ -48,7 +50,7 @@ export class DatepickerDemo {
   }
 
   // todo: implement custom class cases
-  private getDayClass(date, mode) {
+  private getDayClass(date:any, mode:string) {
     if (mode === 'day') {
       let dayToCheck = new Date(date).setHours(0, 0, 0, 0);
 
diff --git a/demo/index.ts b/demo/index.ts
index c9ba5440c6..110cb74fc1 100644
--- a/demo/index.ts
+++ b/demo/index.ts
@@ -18,7 +18,7 @@ import {AlertSection} from './components/alert-section';
 import {ButtonsSection} from './components/buttons-section';
 import {CarouselSection} from './components/carousel-section';
 import {CollapseSection} from './components/collapse-section';
-// import {DatepickerSection} from './components/datepicker-section';
+import {DatepickerSection} from './components/datepicker-section';
 import {DropdownSection} from './components/dropdown-section';
 import {PaginationSection} from './components/pagination-section';
 import {ProgressbarSection} from './components/progressbar-section';
@@ -68,7 +68,7 @@ let gettingStarted = require('./getting-started.md');
     <buttons-section class="col-md-12"></buttons-section>
     <carousel-section class="col-md-12"></carousel-section>
     <collapse-section class="col-md-12"></collapse-section>
-    <!--<datepicker-section class="col-md-12"></datepicker-section>-->
+    <datepicker-section class="col-md-12"></datepicker-section>
     <dropdown-section class="col-md-12"></dropdown-section>
     <pagination-section class="col-md-12"></pagination-section>
     <progressbar-section class="col-md-12"></progressbar-section>
@@ -96,7 +96,7 @@ let gettingStarted = require('./getting-started.md');
     CollapseSection,
 
     // todo: fix it to much write value calls!!!
-    // DatepickerSection,
+    DatepickerSection,
 
     DropdownSection,
     PaginationSection,
diff --git a/ng2-bootstrap.ts b/ng2-bootstrap.ts
index 93f967b9df..4f9c0224c6 100644
--- a/ng2-bootstrap.ts
+++ b/ng2-bootstrap.ts
@@ -3,7 +3,7 @@ export * from  './components/alert';
 export * from  './components/buttons';
 export * from  './components/carousel';
 export * from  './components/collapse';
-// export * from  './components/datepicker/index';
+export * from  './components/datepicker/index';
 export * from  './components/dropdown';
 export * from  './components/pagination';
 export * from  './components/progressbar';
diff --git a/tsconfig.json b/tsconfig.json
index 2a864764cf..bfc7c2d50a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors":true,
     "listFiles": false,
     "noLib": false
   },