angular5-time-picker

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular5-time-picker
201.0.86 years ago6 years agoMinified + gzip package size for angular5-time-picker in KB

Popular Searches

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