Angular Duration-picker Component

by Posted on

A reusable Angular duration-picker component that works with ISO_8601 durations. Requires Bootstrap, css only (no Bootstrap JS or jQuery needed).
Angular-duration-picker-component

Installation

installing component form NPM.

npm install --save ngx-duration-picker




Then in your app.module.ts add DurationPickerModule between your imports:

@NgModule({
  declarations: [...],
  imports: [
    DurationPickerModule,
    ...
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

Local development

  • 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 serve to serve the demo app (src/*) and play with it.

Usage

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

Watch for changes

if you need to perform some operations each time the bound variable changes, you can use (valueChange):

<ngx-duration-picker [(value)]="myDuration" (valueChange)="doSomeStuff()">

Passing options

you can pass specify some options by binding [options] to your configuration object:

<ngx-duration-picker [(value)]="myDuration" [options]="{ showWeeks: false }">



Available options

list of available pitons to customise
zeroValue

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.

showNegative

Boolean, default false. Sets up the option for negative and positive durations.

showButtons

Boolean, default true. Shows the up and down buttons.

showPreview

Boolean, default true. Shows a preview of the value.

showLetters

Boolean, default true. Shows the letters on top (Y, M, W, D, H, M, S)

showYears

Boolean, default true. Shows the years, when hidden it will be always considered as 0.

showMonths

Boolean, default true. Shows the months, when hidden it will be always considered as 0.

showWeeks

Boolean, default true. Shows the weeks, when hidden it will be always considered as 0.

showDays

Boolean, default true. Shows the days, when hidden it will be always considered as 0.

showHours

Boolean, default true. Shows the hours, when hidden it will be always considered as 0.

showMinutes

Boolean, default true. Shows the minutes, when hidden it will be always considered as 0.

showSeconds

Boolean, default true. Shows the seconds, when hidden it will be always considered as 0.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by FrancescoBorzi. Visit their official github repository for more information and follow for future updates.


Published by admin