diff --git a/demo/src/app/components/timepicker/demos/basic/basic.html b/demo/src/app/components/timepicker/demos/basic/basic.html
new file mode 100644
index 0000000000..e45bd0db3d
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/basic/basic.html
@@ -0,0 +1,2 @@
+<timepicker [(ngModel)]="mytime"></timepicker>
+<pre class="alert alert-info">Time is: {{mytime}}</pre>
diff --git a/demo/src/app/components/timepicker/demos/basic/basic.ts b/demo/src/app/components/timepicker/demos/basic/basic.ts
new file mode 100644
index 0000000000..d3a7bea41f
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/basic/basic.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-basic',
+  templateUrl: './basic.html'
+})
+export class DemoTimepickerBasicComponent {
+  public mytime: Date = new Date();
+}
diff --git a/demo/src/app/components/timepicker/demos/config/config.html b/demo/src/app/components/timepicker/demos/config/config.html
new file mode 100644
index 0000000000..e45bd0db3d
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/config/config.html
@@ -0,0 +1,2 @@
+<timepicker [(ngModel)]="mytime"></timepicker>
+<pre class="alert alert-info">Time is: {{mytime}}</pre>
diff --git a/demo/src/app/components/timepicker/demos/config/config.ts b/demo/src/app/components/timepicker/demos/config/config.ts
new file mode 100644
index 0000000000..b6f3d7de9c
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/config/config.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { TimepickerConfig } from 'ng2-bootstrap';
+
+// such override allows to keep some initial values
+
+export function getTimepickerConfig(): TimepickerConfig {
+  return Object.assign(new TimepickerConfig(), {
+    hourStep: 2,
+    minuteStep: 10,
+    showMeridian: false,
+    readonlyInput: false,
+    mousewheel: true
+  });
+}
+
+@Component({
+  selector: 'demo-timepicker-config',
+  templateUrl: './config.html',
+  providers: [{provide: TimepickerConfig, useFactory: getTimepickerConfig}]
+})
+export class DemoTimepickerConfigComponent {
+}
diff --git a/demo/src/app/components/timepicker/demos/custom/custom.html b/demo/src/app/components/timepicker/demos/custom/custom.html
new file mode 100644
index 0000000000..e2fb24f6d6
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/custom/custom.html
@@ -0,0 +1,18 @@
+<timepicker [(ngModel)]="mytime" [hourStep]="hstep" [minuteStep]="mstep"></timepicker>
+
+<pre class="alert alert-info">Time is: {{mytime}}</pre>
+
+<div class="row">
+  <div class="col-xs-6">
+    Hours step is:
+    <select class="form-control" [(ngModel)]="hstep">
+      <option *ngFor="let opt of options.hstep" [value]="opt">{{opt}}</option>
+    </select>
+  </div>
+  <div class="col-xs-6">
+    Minutes step is:
+    <select class="form-control" [(ngModel)]="mstep">
+      <option *ngFor="let opt of options.mstep" [value]="opt">{{opt}}</option>
+    </select>
+  </div>
+</div>
diff --git a/demo/src/app/components/timepicker/demos/custom/custom.ts b/demo/src/app/components/timepicker/demos/custom/custom.ts
new file mode 100644
index 0000000000..9e13c63789
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/custom/custom.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-custom',
+  templateUrl: './custom.html'
+})
+export class DemoTimepickerCustomComponent {
+  public hstep: number = 1;
+  public mstep: number = 15;
+
+  public mytime: Date = new Date();
+  public options: any = {
+    hstep: [1, 2, 3],
+    mstep: [1, 5, 10, 15, 25, 30]
+  };
+}
diff --git a/demo/src/app/components/timepicker/demos/disabled/disabled.html b/demo/src/app/components/timepicker/demos/disabled/disabled.html
new file mode 100644
index 0000000000..815399393d
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/disabled/disabled.html
@@ -0,0 +1,5 @@
+<timepicker [(ngModel)]="mytime" [showMeridian]="ismeridian" [readonlyInput]="!isEnabled"></timepicker>
+<hr>
+
+<button type="button" class="btn btn-info" (click)="isEnabled=!isEnabled">Enable / Disable input</button>
+
diff --git a/demo/src/app/components/timepicker/demos/disabled/disabled.ts b/demo/src/app/components/timepicker/demos/disabled/disabled.ts
new file mode 100644
index 0000000000..fc39c6864c
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/disabled/disabled.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-disabled',
+  templateUrl: './disabled.html'
+})
+export class DemoTimepickerDisabledComponent {
+  public ismeridian: boolean = false;
+  public isEnabled: boolean = true;
+  public mytime: Date = new Date();
+
+}
diff --git a/demo/src/app/components/timepicker/demos/dynamic/dynamic.html b/demo/src/app/components/timepicker/demos/dynamic/dynamic.html
new file mode 100644
index 0000000000..7d728855e9
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/dynamic/dynamic.html
@@ -0,0 +1,6 @@
+<timepicker [(ngModel)]="mytime" (change)="changed()"></timepicker>
+
+<pre class="alert alert-info">Time is: {{mytime}}</pre>
+
+<button type="button" class="btn btn-primary" (click)="update()">Set to 14:00</button>
+<button type="button" class="btn btn-danger" (click)="clear()">Clear</button>
diff --git a/demo/src/app/components/timepicker/demos/dynamic/dynamic.ts b/demo/src/app/components/timepicker/demos/dynamic/dynamic.ts
new file mode 100644
index 0000000000..5802c4246a
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/dynamic/dynamic.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-dynamic',
+  templateUrl: './dynamic.html'
+})
+export class DemoTimepickerDynamicComponent {
+
+  public mytime: Date = new Date();
+
+  public update(): void {
+    let d = new Date();
+    d.setHours(14);
+    d.setMinutes(0);
+    this.mytime = d;
+  }
+
+  public changed(): void {
+    console.log('Time changed to: ' + this.mytime);
+  }
+
+  public clear(): void {
+    this.mytime = void 0;
+  }
+}
diff --git a/demo/src/app/components/timepicker/demos/index.ts b/demo/src/app/components/timepicker/demos/index.ts
index c861b8843b..2f8fbc24e5 100644
--- a/demo/src/app/components/timepicker/demos/index.ts
+++ b/demo/src/app/components/timepicker/demos/index.ts
@@ -1,12 +1,38 @@
-import { TimepickerDemoComponent } from './timepicker-demo.component';
+import { DemoTimepickerBasicComponent } from './basic/basic';
+import { DemoTimepickerConfigComponent } from './config/config';
+import { DemoTimepickerMeridianComponent } from './meridian/meridian';
+import { DemoTimepickerDisabledComponent } from './disabled/disabled';
+import { DemoTimepickerCustomComponent } from './custom/custom';
+import { DemoTimepickerDynamicComponent } from './dynamic/dynamic';
 
 export const DEMO_COMPONENTS = [
-  TimepickerDemoComponent
+  DemoTimepickerBasicComponent, DemoTimepickerConfigComponent, DemoTimepickerMeridianComponent,
+  DemoTimepickerDisabledComponent, DemoTimepickerCustomComponent, DemoTimepickerDynamicComponent
 ];
 
 export const DEMOS = {
-  old: {
-    component: require('!!raw?lang=typescript!./timepicker-demo.component'),
-    html: require('!!raw?lang=markup!./timepicker-demo.component.html')
+  basic: {
+    component: require('!!raw?lang=typescript!./basic/basic'),
+    html: require('!!raw?lang=markup!./basic/basic.html')
+  },
+  meridian: {
+    component: require('!!raw?lang=typescript!./meridian/meridian'),
+    html: require('!!raw?lang=markup!./meridian/meridian.html')
+  },
+  disabled: {
+    component: require('!!raw?lang=typescript!./disabled/disabled'),
+    html: require('!!raw?lang=markup!./disabled/disabled.html')
+  },
+  custom: {
+    component: require('!!raw?lang=typescript!./custom/custom'),
+    html: require('!!raw?lang=markup!./custom/custom.html')
+  },
+  dynamic: {
+    component: require('!!raw?lang=typescript!./dynamic/dynamic'),
+    html: require('!!raw?lang=markup!./dynamic/dynamic.html')
+  },
+  config: {
+    component: require('!!raw?lang=typescript!./config/config'),
+    html: require('!!raw?lang=markup!./config/config.html')
   }
 };
diff --git a/demo/src/app/components/timepicker/demos/meridian/meridian.html b/demo/src/app/components/timepicker/demos/meridian/meridian.html
new file mode 100644
index 0000000000..8c146d0707
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/meridian/meridian.html
@@ -0,0 +1,8 @@
+<timepicker [(ngModel)]="mytime" (change)="changed()" [showMeridian]="ismeridian"></timepicker>
+
+<pre class="alert alert-info">Time is: {{mytime}}</pre>
+
+<hr>
+
+<button type="button" class="btn btn-info" (click)="toggleMode()">12H / 24H</button>
+
diff --git a/demo/src/app/components/timepicker/demos/meridian/meridian.ts b/demo/src/app/components/timepicker/demos/meridian/meridian.ts
new file mode 100644
index 0000000000..76e7a37165
--- /dev/null
+++ b/demo/src/app/components/timepicker/demos/meridian/meridian.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-meridian',
+  templateUrl: './meridian.html'
+})
+export class DemoTimepickerMeridianComponent {
+  public ismeridian:boolean = true;
+
+  public mytime:Date = new Date();
+
+  public toggleMode():void {
+    this.ismeridian = !this.ismeridian;
+  }
+
+}
diff --git a/demo/src/app/components/timepicker/demos/timepicker-demo.component.html b/demo/src/app/components/timepicker/demos/timepicker-demo.component.html
deleted file mode 100644
index 9868382d67..0000000000
--- a/demo/src/app/components/timepicker/demos/timepicker-demo.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<timepicker [(ngModel)]="mytime" (change)="changed()" [hourStep]="hstep" 
-            [minuteStep]="mstep" [showMeridian]="ismeridian" 
-            [readonlyInput]="!isEnabled"></timepicker>
-
-<pre class="alert alert-info">Time is: {{mytime}}</pre>
-
-<div class="row">
-  <div class="col-xs-6">
-    Hours step is:
-    <select class="form-control" [(ngModel)]="hstep">
-      <option *ngFor="let opt of options.hstep" [value]="opt">{{opt}}</option>
-    </select>
-  </div>
-  <div class="col-xs-6">
-    Minutes step is:
-    <select class="form-control" [(ngModel)]="mstep">
-      <option *ngFor="let opt of options.mstep" [value]="opt">{{opt}}</option>
-    </select>
-  </div>
-</div>
-
-<hr>
-
-<button type="button" class="btn btn-info" (click)="toggleMode()">12H / 24H</button>
-<button type="button" class="btn btn-info" (click)="isEnabled=!isEnabled">Enable / Disable input</button>
-<button type="button" class="btn btn-primary" (click)="update()">Set to 14:00</button>
-<button type="button" class="btn btn-danger" (click)="clear()">Clear</button>
diff --git a/demo/src/app/components/timepicker/demos/timepicker-demo.component.ts b/demo/src/app/components/timepicker/demos/timepicker-demo.component.ts
deleted file mode 100644
index fc4d2bff6e..0000000000
--- a/demo/src/app/components/timepicker/demos/timepicker-demo.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'timepicker-demo',
-  templateUrl: './timepicker-demo.component.html'
-})
-export class TimepickerDemoComponent {
-  public hstep:number = 1;
-  public mstep:number = 15;
-  public ismeridian:boolean = true;
-  public isEnabled:boolean = true;
-
-  public mytime:Date = new Date();
-  public options:any = {
-    hstep: [1, 2, 3],
-    mstep: [1, 5, 10, 15, 25, 30]
-  };
-
-  public toggleMode():void {
-    this.ismeridian = !this.ismeridian;
-  }
-
-  public update():void {
-    let d = new Date();
-    d.setHours(14);
-    d.setMinutes(0);
-    this.mytime = d;
-  }
-
-  public changed():void {
-    console.log('Time changed to: ' + this.mytime);
-  }
-
-  public clear():void {
-    this.mytime = void 0;
-  }
-}
diff --git a/demo/src/app/components/timepicker/timepicker-section.component.ts b/demo/src/app/components/timepicker/timepicker-section.component.ts
index c2d927a2c3..f161642a11 100644
--- a/demo/src/app/components/timepicker/timepicker-section.component.ts
+++ b/demo/src/app/components/timepicker/timepicker-section.component.ts
@@ -14,7 +14,12 @@ let titleDoc = require('html!markdown!./docs/title.md');
     <li><a routerLink="." fragment="usage">Usage</a></li>
     <li><a routerLink="." fragment="examples">Examples</a>
       <ul>
