custom output format added

README.md

@@ -89,6 +89,16 @@ You can optionally specify a date format using:
 
 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)
 

projects/ngx-duration-picker/src/lib/duration-picker.component.spec.ts

@@ -1,5 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
+import {filter, take, tap} from 'rxjs/operators';
 
 import { DurationPickerComponent } from './duration-picker.component';
 
@@ -234,6 +235,67 @@ describe('DurationPickerComponent', () => {
 
     expect(component.preview).toEqual(expectedPreview);
   });
+
+  it('valueInSeconds should return correct value for each duration unit', () => {
+    const minuteInSeconds = 60;
+    const hourInSeconds = 3600;
+    const dayInSeconds = 86400;
+    const weekInSeconds = 6048000;
+    const monthInSeconds = 25920000;
+    const yearInSeconds = 315360000;
+
+    set(component, 0, 0, 0, 0, 0, 0, 1, false, '', 'seconds');
+    expect(component.valueInSeconds).toEqual(1);
+
+    set(component, 0, 0, 0, 0, 0, 1, 0, false, '', 'seconds');
+    expect(component.valueInSeconds).toEqual(minuteInSeconds);
+
+    set(component, 0, 0, 0, 0, 1, 0, 0, false, '', 'seconds');
+    expect(component.valueInSeconds).toEqual(hourInSeconds);
+
+    set(component, 0, 0, 0, 1, 0, 0, 0, false, '', 'seconds');
+    expect(component.valueInSeconds).toEqual(dayInSeconds);
+
+    set(component, 0, 0, 1, 0, 0, 0, 0, false, '', 'seconds');
+    expect(component.valueInSeconds).toEqual(weekInSeconds);
+
+    set(component, 0, 1, 0, 0, 0, 0, 0, false, '', 'seconds');
+    expect(component.valueInSeconds).toEqual(monthInSeconds);
+
+    set(component, 1, 0, 0, 0, 0, 0, 0, false, '', 'seconds');
+    expect(component.valueInSeconds).toEqual(yearInSeconds);
+  });
+
+  it('valueInMilliseconds should return correct value for each duration unit', () => {
+    const secondInMilliseconds = 1000;
+    const minuteInMilliseconds = 60000;
+    const hourInMilliseconds = 3600000;
+    const dayInMilliseconds = 86400000;
+    const weekInMilliseconds = 6048000000;
+    const monthInMilliseconds = 25920000000;
+    const yearInMilliseconds = 315360000000;
+
+    set(component, 0, 0, 0, 0, 0, 0, 1, false, '', 'seconds');
+    expect(component.valueInMilliseconds).toEqual(secondInMilliseconds);
+
+    set(component, 0, 0, 0, 0, 0, 1, 0, false, '', 'seconds');
+    expect(component.valueInMilliseconds).toEqual(minuteInMilliseconds);
+
+    set(component, 0, 0, 0, 0, 1, 0, 0, false, '', 'seconds');
+    expect(component.valueInMilliseconds).toEqual(hourInMilliseconds);
+
+    set(component, 0, 0, 0, 1, 0, 0, 0, false, '', 'seconds');
+    expect(component.valueInMilliseconds).toEqual(dayInMilliseconds);
+
+    set(component, 0, 0, 1, 0, 0, 0, 0, false, '', 'seconds');
+    expect(component.valueInMilliseconds).toEqual(weekInMilliseconds);
+
+    set(component, 0, 1, 0, 0, 0, 0, 0, false, '', 'seconds');
+    expect(component.valueInMilliseconds).toEqual(monthInMilliseconds);
+
+    set(component, 1, 0, 0, 0, 0, 0, 0, false, '', 'seconds');
+    expect(component.valueInMilliseconds).toEqual(yearInMilliseconds);
+  });
 });
 
 function set(
@@ -247,6 +309,7 @@ function set(
   seconds,
   negative = false,
   previewFormat = 'ISO',
+  customOutputFormat = 'ISO',
 ) {
   component.years = years;
   component.months = months;
@@ -258,4 +321,5 @@ function set(
   component.config.showNegative = negative;
   component.negative = negative;
   component.config.previewFormat = previewFormat;
+  component.config.customOutputFormat = customOutputFormat;
 }

projects/ngx-duration-picker/src/lib/duration-picker.component.ts

@@ -31,9 +31,11 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
   set value(value: string) {
     this._value = value;
     this.parse();
+    this.emitCustomOutput();
   }
 
   @Output() valueChange = new EventEmitter<string>();
+  @Output() customOutput = new EventEmitter<string | number>();
 
   private _disabled = false;
 
@@ -71,21 +73,15 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
     showSeconds : true,
     zeroValue   : 'PT0S',
     previewFormat: 'ISO',
+    customOutputFormat: 'ISO',
   };
 
   get preview(): string {
     if (!this.config.previewFormat || this.config.previewFormat.length === 0 || this.config.previewFormat === 'ISO') {
       return this.value;
     }
 
-    return this.config.previewFormat
-      .replace('{{Y}}', `${this.years}`)
-      .replace('{{M}}', `${this.months}`)
-      .replace('{{W}}', `${this.weeks}`)
-      .replace('{{D}}', `${this.days}`)
-      .replace('{{h}}', `${this.hours}`)
-      .replace('{{m}}', `${this.minutes}`)
-      .replace('{{s}}', `${this.seconds}`);
+    return this.injectValuesIntoString(this.config.previewFormat);
   }
 
   get negative() { return this._negative; }
@@ -143,6 +139,20 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
     this.emitNewValue();
   }
 
