0.0.5 • Published 6 years ago

angular5-timepicker-material v0.0.5

Weekly downloads
1
License
MIT
Repository
-
Last release
6 years ago

angular5-timepicker-material

This module is a fork from https://github.com/akiocloud/ng5-time-picker.

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).

  • you can set submit and revert labels

Install

Install the module via npm:

npm install my-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" submitLabel="Ok" revertLabel="Revert" [(userTime)]="exportTime"></timepicker>
  </form>
</div>