-        <!--<li><a routerLink="." fragment="link-color">Link color</a></li>-->
+        <li><a routerLink="." fragment="basic">Timepicker</a></li>
+        <li><a routerLink="." fragment="meridian">Meridian</a></li>
+        <li><a routerLink="." fragment="disabled">Disabled</a></li>
+        <li><a routerLink="." fragment="custom">Custom steps</a></li>
+        <li><a routerLink="." fragment="dynamic">Dynamic</a></li>
+        <li><a routerLink="." fragment="config">Configuring defaults</a></li>
       </ul>
     </li>
     <li><a routerLink="." fragment="api-reference">API Reference</a>
@@ -31,20 +36,45 @@ let titleDoc = require('html!markdown!./docs/title.md');
 
   <h2 routerLink="." fragment="examples" id="examples">Examples</h2>
       
-  <!-- basic -->
-  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
-    <timepicker-demo></timepicker-demo>
+  <h2 routerLink="." fragment="basic" id="basic">Timepicker</h2>
+  <ng-sample-box [ts]="demos.basic.component" [html]="demos.basic.html">
+    <demo-timepicker-basic></demo-timepicker-basic>
   </ng-sample-box>
       
+  <h2 routerLink="." fragment="meridian" id="meridian">Meridian</h2>
+  <ng-sample-box [ts]="demos.meridian.component" [html]="demos.meridian.html">
+    <demo-timepicker-meridian></demo-timepicker-meridian>
+  </ng-sample-box>
+              
+  <h2 routerLink="." fragment="disabled" id="disabled">Disabled</h2>
+  <ng-sample-box [ts]="demos.disabled.component" [html]="demos.disabled.html">
+    <demo-timepicker-disabled></demo-timepicker-disabled>
+  </ng-sample-box>
+                      
+  <h2 routerLink="." fragment="custom" id="custom">Custom steps</h2>
+  <ng-sample-box [ts]="demos.custom.component" [html]="demos.custom.html">
+    <demo-timepicker-custom></demo-timepicker-custom>
+  </ng-sample-box>     
+                   
+  <h2 routerLink="." fragment="dynamic" id="dynamic">Dynamic</h2>
+  <ng-sample-box [ts]="demos.dynamic.component" [html]="demos.dynamic.html">
+    <demo-timepicker-dynamic></demo-timepicker-dynamic>
+  </ng-sample-box>
+        
+  <h2 routerLink="." fragment="config" id="config">Configuring defaults</h2>
+  <ng-sample-box [ts]="demos.config.component" [html]="demos.config.html">
+    <demo-timepicker-config></demo-timepicker-config>
+  </ng-sample-box>
+
   <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
   
