Activiti form - Custom date format (#1806)

* Fix format date|
#1704

* Add unit tests on custom format date
#1704

* Update form-field.model.ts

* Update display-value.widget.ts

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts

@@ -121,6 +121,109 @@ describe('FormFieldModel', () => {
         expect(field.value).toBe('deferred');
     });
 
+    it('should parse the date with the default format (D-M-YYYY) if the display format is missing', () => {
+        let form = new FormModel();
+        let field = new FormFieldModel(form, {
+            fieldType: 'FormFieldRepresentation',
+            id: 'mmddyyyy',
+            name: 'MM-DD-YYYY',
+            type: 'date',
+            value: '2017-04-28T00:00:00.000+0000',
+            required: false,
+            readOnly: false,
+            params: {
+                field: {
+                    id: 'mmddyyyy',
+                    name: 'MM-DD-YYYY',
+                    type: 'date',
+                    value: null,
+                    required: false,
+                    readOnly: false
+                }
+            }
+        });
+        expect(field.value).toBe('28-4-2017');
+        expect(form.values['mmddyyyy']).toEqual('2017-04-28T00:00:00.000Z');
+    });
+
+    it('should parse the date with the format MM-DD-YYYY', () => {
+        let form = new FormModel();
+        let field = new FormFieldModel(form, {
+            fieldType: 'FormFieldRepresentation',
+            id: 'mmddyyyy',
+            name: 'MM-DD-YYYY',
+            type: 'date',
+            value: '2017-04-28T00:00:00.000+0000',
+            required: false,
+            readOnly: false,
+            params: {
+                field: {
+                    id: 'mmddyyyy',
+                    name: 'MM-DD-YYYY',
+                    type: 'date',
+                    value: null,
+                    required: false,
+                    readOnly: false
+                }
+            },
+            dateDisplayFormat: 'MM-DD-YYYY'
+        });
+        expect(field.value).toBe('04-28-2017');
+        expect(form.values['mmddyyyy']).toEqual('2017-04-28T00:00:00.000Z');
+    });
+
+    it('should parse the date with the format MM-YY-DD', () => {
+        let form = new FormModel();
+        let field = new FormFieldModel(form, {
+            fieldType: 'FormFieldRepresentation',
+            id: 'mmyydd',
+            name: 'MM-YY-DD',
+            type: 'date',
+            value: '2017-04-28T00:00:00.000+0000',
+            required: false,
+            readOnly: false,
+            params: {
+                field: {
+                    id: 'mmyydd',
+                    name: 'MM-YY-DD',
+                    type: 'date',
+                    value: null,
+                    required: false,
+                    readOnly: false
+                }
+            },
+            dateDisplayFormat: 'MM-YY-DD'
+        });
+        expect(field.value).toBe('04-17-28');
+        expect(form.values['mmyydd']).toEqual('2017-04-28T00:00:00.000Z');
+    });
+
+    it('should parse the date with the format DD-MM-YYYY', () => {
+        let form = new FormModel();
+        let field = new FormFieldModel(form, {
+            fieldType: 'FormFieldRepresentation',
+            id: 'ddmmyyy',
+            name: 'DD-MM-YYYY',
+            type: 'date',
+            value: '2017-04-28T00:00:00.000+0000',
+            required: false,
+            readOnly: false,
+            params: {
+                field: {
+                    id: 'ddmmyyy',
+                    name: 'DD-MM-YYYY',
+                    type: 'date',
+                    value: null,
+                    required: false,
+                    readOnly: false
+                }
+            },
+            dateDisplayFormat: 'DD-MM-YYYY'
+        });
+        expect(field.value).toBe('28-04-2017');
+        expect(form.values['ddmmyyy']).toEqual('2017-04-28T00:00:00.000Z');
+    });
+
     it('should return the label of selected dropdown value ', () => {
         let field = new FormFieldModel(new FormModel(), {
             type: FormFieldTypes.DROPDOWN,

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts

@@ -76,7 +76,7 @@ export class FormFieldModel extends FormWidgetModel {
     visibilityCondition: WidgetVisibilityModel = null;
     enableFractions: boolean = false;
     currency: string = null;
-    dateDisplayFormat: string = this.defaultDateFormat;
+    dateDisplayFormat: string = this.dateDisplayFormat || this.defaultDateFormat;
 
     // container model members
     numberOfColumns: number = 1;
@@ -249,9 +249,14 @@ export class FormFieldModel extends FormWidgetModel {
          */
         if (json.type === FormFieldTypes.DATE) {
             if (value) {
-                let d = moment(value.split('T')[0], 'YYYY-M-D');
+                let dateValue;
-                if (d.isValid()) {
+                if (NumberFieldValidator.isNumber(value)) {
-                    value = d.format(this.dateDisplayFormat);
+                    dateValue = moment(value);
+                } else {
+                    dateValue = moment(value.split('T')[0], 'YYYY-M-D');
+                }
+                if (dateValue && dateValue.isValid()) {
+                    value = dateValue.format(this.dateDisplayFormat);
                 }
             }
         }
@@ -307,9 +312,14 @@ export class FormFieldModel extends FormWidgetModel {
                 }
                 break;
             case FormFieldTypes.DATE:
-                let d = moment(this.value, this.dateDisplayFormat);
+                let dateValue;
-                if (d.isValid()) {
+                if (NumberFieldValidator.isNumber(this.value)) {
-                    this.form.values[this.id] = `${d.format('YYYY-MM-DD')}T00:00:00.000Z`;
+                    dateValue = moment(this.value);
+                } else {
+                    dateValue = moment(this.value, this.dateDisplayFormat);
+                }
+                if (dateValue && dateValue.isValid()) {
+                    this.form.values[this.id] = `${dateValue.format('YYYY-MM-DD')}T00:00:00.000Z`;
                 } else {
                     this.form.values[this.id] = null;
                 }

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts

@@ -441,6 +441,65 @@ describe('DisplayValueWidget', () => {
         expect(widget.value).toBe('<invalid value>');
     });
 
+    it('should show the [DATE] field with the default format (D-M-YYYY) if the display format is missing', () => {
+        widget.field = new FormFieldModel(null, {
+            type: FormFieldTypes.DISPLAY_VALUE,
+            value: '1982-03-13T00:00:00.000Z',
+            params: {
+                field: {
+                    type: FormFieldTypes.DATE
+                }
+            }
+        });
+        widget.ngOnInit();
+        expect(widget.value).toBe('13-3-1982');
+    });
+
+    it('should show the [DATE] field with the custom display format (MM-DD-YYYY)', () => {
+        widget.field = new FormFieldModel(null, {
+            type: FormFieldTypes.DISPLAY_VALUE,
+            value: '1982-03-13T00:00:00.000Z',
+            dateDisplayFormat: 'MM-DD-YYYY',
+            params: {
+                field: {
+                    type: FormFieldTypes.DATE
+                }
+            }
+        });
+        widget.ngOnInit();
+        expect(widget.value).toBe('03-13-1982');
+    });
+
+    it('should show the [DATE] field with the custom display format (MM-YY-DD)', () => {
+        widget.field = new FormFieldModel(null, {
+            type: FormFieldTypes.DISPLAY_VALUE,
+            value: '1982-03-13T00:00:00.000Z',
+            dateDisplayFormat: 'MM-YY-DD',
+            params: {
+                field: {
+                    type: FormFieldTypes.DATE
+                }
+            }
+        });
+        widget.ngOnInit();
+        expect(widget.value).toBe('03-82-13');
+    });
+
+    it('should show the [DATE] field with the custom display format (DD-MM-YYYY)', () => {
+        widget.field = new FormFieldModel(null, {
+            type: FormFieldTypes.DISPLAY_VALUE,
+            value: '1982-03-13T00:00:00.000Z',
+            dateDisplayFormat: 'DD-MM-YYYY',
+            params: {
+                field: {
+                    type: FormFieldTypes.DATE
+                }
+            }
+        });
+        widget.ngOnInit();
+        expect(widget.value).toBe('13-03-1982');
+    });
+
     it('should not setup [DATE] field when missing value', () => {
         widget.field = new FormFieldModel(null, {
             type: FormFieldTypes.DISPLAY_VALUE,

ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts

@@ -24,6 +24,7 @@ import { FormService } from '../../../services/form.service';
 import { FormFieldOption } from './../core/form-field-option';
 import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-table.widget.model';
 import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
+import { NumberFieldValidator } from '../core/form-field-validator';
 
 @Component({
     moduleId: module.id,
@@ -115,10 +116,15 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
                             break;
                         case FormFieldTypes.DATE:
                             if (this.value) {
-                                let d = moment(this.value.split('T')[0], 'YYYY-M-D');
+                                let dateValue;
-                                if (d.isValid()) {
+                                if (NumberFieldValidator.isNumber(this.value)) {
-                                    const displayFormat = originalField['dateDisplayFormat'] || this.field.defaultDateFormat;
+                                    dateValue = moment(this.value);
-                                    this.value = d.format(displayFormat);
+                                } else {
+                                    dateValue = moment(this.value.split('T')[0], 'YYYY-M-D');
+                                }
+                                if (dateValue && dateValue.isValid()) {
+                                    const displayFormat = this.field.dateDisplayFormat || this.field.defaultDateFormat;
+                                    this.value = dateValue.format(displayFormat);
                                 }
                             }
                             break;