angular5-time-picker

This module is a fork from https://github.com/SteveDunlap13/MaterialTimeControl.

Stats

StarsIssuesVersionUpdatedCreatedSize
angular5-time-picker
301.0.84 years ago4 years agoMinified + gzip package size for angular5-time-picker in KB

Readme

#angular5-time-picker This module is a fork from https://github.com/SteveDunlap13/MaterialTimeControl.

It provides a time picker component compatible with Angular Material 5.

Environment

This component works with Angular 5

Install

Install with the following command:

npm install angular5-time-picker --save

Usage

Import the this module into your module as follows:

import { Angular5TimePickerModule } from 'angular5-time-picker';

@NgModule({
      declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,

        Angular5TimePickerModule,
        MatCardModule,
        MatSnackBarModule,
        MatCardModule,
        MatFormFieldModule,
        MatInputModule
    ],
    providers: [],
    bootstrap: [AppComponent]

}),
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 :

  <mat-form-field>
    <input matInput [matTimepicker]="picker" placeholder="Choose a time">
    <mat-timepicker-toggle matSuffix [for]="picker"></mat-timepicker-toggle>
    <mat-timepicker #picker color="primary"></mat-timepicker>
  </mat-form-field>

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.