[Component] Add Timepicker component

Author: qianmoQ

src/renderer/app/layout/layout.routing.ts

@@ -82,6 +82,10 @@ const LAYOUT_ROUTES: Routes = [
           {
             path: 'typeahead',
             loadChildren: () => import('../pages/component/typeahead/typeahead.module').then(m => m.TypeaheadComponentModule)
+          },
+          {
+            path: 'timepicker',
+            loadChildren: () => import('../pages/component/timepicker/timepicker.module').then(m => m.TimepickerComponentModule)
           }
         ]
       },

src/renderer/app/layout/navigation/navigation.component.html

@@ -56,6 +56,9 @@
           <li routerLinkActive="navigation__active">
             <a [routerLink]="['/component/typeahead']"><i class="fa fa-tty"></i> Typeahead</a>
           </li>
+          <li routerLinkActive="navigation__active">
+            <a [routerLink]="['/component/timepicker']"><i class="fa fa-times-circle"></i> Timepicker</a>
+          </li>
         </ul>
       </li>
       <li routerLinkActive="navigation__sub--active" class="navigation__sub">

src/renderer/app/pages/component/timepicker/timepicker.component.html

@@ -0,0 +1,48 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Timepicker</h1>
+    <small>This template is built using <code>ngx-bootstrap/timepicker</code> and provides some usage examples</small>
+  </header>
+  <div class="row">
+    <div class="col-md-4">
+      <div class="card">
+        <div class="card-body">
+          <h4 class="card-title">Timepicker</h4>
+          <timepicker [(ngModel)]="timePickerValue" [readonlyInput]="!isTimePickerEnabled"
+                      class="timepicker"></timepicker>
+          <div class="form-group mt-4">
+            <input type="text" value="{{timePickerValue | date:'shortTime'}}" class="form-control">
+            <i class="form-group__bar"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="card">
+        <div class="card-body">
+          <h4 class="card-title">24 hours Timepicker</h4>
+          <timepicker [(ngModel)]="timePickerMeridianValue" [readonlyInput]="!isTimePickerEnabled" class="timepicker"
+                      [showMeridian]="false"></timepicker>
+          <div class="form-group mt-4">
+            <input type="text" value="{{timePickerMeridianValue | date: 'HH:mm'}}" class="form-control">
+            <i class="form-group__bar"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="card">
+        <div class="card-body">
+          <h4 class="card-title">Custom Timepicker</h4>
+          <timepicker [(ngModel)]="timePickerValue" [readonlyInput]="!isTimePickerEnabled" [hourStep]="2"
+                      [minuteStep]="1" class="timepicker"></timepicker>
+          <div class="form-group mt-4">
+            <input type="text" value="{{timePickerValue | date:'shortTime'}}" class="form-control">
+            <i class="form-group__bar"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button class="btn btn-primary" (click)="isTimePickerEnabled=!isTimePickerEnabled">Enabling/Disabling</button>
+</section>

src/renderer/app/pages/component/timepicker/timepicker.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-component-timepicker',
+  templateUrl: './timepicker.component.html'
+})
+export class TimePickerComponent implements OnInit {
+  isTimePickerEnabled = true;
+  timePickerValue: Date = new Date();
+  timePickerMeridianValue: Date = new Date();
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+}

src/renderer/app/pages/component/timepicker/timepicker.module.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { TimepickerModule } from 'ngx-bootstrap/timepicker';
+import { TimePickerComponent } from './timepicker.component';
+
+const TIMEPICKER_COMPONENT_ROUTES = [
+  {path: '', component: TimePickerComponent}
+];
+
+@NgModule({
+  declarations: [
+    TimePickerComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    BsDropdownModule.forRoot(),
+    TimepickerModule.forRoot(),
+    RouterModule.forChild(TIMEPICKER_COMPONENT_ROUTES)
+  ]
+})
+export class TimepickerComponentModule {
+}