ngx-pmr-duration-picker v16.0.0
ngx-pmr-duration-picker
Table of contents
Overview
ngx-pmr-duration-picker is an Angular library to display and manage durations on your application following the standard ISO 8601.
It is able to work with both ngModel and FormsModule, and allows you to customize it to best match your application.
It parses and allows you to edit durations on a pretty and string modes.
Live examples and documentation can be found on the documentation page.
How to use it
You can install this lib with the following command:
npm i --save ngx-pmr-duration-picker
Then you need to import it into your module:
import { NgxPmrDurationPickerModule } from 'ngx-pmr-duration-picker';
Then you can use it on your angular components as described on the following section.
Examples
NgModel
HTML
<pmr-duration-picker [(ngModel)]="duration"></pmr-duration-picker>
TS
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
duration = 'P4DT5H6M7S';
}
FormsModule
HTML
<form [formGroup]="formGroup">
<pmr-duration-picker formControlName="duration"></pmr-duration-picker>
</form>
TS
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
formGroup = this.formBuilder.group({
duration: ['P1Y2M3W4DT5H6M7S']
});
constructor(private formBuilder: FormBuilder) {
}
}
Time
HTML
<pmr-duration-picker [displayedItems]="displayedItems" [(ngModel)]="duration"></pmr-duration-picker>
TS
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
displayedItems = ['TH', 'TM', 'TS'];
duration = 'PT1H2M3S';
}
Increased Font
HTML
<pmr-duration-picker style="font-size: 30px" [(ngModel)]="duration"></pmr-duration-picker>
TS
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
duration = 'PT1H2M3S';
}
Disable switch
HTML
<pmr-duration-picker [disableSwitchMode]="true" [(ngModel)]="duration"></pmr-duration-picker>
TS
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
duration = 'PT1H2M3S';
}
Properties
Property | Type | Datatype | Description | Default Value |
---|---|---|---|---|
displayedItems | Input | string[] | List of duration units to be displayed. Time fields have a T prefix. Possible values are: Y, M, W, D TH, TM, TS . | ['Y', 'M', 'W', 'D', 'TH', 'TM', 'TS'] |
disableLabel | Input | boolean | If set to true, disables the duration label. | false |
disableSwitchMode | Input | boolean | If set to true, disables the switch mode between pretty and string modes. | false |
duration | Input | string | Allows to override form field label text. | Duration |
valid | Output | EventEmitter | Boolean EventEmitter that reports wether the duration string is valid or not. |
Run test/docs application
In order to run the test/documentation page, you first need to build the library and run it in watched mode to be able to catch automatically catch your changes.
ng build ngx-pmr-duration-picker --watch
Then on another terminal window we just need to run the application:
npm start
Testing
This lib is covered by cypress component tests.
Tests are automatically run after every build, but they can also be run through the following command:
npm run cy:run:component
or by opening cypress tool in headed mode and by choosing component tests.
npm run cy:open
Build
We can build this lib using the following command:
ng build ngx-pmr-duration-picker
In development mode, to see the changes on our test application, we can append the --watch
flag.
To build a production artifact, we can add the --configuration=production
flag.
Deploy
We can deploy this lib to a npm registry using the following command:
npm publish dist/ngx-pmr-duration-picker
CI/CD
We are using GitHub actions workflows to build this lib, run cypress component unit tests on every pull request commit commit.
We also ensure continuous delivery publishing the artifact to npm registry and drafting a new release when merging the PR to master.
For the documentation/test page, we also have a GitHub actions workflow to deploy it to GitHub pages.
Issues
For issues reporting, please fill one of the following template forms.
To avoid duplicate issues, please have a look on the existing issues first.
1 month ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago