0.0.5 • Published 6 years ago
angular5-timepicker-material v0.0.5
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>