feat(timepicker): new timepicker implementation

demo/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule} from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { Ng2PageScrollModule } from 'ng2-page-scroll/ng2-page-scroll';
 import { AppComponent } from './app.component';

demo/src/app/components/+timepicker/demo-timepicker.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { TimepickerModule } from 'ngx-bootstrap/timepicker';
 
@@ -17,6 +17,7 @@ import { routes } from './demo-timepicker.routes';
   imports: [
     CommonModule,
     FormsModule,
+    ReactiveFormsModule,
     SharedModule,
     TimepickerModule.forRoot(),
     RouterModule.forChild(routes)

demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.html

@@ -0,0 +1,12 @@
+<p>Illustrates custom validation, you have to select time between 11:00 and 12:59</p>
+
+<div class="form-group">
+  <timepicker [(ngModel)]="myTime" [formControl]="ctrl" required></timepicker>
+</div>
+
+<pre class="alert"
+     [class.alert-danger]="!ctrl.valid && !ctrl.pristine"
+     [class.alert-success]="ctrl.valid && !ctrl.pristine">
+  Time is: {{myTime}}
+</pre>
+<div class="alert alert-danger" *ngIf="ctrl.errors && ctrl.errors['outOfRange']">Invalid time</div>

demo/src/app/components/+timepicker/demos/custom-validation/custom-validation.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'demo-timepicker-custom-validation',
+  templateUrl: './custom-validation.html'
+})
+export class DemoTimepickerCustomValidationComponent {
+  public myTime: Date;
+
+  public ctrl = new FormControl('', (control: FormControl) => {
+    const value = control.value;
+    if (!value) {
+      return null;
+    }
+    const hours = value.getHours();
+    if (hours < 11 || hours > 12) {
+      return {outOfRange: true};
+    }
+
+    return null;
+  });
+}

demo/src/app/components/+timepicker/demos/dynamic/dynamic.html

@@ -1,6 +1,7 @@
-<timepicker [(ngModel)]="mytime" (change)="changed()"></timepicker>
+<timepicker [(ngModel)]="mytime" (ngModelChange)="changed()" (isValid)="isValid = $event"></timepicker>
 
 <pre class="alert alert-info">Time is: {{mytime}}</pre>
+<pre *ngIf="!isValid" class="alert alert-danger">Invalid time format</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>

demo/src/app/components/+timepicker/demos/dynamic/dynamic.ts

