A reusable Angular duration-picker component that works with ISO_8601 durations.
Requires Bootstrap, css only (no Bootstrap JS or jQuery needed).
You can check a live demo of this library and all its features here
- Run:
npm install --save ngx-duration-picker
- Then in your
app.module.tsaddDurationPickerModulebetween yourimports:
@NgModule({
declarations: [...],
imports: [
DurationPickerModule,
...
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule { }
<ngx-duration-picker [(value)]="myDuration"></ngx-duration-picker>
where myDuration will be the variable where the output is stored, you can also pass an initial value.
if you need to perform some operations each time the bound variable changes, you can use (valueChange):
<ngx-duration-picker [(value)]="myDuration" (valueChange)="doSomeStuff()">
you can pass specify some options by binding [options] to your configuration object:
<ngx-duration-picker [(value)]="myDuration" [options]="{ showWeeks: false }">
String or Null, default 'PT0S'.
Value to be used when the duration is 0. Since the specification says that 'PT0S' or 'P0D' are both valid, you are allowed to change this value. You can also pass just null.
Boolean, default false. Sets up the option for negative and positive durations.
Boolean, default true. Shows the up and down buttons.
Boolean, default true. Shows a preview of the value.
String, default ISO.
You can optionally specify a date format using:
{{Y}}for years{{M}}for months{{W}}for weeks{{D}}for days{{h}}for hours{{m}}for minutes{{s}}for seconds
Example string: {{h}} hours : {{m}} minutes : {{s}} seconds
String, default ISO.
You can optionally specify:
timestampfor duration in millisecondssecondsfor duration in seconds- custom string as described in
previewFormatoption
Chosen value will be emitted by customOutput.
Boolean, default true. Shows the letters on top (Y, M, W, D, H, M, S)
Object, accepting labels that should be shown above the fields instead of default letters (showLetters has to be set to true).
Available fields (with default labels):
- years (
Y) - months (
M) - weeks (
W) - days (
D) - hours (
H) - minutes (
M) - seconds (
S)
Example object which is overwriting weeks and hours properties:
{
weeks: 'tyg',
hours: 'godz'
}
Object, accepting numbers representing increment/decrement step size for each unit. Non-positive values will be replaced with default value: 1.
Available fields:
- years
- months
- weeks
- days
- hours
- minutes
- seconds
Example object which is overwriting weeks and hours properties:
{
weeks: 4,
hours: 2
}
Boolean, default true. Shows the years, when hidden it will be always considered as 0.
Boolean, default true. Shows the months, when hidden it will be always considered as 0.
Boolean, default true. Shows the weeks, when hidden it will be always considered as 0.
Boolean, default true. Shows the days, when hidden it will be always considered as 0.
Boolean, default true. Shows the hours, when hidden it will be always considered as 0.
Boolean, default true. Shows the minutes, when hidden it will be always considered as 0.
Boolean, default true. Shows the seconds, when hidden it will be always considered as 0.
-
On one terminal tab run
ng build ngx-duration-picker --watch. This will build the library sources (projects/ngx-duration-picker/*) and watch for changes. -
On another terminal tab run
ng serveto serve the demo app (src/*) and play with it.
- Unit tests are located in
projects/ngx-duration-picker/src/lib/*.spec.tsand you can run them usingnpm run test:unit - Integration tests are located in
src/app/integration-tests/*.spec.tsand you can run them usingnpm run test:integration
The default browser is Chrome. You can also append :ci to run them in Headless mode, and :ci:firefox to run them with Firefox.
- Run
npm run build:demoand commit thedocs/directory
You can support me with a donation.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent