ngx-duration-picker

!ngx-duration-picker screenshot

A reusable Angular duration-picker component that works with ISO_8601 durations.

Requires Bootstrap, css only (no Bootstrap JS or jQuery needed).

Live demo

You can check a live demo of this library and all its features here

Installation

- Run:

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 { }
`

Usage

``

where myDuration will be the variable where the output is stored, you can also pass an initial value.

$3

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

``

$3

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

``

$3

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

#### previewFormat
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

#### customOutputFormat
String, default ISO.

You can optionally specify:
- timestamp for duration in milliseconds
- seconds for duration in seconds
- custom string as described in previewFormat option

Chosen value will be emitted by customOutput.

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

#### labels
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:
`angular2
{
weeks: 'tyg',
hours: 'godz'
}
`

#### unitSteps
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:
`angular2
{
weeks: 4,
hours: 2
}
`

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

Local development

$3

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

$3

- Unit tests are located in projects/ngx-duration-picker/src/lib/*.spec.ts and you can run them using npm run test:unit
- Integration tests are located in src/app/integration-tests/*.spec.ts and you can run them using npm 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.

$3

- Run npm run build:demo and commit the docs/` directory

Donate

You can support me with a donation.