@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
 export class DemoTimepickerDynamicComponent {
 
   public mytime: Date = new Date();
+  public isValid: boolean;
 
   public update(): void {
     let d = new Date();

demo/src/app/components/+timepicker/demos/index.ts

@@ -4,10 +4,16 @@ import { DemoTimepickerMeridianComponent } from './meridian/meridian';
 import { DemoTimepickerDisabledComponent } from './disabled/disabled';
 import { DemoTimepickerCustomComponent } from './custom/custom';
 import { DemoTimepickerDynamicComponent } from './dynamic/dynamic';
+import { DemoTimepickerMinMaxComponent } from './min-max/min-max';
+import { DemoTimepickerSecondsComponent } from './seconds/seconds';
+import { DemoTimepickerMousewheelArrowkeysComponent } from './mousewheel-arrowkeys/mousewheel-arrowkeys';
+import { DemoTimepickerCustomValidationComponent } from './custom-validation/custom-validation';
 
 export const DEMO_COMPONENTS = [
   DemoTimepickerBasicComponent, DemoTimepickerConfigComponent, DemoTimepickerMeridianComponent,
-  DemoTimepickerDisabledComponent, DemoTimepickerCustomComponent, DemoTimepickerDynamicComponent
+  DemoTimepickerMinMaxComponent, DemoTimepickerDisabledComponent, DemoTimepickerCustomComponent,
+  DemoTimepickerDynamicComponent, DemoTimepickerSecondsComponent, DemoTimepickerMousewheelArrowkeysComponent,
+  DemoTimepickerCustomValidationComponent
 ];
 
 export const DEMOS = {
@@ -19,6 +25,10 @@ export const DEMOS = {
     component: require('!!raw-loader?lang=typescript!./meridian/meridian'),
     html: require('!!raw-loader?lang=markup!./meridian/meridian.html')
   },
+  minmax: {
+    component: require('!!raw-loader?lang=typescript!./min-max/min-max'),
+    html: require('!!raw-loader?lang=markup!./min-max/min-max.html')
+  },
   disabled: {
     component: require('!!raw-loader?lang=typescript!./disabled/disabled'),
     html: require('!!raw-loader?lang=markup!./disabled/disabled.html')
@@ -34,5 +44,17 @@ export const DEMOS = {
   config: {
     component: require('!!raw-loader?lang=typescript!./config/config'),
     html: require('!!raw-loader?lang=markup!./config/config.html')
+  },
+  seconds: {
+    component: require('!!raw-loader?lang=typescript!./seconds/seconds'),
+    html: require('!!raw-loader?lang=markup!./seconds/seconds.html')
+  },
+  mousewheel: {
+    component: require('!!raw-loader?lang=typescript!./mousewheel-arrowkeys/mousewheel-arrowkeys'),
+    html: require('!!raw-loader?lang=markup!./mousewheel-arrowkeys/mousewheel-arrowkeys.html')
+  },
+  customvalidation: {
+    component: require('!!raw-loader?lang=typescript!./custom-validation/custom-validation'),
+    html: require('!!raw-loader?lang=markup!./custom-validation/custom-validation.html')
   }
 };

demo/src/app/components/+timepicker/demos/meridian/meridian.html

@@ -2,7 +2,7 @@
 
 <pre class="alert alert-info">Time is: {{mytime}}</pre>
 
-<hr>
+<br>
 
 <button type="button" class="btn btn-info" (click)="toggleMode()">12H / 24H</button>
 

demo/src/app/components/+timepicker/demos/meridian/meridian.ts

@@ -5,12 +5,11 @@ import { Component } from '@angular/core';
   templateUrl: './meridian.html'
 })
 export class DemoTimepickerMeridianComponent {
-  public ismeridian:boolean = true;
+  public ismeridian: boolean = true;
 
-  public mytime:Date = new Date();
+  public mytime: Date = new Date();
 
-  public toggleMode():void {
+  public toggleMode(): void {
     this.ismeridian = !this.ismeridian;
   }
-
 }

demo/src/app/components/+timepicker/demos/min-max/min-max.html

@@ -0,0 +1,3 @@
+<timepicker [(ngModel)]="myTime" [min]="minTime" [max]="maxTime"></timepicker>
+
+<pre class="alert alert-info">Time is: {{myTime}}</pre>

demo/src/app/components/+timepicker/demos/min-max/min-max.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-min-max',
+  templateUrl: './min-max.html'
+})
+export class DemoTimepickerMinMaxComponent {
+  public myTime: Date = new Date();
+  public minTime: Date = new Date();
+  public maxTime: Date = new Date();
+
+  constructor() {
+    this.minTime.setHours(8);
+    this.minTime.setMinutes(0);
+    this.maxTime.setHours(17);
+    this.maxTime.setMinutes(0);
+  }
+}

demo/src/app/components/+timepicker/demos/mousewheel-arrowkeys/mousewheel-arrowkeys.html

@@ -0,0 +1,11 @@
+<p>Mouse wheel disabled</p>
+
+<timepicker [(ngModel)]="myTime1" [mousewheel]="false"></timepicker>
+
+<pre class="alert alert-info">Time is: {{myTime1}}</pre>
+
+<p>Arrow keys disabled</p>
+
+<timepicker [(ngModel)]="myTime2" [arrowkeys]="false"></timepicker>
+
+<pre class="alert alert-info">Time is: {{myTime2}}</pre>

demo/src/app/components/+timepicker/demos/mousewheel-arrowkeys/mousewheel-arrowkeys.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-mousewheel-arrowkeys',
+  templateUrl: './mousewheel-arrowkeys.html'
+})
+export class DemoTimepickerMousewheelArrowkeysComponent {
+  public myTime1: Date = new Date();
+  public myTime2: Date = new Date();
+}

