Beautiful Angular Material 5 Time Picker. It is initially a fork from…

… https://githu b.com/SteveDunlap13/MaterialTimeControl that has been updated to work as a standalone module you can import. It contains also some bug fixes like on the hours containing extra 0 when hour is greater than 9'
akiocloud · Jan 4, 2018 · a0accf8 · a0accf8
commit a0accf8
Show file tree

Hide file tree

Showing 44 changed files with 11,354 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,19 @@
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,122 @@
+# ng5-time-picker
+This module is a fork from https://github.com/SteveDunlap13/MaterialTimeControl.
+
+It provides beautiful time picker for Angular Material 5 as it does not provide any time picker yet (only date pickers).
+
+## Environment 
+The component works with Angular 5 and Angular CLI 1.5.
+
+## Customization 
+
+It provides also many options for customization:
+- you can set the color theme by assigning a primary color.
+- you can also tell which format you want (12H or 24H).
+
+## Install
+Install the module via npm:
+
+    npm install ng5-time-picker --save
+
+## Usage
+Import the this module into your module as follows:
+
+    import { Ng5TimePickerModule } from 'ng5-time-picker';
+
+	@NgModule({
+        imports: [
+            BrowserModule,
+            BrowserAnimationsModule,
+
+            Ng5TimePickerModule,
+            MatCardModule,
+            MatSnackBarModule,
+        ]
+
+    })
+    export class AppModule {
+        ...
+    }
+
+Set up the config of time pickers in your AppModule.ts (format 12H)
+```
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+
+  // Configuration of the time picker (format 12H with a default date and time)
+  private config = { hour: 7, minute: 15, meriden: 'PM', format: 12 };
+  ... 
+}
+```
+
+
+Update your HTML (app.component.html) and instantiate the time picker :
+
+```
+<div class="container">
+  <form class="demo-form">
+    <timepicker color="primary" [(userTime)]="exportTime"></timepicker>
+  </form>
+</div>
+```
+
+Update your CSS (app.component.css) :
+```
+.container {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    position: relative;
+    margin: 1em;
+  }
+  
+  .demo-form {
+    padding: 4em;
+  }
+  
+  .mat-card {
+    padding: 0;
+    max-width: 600px;
+    margin: 3rem auto;
+  }
+```
+
+## Angular Material 5 style to import (use default or your own theme)
+
+Please use the default theme from https://material.angular.io/guide/theming as follows:
+
+Update your index.html to include the following style
+
+```
+<head>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    
+</head>
+```
+
+Update your 'styles.css' to use the beautiful Angular Material theme: 
+
+```
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+```
+
+## Build
+
+    npm install
+    npm build
+
+## Running with Angular CLI
+
+    ng serve
diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts
@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('ng5-material-time-control App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});
diff --git a/e2e/app.po.ts b/e2e/app.po.ts
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
diff --git a/e2e/tsconfig.e2e.json b/e2e/tsconfig.e2e.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
diff --git a/index.ts b/index.ts
@@ -0,0 +1,9 @@
+
+/** Exporting the components **/
+export * from './src/app/components/w-mat-timepicker/w-mat-timepicker.component';
+export * from './src/app/components/w-time-dialog/w-time-dialog.component';
+export * from './src/app/components/w-clock/w-clock.component';
+export * from './src/app/components/w-time/w-time.component';
+
+export { Ng5TimePickerModule } from './src/app/components/w-mat-timepicker/w-mat-timepicker.module';
+export { WMatTimePickerComponent } from './src/app/components/w-mat-timepicker/w-mat-timepicker.component';
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};