-  <ng-api-doc id="timepicker-component" directive="TimepickerComponent"></ng-api-doc>
-  <ng-api-doc-config id="timepicker-config" type="TimepickerConfig"></ng-api-doc-config>
+  <ng-api-doc routerLink="." fragment="timepicker-component" id="timepicker-component" directive="TimepickerComponent"></ng-api-doc>
+  <ng-api-doc-config routerLink="." fragment="timepicker-config" id="timepicker-config" type="TimepickerConfig"></ng-api-doc-config>
 </demo-section>`
 })
 export class TimepickerSectionComponent {
-  public name:string = 'Timepicker';
-  public src:string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/timepicker';
+  public name: string = 'Timepicker';
+  public src: string = 'https://github.com/valor-software/ng2-bootstrap/tree/development/src/timepicker';
   public demos: any = DEMOS;
-  public titleDoc:string = titleDoc;
+  public titleDoc: string = titleDoc;
 }
diff --git a/demo/src/assets/css/style.css b/demo/src/assets/css/style.css
index bc501d9ce4..d777737044 100644
--- a/demo/src/assets/css/style.css
+++ b/demo/src/assets/css/style.css
@@ -25,6 +25,10 @@ a:hover {
   text-decoration: none;
 }
 
+.hidden {
+  display: none !important;
+}
+
 /************* START TOP MENU **************/
 
 #top-menu {