demo/src/app/components/+timepicker/demos/seconds/seconds.html

@@ -0,0 +1,3 @@
+<timepicker [(ngModel)]="myTime" [showSeconds]="showSec"></timepicker>
+
+<pre class="alert alert-info">Time is: {{myTime}}</pre>

demo/src/app/components/+timepicker/demos/seconds/seconds.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-timepicker-seconds',
+  templateUrl: './seconds.html'
+})
+export class DemoTimepickerSecondsComponent {
+  public myTime: Date = new Date();
+  public showSec: boolean = true;
+}

demo/src/app/components/+timepicker/timepicker-section.component.ts

@@ -16,10 +16,14 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
       <ul>
         <li><a routerLink="." fragment="basic">Timepicker</a></li>
         <li><a routerLink="." fragment="meridian">Meridian</a></li>
+        <li><a routerLink="." fragment="min-max">Min - Max</a></li>
+        <li><a routerLink="." fragment="seconds">Show seconds</a></li>
         <li><a routerLink="." fragment="disabled">Disabled</a></li>
         <li><a routerLink="." fragment="custom">Custom steps</a></li>
+        <li><a routerLink="." fragment="custom-validation">Custom validation</a></li>
         <li><a routerLink="." fragment="dynamic">Dynamic</a></li>
         <li><a routerLink="." fragment="config">Configuring defaults</a></li>
+        <li><a routerLink="." fragment="mouse-wheel">Mouse wheel and Arrow keys</a></li>
       </ul>
     </li>
     <li><a routerLink="." fragment="api-reference">API Reference</a>
@@ -45,6 +49,16 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   <ng-sample-box [ts]="demos.meridian.component" [html]="demos.meridian.html">
     <demo-timepicker-meridian></demo-timepicker-meridian>
   </ng-sample-box>
+
+  <h2 routerLink="." fragment="min-max" id="min-max">Min - Max</h2>
+  <ng-sample-box [ts]="demos.minmax.component" [html]="demos.minmax.html">
+    <demo-timepicker-min-max></demo-timepicker-min-max>
+  </ng-sample-box>
+
+  <h2 routerLink="." fragment="seconds" id="seconds">Show seconds</h2>
+  <ng-sample-box [ts]="demos.seconds.component" [html]="demos.seconds.html">
+    <demo-timepicker-seconds></demo-timepicker-seconds>
+  </ng-sample-box>
 
   <h2 routerLink="." fragment="disabled" id="disabled">Disabled</h2>
   <ng-sample-box [ts]="demos.disabled.component" [html]="demos.disabled.html">
@@ -54,6 +68,11 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   <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="custom-validation" id="custom-validation">Custom validation</h2>
+  <ng-sample-box [ts]="demos.customvalidation.component" [html]="demos.customvalidation.html">
+    <demo-timepicker-custom-validation></demo-timepicker-custom-validation>
   </ng-sample-box>     
 
   <h2 routerLink="." fragment="dynamic" id="dynamic">Dynamic</h2>
@@ -65,6 +84,11 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   <ng-sample-box [ts]="demos.config.component" [html]="demos.config.html">
     <demo-timepicker-config></demo-timepicker-config>
   </ng-sample-box>
+
+  <h2 routerLink="." fragment="mouse-wheel" id="mouse-wheel">Mouse wheel and Arrow keys</h2>
+  <ng-sample-box [ts]="demos.mousewheel.component" [html]="demos.mousewheel.html">
+    <demo-timepicker-mousewheel-arrowkeys></demo-timepicker-mousewheel-arrowkeys>
+  </ng-sample-box>
 
   <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>