+  get valueInSeconds() {
+    return this.seconds +
+      this.minutes * 60 +
+      this.hours * 3600 +
+      this.days * 86400 +
+      this.weeks * 6048000 +
+      this.months * 25920000 +
+      this.years * 315360000;
+  }
+
+  get valueInMilliseconds() {
+    return this.valueInSeconds * 1000;
+  }
+
   onChange = (_: any) => {};
   onTouched = () => {};
 
@@ -183,7 +193,7 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
       return;
     }
 
-    this._negative  = match[0].startsWith('-');
+    this._negative = match[0].startsWith('-');
     this._years    = this.parseNumber(match[1]);
     this._months   = this.parseNumber(match[2]);
     this._weeks    = this.parseNumber(match[3]);
@@ -242,13 +252,40 @@ export class DurationPickerComponent implements OnInit, ControlValueAccessor {
     return output;
   }
 
+  injectValuesIntoString(text: string) {
+    return text
+      .replace('{{Y}}', `${this.years}`)
+      .replace('{{M}}', `${this.months}`)
+      .replace('{{W}}', `${this.weeks}`)
+      .replace('{{D}}', `${this.days}`)
+      .replace('{{h}}', `${this.hours}`)
+      .replace('{{m}}', `${this.minutes}`)
+      .replace('{{s}}', `${this.seconds}`);
+  }
+
   emitNewValue() {
     this.value = this.generate();
     this.valueChange.emit(this.value);
+    this.emitCustomOutput();
     this.onTouched();
     this.onChange(this.value);
   }
 
+  emitCustomOutput() {
+    let customOutput: string | number = this.value;
+
+    if (this.config.customOutputFormat && this.config.customOutputFormat.length > 0) {
+      switch (this.config.customOutputFormat) {
+        case 'ISO': break;
+        case 'timestamp': customOutput = this.valueInMilliseconds; break;
+        case 'seconds': customOutput = this.valueInSeconds; break;
+        default: this.injectValuesIntoString(this.config.customOutputFormat);
+      }
+    }
+
+    this.customOutput.emit(customOutput);
+  }
+
   // Attach all the changes received in the options object
   attachChanges(options: any): void {
     Object.keys(options).forEach(param => {

projects/ngx-duration-picker/src/lib/duration-picker.d.ts

@@ -12,4 +12,5 @@ export interface DurationPickerOptions {
   showSeconds: boolean;
   zeroValue: string | null;
   previewFormat: string;
+  customOutputFormat: string;
 }