1.1.0 • Published 8 years ago
angular2-time-duration-picker v1.1.0
angular2-time-duration-picker
A generic time duration picker Angular component (v. 2.0.0+) for Twitter Bootstrap
Installation
To install this library, run:
$ npm install angular2-time-duration-picker --saveRequirements
UI Dependency
- Twitter Bootstrap (3.3.5+)
usage
Import the TimeDurationPickerComponent in your app.module and add it to the declarations array.
Alternatively, you can import the TimeDurationPickerComponent to a shared module, to make it available across all modules in your Angular application.
You need to import the Angular FormsModule and ReactiveFormsModule as well.
and then from your Angular AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library
import { TimeDurationPickerModule } from 'angular2-time-duration-picker';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
...
TimeDurationPickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Once your library is imported, you can use its components in your Angular application:
Add the time-duration-picker component to the page where you want to use the picker, with disired Time unit time-duration-picker-unit.
<time-duration-picker [inputDisabled]=false returnedValueUnit="second" (onChange)="onNumberChanged($event)" class="row">
<time-duration-picker-unit class="col-md-12" [name]="'second'"></time-duration-picker-unit>
</time-duration-picker><time-duration-picker [inputDisabled]=false returnedValueUnit="hour" (onChange)="onNumberChanged($event)" class="row">
<time-duration-picker-unit class="col-md-2" [name]="'millisecond'" [label]="'Milliseconds'" [min]="0" [max]="999" [step]="1"></time-duration-picker-unit>
<time-duration-picker-unit class="col-md-2" [name]="'second'" [label]="'Seconds'" [min]="0" [max]="59" [step]="1"></time-duration-picker-unit>
<time-duration-picker-unit class="col-md-2" [name]="'minute'" [label]="'Minutes'" [min]="0" [max]="59" [step]="1"></time-duration-picker-unit>
<time-duration-picker-unit class="col-md-2" [name]="'hour'" [label]="'Hours'" [min]="0" [max]="23" [step]="1"></time-duration-picker-unit>
<time-duration-picker-unit class="col-md-2" [name]="'day'" [label]="'Days'" [min]="0" [max]="7" [step]="1"></time-duration-picker-unit>
<time-duration-picker-unit class="col-md-2" [name]="'week'" [label]="'Weeks'" [min]="0" [max]="51" [step]="1"></time-duration-picker-unit>
</time-duration-picker>time-duration-picker Field Schema
| Attribute | Type | Required | Description |
|---|---|---|---|
| returnedValueUnit | input String | No | The unit of returned Value. default: 'second' |
| inputDisabled | input Boolean | No | Defines if the input input should be disabled / editable by the user. default: true |
| onChange | (output) Number | No | The onChange event of the component. Emits the value of the picker every time the user has clicked the - or + button. |
time-duration-picker-unit Field Schema
| Attribute | Type | Required | Description |
|---|---|---|---|
| name | input String | Yes | The units of the picker, supported values: 'week', 'day', 'hour', 'minute', 'second' and 'millisecond' |
| label | input String | No | The label of the picker, default: name capitalized |
| min | input number | No | The Minimum value can be set, default: 0 |
| max | input number | No | The Maximum value can be set, default: (check the code) |
| step | input number | No | The step value, default: 1 |
| inputDisabled | input Boolean | No | Defines if the input input should be disabled / editable by the user. default: true |
| onChange | (output) Number | No | The onChange event of the component. Emits the value of the picker every time the user has clicked the - or + button. |
License
MIT © Mohammad Nuairat