mhzarini/ngx-time-duration-picker

A generic time duration picker Angular component (v2+)

ngx-time-duration-picker

A generic time duration picker Angular component (v. 2.0.0+)

Installation

To install this library, run:

$ npm install ngx-time-duration-picker --save

Requirements

• Angular

usage

Import the NgxTimeDurationPickerModule in your app.module and add it to the imports array. 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 { NgxTimeDurationPickerModule } from 'angular2-time-duration-picker';

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

Once your library is imported, you can use its components in your Angular application:

Add the ngx-time-duration-picker component to the page where you want to use the picker, with disired Time unit ngx-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>

<ngx-time-duration-picker returnedValueUnit="hour" (OnChange)="onValueChanged($event)">
  <ngx-time-duration-picker-unit name="millisecond" min="0" max="999" step="1"></ngx-time-duration-picker-unit>
  <ngx-time-duration-picker-unit name="second" min="0" max="60" step="1"></ngx-time-duration-picker-unit>
  <ngx-time-duration-picker-unit name="minute" min="0" max="60" step="1"></ngx-time-duration-picker-unit>
  <ngx-time-duration-picker-unit name="hour" min="0" max="60" step="1"></ngx-time-duration-picker-unit>
  <ngx-time-duration-picker-unit name="day" min="0" max="60" step="1"></ngx-time-duration-picker-unit>
  <ngx-time-duration-picker-unit name="week" min="0" max="60" step="1"></ngx-time-duration-picker-unit>
</ngx-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

ngx-time-duration-picker's Issues

Could this support "long press" actions on the incremental adjustments?

Greetings, I don't see any mention of this in the docs, nor any other users requesting it.. So either I'm missing something, or I'm barking up the wrong tree here. (:

Just to check, is there any way with ngx-time-duration-picker, to add the ability to "long press" on the up/down increment adjustment buttons? I have a case where the input number range (milliseconds) must be able to be precise to the integer, but can span into the hundreds. (e.g.: 0.47 seconds).

I would like to be able to long-press on the up or down adjustment button, and have the value jump by x every x seconds.. For example, 10 at a time for ms, 10 or 5 for s, 5 for m, etc..

Is what I'm looking for possible with this particular component?

Module Import not working

NgxTimeDurationPickerModule is not found in 'angular2-time-duration-picker' rather in 'ngx-time-duration-picke'

ISO_8601 duration format

Is there a way to convert the result to ISO_8601 duration format ?

Need Demo

Please, create a github.io page. And provide some demo.

Ngx-time-duration-picker not working in angular 10

Below is the error while trying to implement

ERROR in node_modules/ngx-time-duration-picker/lib/ngx-time-duration-picker.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of ELearningEd
itCourseModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-time-duration-picker) which declares NgxTimeDurationPickerModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.


1 export declare class NgxTimeDurationPickerModule {

Is this compatible with Angular 4?

I tried using this module inside jhipster generated Angular4 FE app and I get this error when trying to import and use it in one component:

Uncaught Error: Unexpected value 'TimeDurationPickerModule' imported by the module 'JoggingTimeTrackerJoggingDataModule'. Please add a @NgModule annotation.
    at syntaxError (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:1917)
    at eval (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15601)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15584)
    at CompileMetadataResolver.getNgModuleSummary (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15526)
    at eval (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15599)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15584)
    at CompileMetadataResolver.getNgModuleSummary (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15526)
    at eval (webpack-internal:///./node_modules/@angular/compiler/@angular/compiler.es5.js:15599)

I'm using import statement like this in src/main/webapp/app/entities/jogging-data/jogging-data.module.ts:
import { TimeDurationPickerModule } from 'angular2-time-duration-picker';
Can you please provide some assistance?

Duplicated ids when multiple pickers

Browser throws those warnings when more than one timepicker is used

[DOM] Found elements with non-unique id #dp-hours: (More info: https://goo.gl/9p2vKq)
[DOM] Found elements with non-unique id #dp-minutes: (More info: https://goo.gl/9p2vKq)
[DOM] Found elements with non-unique id #dp-seconds: (More info: https://goo.gl/9p2vKq)

Set time by default

Is it possible to set time by default, not 0? For example 2h23m.