[ACS-5857] addressed review comments

lib/core/src/lib/common/utils/date-fns-utils.ts

@@ -88,7 +88,7 @@ export class DateFnsUtils {
         Y: 'y',
         A: 'a',
         ll: 'PP',
-        Z: 'XXX',
+        Z: ` zzzz`,
         T: `'T'`
     };
 

lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { DateFnsUtils } from '../../../../common';
+import { DateFnsUtils } from '../../../../common/utils/date-fns-utils';
 import { ErrorMessageModel } from './error-message.model';
 import { FormFieldOption } from './form-field-option';
 import { FormFieldTypes } from './form-field-types';
@@ -708,9 +708,9 @@ describe('FormFieldValidator', () => {
 
         it('should take into account that max value is in UTC and NOT fail validating value checking the time', () => {
             const maxValueFromActivitiInput = '31-3-2018 12:00 AM';
-            const maxValueSavedInForm = DateFnsUtils.formatDate(DateFnsUtils.parseDate(maxValueFromActivitiInput, 'DD-M-YYYY hh:mm A'), `YYYY-MM-DDTHH:mm:ssZ`);
+            const maxValueSavedInForm = DateFnsUtils.parseDate(maxValueFromActivitiInput, 'DD-M-YYYY hh:mm A').toISOString();
 
-            const localValidValue = '2018-3-30 11:59 PM';
+            const localValidValue = new Date('2018-3-30 11:59 PM').toISOString();
 
             const field = new FormFieldModel(new FormModel(), {
                 type: FormFieldTypes.DATETIME,
@@ -723,9 +723,9 @@ describe('FormFieldValidator', () => {
 
         it('should take into account that max value is in UTC and fail validating value checking the time', () => {
             const maxValueFromActivitiInput = '31-3-2018 12:00 AM';
-            const maxValueSavedInForm = DateFnsUtils.formatDate(DateFnsUtils.parseDate(maxValueFromActivitiInput, 'DD-M-YYYY hh:mm A'), `YYYY-MM-DDTHH:mm:ssZ`);
+            const maxValueSavedInForm = DateFnsUtils.parseDate(maxValueFromActivitiInput, 'DD-M-YYYY hh:mm A').toISOString();
 
-            const localInvalidValue = '2018-3-31 12:01 AM';
+            const localInvalidValue = new Date('2018-3-31 12:01 AM').toISOString();
 
             const field = new FormFieldModel(new FormModel(), {
                 type: FormFieldTypes.DATETIME,
@@ -833,9 +833,9 @@ describe('FormFieldValidator', () => {
 
         it('should take into account that min value is in UTC and NOT fail validating value checking the time', () => {
             const minValueFromActivitiInput = '02-3-2018 06:00 AM';
-            const minValueSavedInForm = DateFnsUtils.formatDate(DateFnsUtils.parseDate(minValueFromActivitiInput, 'DD-M-YYYY hh:mm A'), `YYYY-MM-DDTHH:mm:ssZ`);
+            const minValueSavedInForm = DateFnsUtils.parseDate(minValueFromActivitiInput, 'DD-M-YYYY hh:mm A').toISOString();
 
-            const localValidValue = '2018-3-02 06:01 AM';
+            const localValidValue = new Date('2018-3-02 06:01 AM').toISOString();
 
             const field = new FormFieldModel(new FormModel(), {
                 type: FormFieldTypes.DATETIME,
@@ -848,9 +848,9 @@ describe('FormFieldValidator', () => {
 
         it('should take into account that min value is in UTC and fail validating value checking the time', () => {
             const minValueFromActivitiInput = '02-3-2018 06:00 AM';
-            const minValueSavedInForm = DateFnsUtils.formatDate(DateFnsUtils.parseDate(minValueFromActivitiInput, 'DD-M-YYYY hh:mm A'), `YYYY-MM-DDTHH:mm:ssZ`);
+            const minValueSavedInForm = DateFnsUtils.parseDate(minValueFromActivitiInput, 'DD-M-YYYY hh:mm A').toISOString();
 
-            const localInvalidValue = '2018-3-02 05:59 AM';
+            const localInvalidValue = new Date('2018-3-02 05:59 AM').toISOString();
 
             const field = new FormFieldModel(new FormModel(), {
                 type: FormFieldTypes.DATETIME,
@@ -1113,7 +1113,7 @@ describe('FormFieldValidator', () => {
         it('should validate dateTime format with default format', () => {
             const field = new FormFieldModel(new FormModel(), {
                 type: FormFieldTypes.DATETIME,
-                value: '2021-06-09 02:10 AM'
+                value: '2021-06-09 14:10'
             });
             expect(validator.validate(field)).toBeTruthy();
         });

lib/core/src/lib/form/components/widgets/core/form-field-validator.ts

@@ -21,7 +21,7 @@ import { FormFieldTypes } from './form-field-types';
 import { isNumberValue } from './form-field-utils';
 import { FormFieldModel } from './form-field.model';
 import { isAfter, isBefore, isValid } from 'date-fns';
-import { DateFnsUtils } from '../../../../common';
+import { DateFnsUtils } from '../../../../common/utils/date-fns-utils';
 
 export interface FormFieldValidator {
 
@@ -180,7 +180,13 @@ export class DateTimeFieldValidator implements FormFieldValidator {
     // Validates that the input string is a valid date formatted as <dateFormat> (default D-M-YYYY)
     static isValidDate(inputDate: string, dateFormat: string = 'YYYY-MM-DD HH:mm'): boolean {
         if (inputDate) {
-            const dateTime = DateFnsUtils.parseDate(inputDate, dateFormat);
+            let dateTime = DateFnsUtils.parseDate(inputDate, dateFormat);
+
+            if (!isValid(dateTime) && dateFormat !== 'YYYY-MM-DD HH:mm') {
+                dateFormat = 'YYYY-MM-DD HH:mm';
+                dateTime =  DateFnsUtils.parseDate(inputDate, dateFormat);
+            }
+
             return isValid(dateTime);
         }
 
@@ -193,7 +199,7 @@ export class DateTimeFieldValidator implements FormFieldValidator {
 
     validate(field: FormFieldModel): boolean {
         if (this.isSupported(field) && field.value && field.isVisible) {
-            if (DateTimeFieldValidator.isValidDate(field.value, DateFnsUtils.convertMomentToDateFnsFormat(field.dateDisplayFormat))) {
+            if (DateTimeFieldValidator.isValidDate(field.value, field.dateDisplayFormat)) {
                 return true;
             }
             field.validationSummary.message = DateFnsUtils.convertDateFnsToMomentFormat(field.dateDisplayFormat);
@@ -302,7 +308,7 @@ export class MinDateTimeFieldValidator implements FormFieldValidator {
     private supportedTypes = [
         FormFieldTypes.DATETIME
     ];
-    MIN_DATETIME_FORMAT = 'YYYY-MM-DD hh:mm A';
+    MIN_DATETIME_FORMAT = 'YYYY-MM-DD hh:mm AZ';
 
     isSupported(field: FormFieldModel): boolean {
         return field &&
@@ -348,7 +354,7 @@ export class MaxDateTimeFieldValidator implements FormFieldValidator {
     private supportedTypes = [
         FormFieldTypes.DATETIME
     ];
-    MAX_DATETIME_FORMAT = 'YYYY-MM-DD hh:mm A';
+    MAX_DATETIME_FORMAT = 'YYYY-MM-DD hh:mm AZ';
 
     isSupported(field: FormFieldModel): boolean {
         return field &&

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

@@ -18,7 +18,7 @@
 import { FormFieldTypes } from './form-field-types';
 import { FormFieldModel } from './form-field.model';
 import { FormModel } from './form.model';
-import { DateFnsUtils } from '../../../../common';
+import { DateFnsUtils } from '../../../../common/utils/date-fns-utils';
 
 describe('FormFieldModel', () => {
 

lib/core/src/lib/form/components/widgets/core/form-field.model.ts

@@ -28,8 +28,8 @@ import { ProcessFormModel } from './process-form-model.interface';
 import { isNumberValue } from './form-field-utils';
 import { VariableConfig } from './form-field-variable-options';
 import { DataColumn } from '../../../../datatable/data/data-column.model';
-import { isValid } from 'date-fns';
+import { isValid, parseISO } from 'date-fns';
-import { DateFnsUtils } from '../../../../common';
+import { DateFnsUtils } from '../../../../common/utils/date-fns-utils';
 
 // Maps to FormFieldRepresentation
 
@@ -354,7 +354,7 @@ export class FormFieldModel extends FormWidgetModel {
                 if (isNumberValue(value)) {
                     dateValue = new Date(value);
                 } else {
-                    dateValue = DateFnsUtils.parseDate(value, 'YYYY-MM-DD hh:mm A');
+                    dateValue = parseISO(value);
                 }
                 if (isValid(dateValue)) {
                     value = DateFnsUtils.formatDate(dateValue, this.dateDisplayFormat);
@@ -368,7 +368,7 @@ export class FormFieldModel extends FormWidgetModel {
                 if (isNumberValue(value)) {
                     dateValue = new Date(value);
                 } else {
-                    dateValue = DateFnsUtils.parseDate(value.split('T')[0], 'YYYY-M-D');
+                    dateValue = parseISO(value);
                 }
                 if (isValid(dateValue)) {
                     value = DateFnsUtils.formatDate(dateValue, this.dateDisplayFormat);

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts

@@ -24,7 +24,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FormFieldTypes } from '../core/form-field-types';
 import { By } from '@angular/platform-browser';
-import { DateFnsUtils } from '../../../../common';
+import { DateFnsUtils } from '../../../../common/utils/date-fns-utils';
 
 describe('DateTimeWidgetComponent', () => {
 
@@ -52,7 +52,7 @@ describe('DateTimeWidgetComponent', () => {
     });
 
     it('should setup min value for date picker', () => {
-        let minValue = '1982-03-13T10:00:000Z';
+        const minValue = '1982-03-13T10:00:000Z';
         widget.field = new FormFieldModel(null, {
             id: 'date-id',
             name: 'date-name',
@@ -82,7 +82,7 @@ describe('DateTimeWidgetComponent', () => {
     });
 
     it('should setup max value for date picker', () => {
-        let maxValue = '1982-03-13T10:00:000Z';
+        const maxValue = '1982-03-13T10:00:000Z';
         widget.field = new FormFieldModel(null, {
             maxValue
         });
@@ -107,7 +107,7 @@ describe('DateTimeWidgetComponent', () => {
         });
 
         widget.field = field;
-        const mockDate = DateFnsUtils.formatDate(new Date('1982-03-13 10:00 AM'), 'YYYY-MM-DDTHH:mm:ssZ');
+        const mockDate = DateFnsUtils.formatDate(new Date(DateFnsUtils.addSeconds('1982-03-13T10:00:000Z')), 'YYYY-MM-DDTHH:mm:ssZ');
         widget.onDateChanged(mockDate);
 
         expect(widget.onFieldChanged).toHaveBeenCalledWith(field);

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts

@@ -24,7 +24,7 @@ import { FormService } from '../../../services/form.service';
 import { WidgetComponent } from '../widget.component';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { DateFnsUtils } from '../../../../common';
+import { DateFnsUtils } from '../../../../common/utils/date-fns-utils';
 import { TranslationService } from '../../../../../lib/translation/translation.service';
 import { FormFieldModel } from '../core';
 import { isValid } from 'date-fns';
@@ -40,8 +40,8 @@ import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
     encapsulation: ViewEncapsulation.None
 })
 export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
-    minDate: string;
+    minDate: Date;
-    maxDate: string;
+    maxDate: Date;
 
     private onDestroy$ = new Subject<boolean>();
 

lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts

@@ -22,7 +22,8 @@ import { DateWidgetComponent } from './date.widget';
 import { CoreTestingModule } from '../../../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormFieldTypes } from '../core/form-field-types';
-import { format, isSameDay, parse } from 'date-fns';
+import { isSameDay } from 'date-fns';
+import { DateFnsUtils } from '../../../../common';
 
 describe('DateWidgetComponent', () => {
     let widget: DateWidgetComponent;
@@ -62,9 +63,8 @@ describe('DateWidgetComponent', () => {
 
         widget.ngOnInit();
 
-        const expectedMinDate = parse(minValue, widget.field.dateDisplayFormat, new Date());
+        const expectedMinDate = DateFnsUtils.parseDate(minValue, widget.field.dateDisplayFormat);
-        const widgetDate = parse(widget.minDate, widget.field.dateDisplayFormat, new Date());
+        expect(isSameDay(widget.minDate, expectedMinDate)).toBeTruthy();
-        expect(isSameDay(widgetDate, expectedMinDate)).toBeTruthy();
     });
 
     it('should date field be present', () => {
@@ -86,9 +86,8 @@ describe('DateWidgetComponent', () => {
         });
         widget.ngOnInit();
 
-        const expectedMaxDate = parse(maxValue, widget.field.dateDisplayFormat, new Date());
+        const expectedMaxDate = DateFnsUtils.parseDate(maxValue, widget.field.dateDisplayFormat);
-        const widgetDate = parse(widget.maxDate, widget.field.dateDisplayFormat, new Date());
+        expect(isSameDay(widget.maxDate, expectedMaxDate)).toBeTruthy();
-        expect(isSameDay(widgetDate, expectedMaxDate)).toBeTruthy();
     });
 
     it('should eval visibility on date changed', () => {
@@ -166,7 +165,7 @@ describe('DateWidgetComponent', () => {
                 readOnly: 'false'
             });
             widget.field.isVisible = true;
-            widget.field.dateDisplayFormat = 'MM-DD-YYYY';
+            widget.field.dateDisplayFormat = DateFnsUtils.convertMomentToDateFnsFormat('MM-DD-YYYY');
 
             fixture.detectChanges();
             await fixture.whenStable();
@@ -175,7 +174,7 @@ describe('DateWidgetComponent', () => {
             expect(dateElement?.value).toContain('12-30-9999');
 
             widget.field.value = '05.06.2019';
-            widget.field.dateDisplayFormat = 'DD.MM.YYYY';
+            widget.field.dateDisplayFormat = DateFnsUtils.convertMomentToDateFnsFormat('DD.MM.YYYY');
 
             fixture.componentInstance.ngOnInit();
             fixture.detectChanges();
@@ -234,7 +233,7 @@ describe('DateWidgetComponent', () => {
         });
 
         field.isVisible = true;
-        field.dateDisplayFormat = 'MM-DD-YYYY';
+        field.dateDisplayFormat = DateFnsUtils.convertMomentToDateFnsFormat('MM-DD-YYYY');
         widget.field = field;
 
         fixture.detectChanges();

lib/core/src/lib/pipes/date.pipe.spec.ts

@@ -28,91 +28,54 @@ describe('ADFDatePipe', () => {
         datePipe = TestBed.inject(ADFDatePipe);
     });
 
-    it('should return the formatted date string when given a valid date object', () => {
+    it('should transform a valid date string into a Date object', () => {
-        const inputDate = new Date('2023-08-14');
+        const testDates = [
+            { dateString: '2023-10-05', dateFormat: 'yyyy-MM-dd' },
+            { dateString: '2023-10-5', dateFormat: 'yyyy-M-d' },
+            { dateString: '05-10-2023', dateFormat: 'dd-MM-yyyy' },
+            { dateString: '5-10-2023', dateFormat: 'd-M-yyyy' },
+            { dateString: '10-5-2023', dateFormat: 'M-d-yyyy' },
+            { dateString: '10-05-2023', dateFormat: 'MM-d-yyyy' }
+        ];
+        testDates.forEach(({ dateString, dateFormat }) => {
+            const transformedDate = datePipe.transform(dateString, dateFormat);
 
-        let dateFormat = 'DD-MM-YYYY';
+            expect(transformedDate instanceof Date).toBe(true);
-        let expectedOutput = '14-08-2023';
+            expect(transformedDate.getFullYear()).toBe(2023);
-        let result = datePipe.transform(inputDate, dateFormat);
+            expect(transformedDate.getMonth()).toBe(9); // October is 9 (0-based)
-        expect(result).toBe(expectedOutput);
+            expect(transformedDate.getDate()).toBe(5);
-
+        });
-        dateFormat = 'MM-DD-YYYY';
-        expectedOutput = '08-14-2023';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-
-        dateFormat = 'YYYY-MM-DD';
-        expectedOutput = '2023-08-14';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-
-        dateFormat = 'YYYY-DD-MM';
-        expectedOutput = '2023-14-08';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-
-        dateFormat = 'MM-DD-YY';
-        expectedOutput = '08-14-23';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-
-        dateFormat = 'DD-MM-YY';
-        expectedOutput = '14-08-23';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
     });
 
-    it('should return the input value when given an invalid date object', () => {
+    it('should transform a valid date object into a Date object', () => {
-        const inputDate = new Date('invalid');
+        const testDates = [
-        const dateFormat = 'DD-MM-YYYY';
+            { dateString: new Date(), dateFormat: 'yyyy-MM-dd' },
-        const expectedOutput = 'Invalid Date';
+            { dateString: new Date(), dateFormat: 'yyyy-M-d' },
+            { dateString: new Date(), dateFormat: 'dd-MM-yyyy' },
+            { dateString: new Date(), dateFormat: 'd-M-yyyy' },
+            { dateString: new Date(), dateFormat: 'M-d-yyyy' },
+            { dateString: new Date(), dateFormat: 'MM-d-yyyy' }
+        ];
 
-        const result = datePipe.transform(inputDate, dateFormat);
+        testDates.forEach(({ dateString, dateFormat }) => {
+            const transformedDate = datePipe.transform(dateString, dateFormat);
+            const today = new Date();
 
-        expect(result).toBe(expectedOutput);
+            expect(transformedDate instanceof Date).toBe(true);
+            expect(transformedDate.getFullYear()).toBe(today.getFullYear());
+            expect(transformedDate.getMonth()).toBe(today.getMonth()); // October is 9 (0-based)
+            expect(transformedDate.getDate()).toBe(today.getDate());
+        });
     });
 
-    it('should return the formatted date string when given a valid date string', () => {
+    it('should handle undefined input by returning the current date', () => {
-        const inputDate = '2023-08-14';
+        const undefinedInput = undefined;
+        const dateFormat = 'dd-MM-yyyy';
 
-        let dateFormat = 'DD-MM-YY';
+        const transformedDate = datePipe.transform(undefinedInput, dateFormat);
-        let expectedOutput = '14-08-23';
+        const today = new Date();
-        let result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
 
-        dateFormat = 'MM-DD-YY';
+        expect(transformedDate instanceof Date).toBe(true);
-        expectedOutput = '08-14-23';
+        expect(transformedDate).toEqual(today);
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-
-        dateFormat = 'YYYY-DD-MM';
-        expectedOutput = '2023-14-08';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-
-        dateFormat = 'YYYY-MM-DD';
-        expectedOutput = '2023-08-14';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-
-        dateFormat = 'MM-DD-YYYY';
-        expectedOutput = '08-14-2023';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-
-        dateFormat = 'DD-MM-YYYY';
-        expectedOutput = '14-08-2023';
-        result = datePipe.transform(inputDate, dateFormat);
-        expect(result).toBe(expectedOutput);
-    });
-
-    it('should return the input value when given an invalid date string', () => {
-        const inputDate = 'not_a_valid_date';
-        const dateFormat = 'DD-MM-YYYY';
-        const expectedOutput = inputDate;
-
-        const result = datePipe.transform(inputDate, dateFormat);
-
-        expect(result).toBe(expectedOutput);
     });
 });

lib/core/src/lib/pipes/date.pipe.ts

@@ -16,13 +16,18 @@
  */
 
 import { Pipe, PipeTransform } from '@angular/core';
-import { isValid } from 'date-fns';
 import { DateFnsUtils } from '../common/utils/date-fns-utils';
+import { isDate } from 'date-fns';
 
 @Pipe({ name: 'adfDate' })
 export class ADFDatePipe implements PipeTransform {
-    transform(value: Date | string, dateFormat: string): string {
+    transform(value: Date | string, dateFormat: string): Date {
-        const date = value instanceof Date ? value : new Date(value);
+        if (value) {
-        return isValid(date) ? DateFnsUtils.formatDate(date, dateFormat) : value.toString();
+            const date = typeof value === 'string' ? DateFnsUtils.parseDate(value, dateFormat) : value;
+            if (isDate(date)) {
+                return date;
+            }
+        }
+        return new Date();
     }
 }

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts

@@ -22,7 +22,7 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
 import { TranslateModule } from '@ngx-translate/core';
 import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
 import { By } from '@angular/platform-browser';
-import { addDays, subDays } from 'date-fns';
+import { addDays, isSameDay, subDays } from 'date-fns';
 
 describe('DateWidgetComponent', () => {
 
@@ -52,8 +52,8 @@ describe('DateWidgetComponent', () => {
 
         widget.ngOnInit();
 
-        const expected = DateFnsUtils.formatDate(new Date(minValue), DATE_FORMAT_CLOUD);
+        const expected = DateFnsUtils.parseDate(minValue, DATE_FORMAT_CLOUD);
-        expect(widget.minDate).toEqual(expected);
+        expect(isSameDay(widget.minDate, expected)).toBeTruthy();
     });
 
     it('should date field be present', () => {
@@ -75,8 +75,8 @@ describe('DateWidgetComponent', () => {
         });
         widget.ngOnInit();
 
-        const expected = DateFnsUtils.formatDate(new Date(maxValue), DATE_FORMAT_CLOUD);
+        const expected = DateFnsUtils.parseDate(maxValue, DATE_FORMAT_CLOUD);
-        expect(widget.maxDate).toEqual(expected);
+        expect(isSameDay(widget.maxDate, expected)).toBeTruthy();
     });
 
     it('should eval visibility on date changed', () => {
@@ -119,7 +119,7 @@ describe('DateWidgetComponent', () => {
             expect(element.querySelector('#date-field-id')).toBeDefined();
             expect(element.querySelector('#date-field-id')).not.toBeNull();
             const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
-            expect(dateElement.value).toContain('9-9-9999');
+            expect(dateElement.value).toContain('9999-9-9');
         });
 
         it('should show the correct format type', async () => {
@@ -131,7 +131,7 @@ describe('DateWidgetComponent', () => {
                 readOnly: 'false'
             });
             widget.field.isVisible = true;
-            widget.field.dateDisplayFormat = 'YYYY-DD-MM';
+            widget.field.dateDisplayFormat = DateFnsUtils.convertMomentToDateFnsFormat('YYYY-DD-MM');
             widget.ngOnInit();
             fixture.detectChanges();
             await fixture.whenStable();
@@ -192,7 +192,7 @@ describe('DateWidgetComponent', () => {
             readOnly: 'false'
         });
         field.isVisible = true;
-        field.dateDisplayFormat = 'MM-DD-YYYY';
+        field.dateDisplayFormat = DateFnsUtils.convertMomentToDateFnsFormat('MM-DD-YYYY');
         widget.field = field;
         widget.ngOnInit();
         fixture.detectChanges();
@@ -295,7 +295,8 @@ describe('DateWidgetComponent', () => {
 
             const todayDate = new Date();
             const expected = DateFnsUtils.formatDate(subDays(todayDate, widget.field.minDateRangeValue), DATE_FORMAT_CLOUD);
-            expect(widget.minDate).toEqual(expected);
+            const minDateFormatted = DateFnsUtils.formatDate(widget.minDate, DATE_FORMAT_CLOUD);
+            expect(minDateFormatted).toEqual(expected);
         });
 
         it('should min date and max date be undefined if dynamic min and max date are not set', async () => {
@@ -345,7 +346,8 @@ describe('DateWidgetComponent', () => {
 
             const todayDate = new Date();
             const expected = DateFnsUtils.formatDate(addDays(todayDate, widget.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
-            expect(widget.maxDate).toEqual(expected);
+            const maxDateFormatted = DateFnsUtils.formatDate(widget.maxDate, DATE_FORMAT_CLOUD);
+            expect(maxDateFormatted).toEqual(expected);
         });
 
         it('should maxDate and minDate be undefined if minDateRangeValue and maxDateRangeValue are null', async () => {

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts

@@ -52,8 +52,8 @@ import { addDays, isValid, subDays } from 'date-fns';
 export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
     typeId = 'DateCloudWidgetComponent';
 
-    minDate: string;
+    minDate: Date;
-    maxDate: string;
+    maxDate: Date;
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -77,20 +77,20 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
             if (this.field.dynamicDateRangeSelection) {
                 const today = new Date();
                 if (Number.isInteger(this.field.minDateRangeValue)) {
-                    this.minDate = DateFnsUtils.formatDate(subDays(today, this.field.minDateRangeValue), DATE_FORMAT_CLOUD);
+                    this.minDate = subDays(today, this.field.minDateRangeValue);
-                    this.field.minValue = this.minDate;
+                    this.field.minValue = DateFnsUtils.formatDate(this.minDate, DATE_FORMAT_CLOUD);
                 }
                 if (Number.isInteger(this.field.maxDateRangeValue)) {
-                    this.maxDate = DateFnsUtils.formatDate(addDays(today, this.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
+                    this.maxDate = addDays(today, this.field.maxDateRangeValue);
-                    this.field.maxValue = this.maxDate;
+                    this.field.maxValue = DateFnsUtils.formatDate(this.maxDate, DATE_FORMAT_CLOUD);
                 }
             } else {
                 if (this.field.minValue) {
-                    this.minDate = DateFnsUtils.formatDate(new Date(this.field.minValue), DATE_FORMAT_CLOUD);
+                    this.minDate = DateFnsUtils.parseDate(this.field.minValue, DATE_FORMAT_CLOUD);
                 }
 
                 if (this.field.maxValue) {
-                    this.maxDate = DateFnsUtils.formatDate(new Date(this.field.maxValue), DATE_FORMAT_CLOUD);
+                    this.maxDate = DateFnsUtils.parseDate(this.field.maxValue, DATE_FORMAT_CLOUD);
                 }
             }
         }