[ACS-5857] made dateFormat configurable for DateCloudWidget

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

@@ -22,11 +22,11 @@
         </mat-form-field>
         <error-widget [error]="field.validationSummary"></error-widget>
         <error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
-        <mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfDate: DATE_FORMAT" [disabled]="field.readOnly"></mat-datepicker>
+        <mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfDate: field.dateDisplayFormat" [disabled]="field.readOnly"></mat-datepicker>
         <input
             type="hidden"
             [matDatepicker]="datePicker"
-            [value]="field.value | adfDate: DATE_FORMAT"
+            [value]="field.value | adfDate: field.dateDisplayFormat"
             [min]="minDate"
             [max]="maxDate"
             [disabled]="field.readOnly"

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

@@ -22,6 +22,7 @@ import { ProcessServiceCloudTestingModule } from '../../../../testing/process-se
 import { TranslateModule } from '@ngx-translate/core';
 import { By } from '@angular/platform-browser';
 import { addDays, format, subDays } from 'date-fns';
+import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
 
 describe('DateWidgetComponent', () => {
 
@@ -51,7 +52,7 @@ describe('DateWidgetComponent', () => {
 
         widget.ngOnInit();
 
-        const expected = format(new Date(minValue), widget.DATE_FORMAT);
+        const expected = format(new Date(minValue), DATE_FORMAT_CLOUD);
         expect(widget.minDate).toEqual(expected);
     });
 
@@ -74,7 +75,7 @@ describe('DateWidgetComponent', () => {
         });
         widget.ngOnInit();
 
-        const expected = format(new Date(maxValue), widget.DATE_FORMAT);
+        const expected = format(new Date(maxValue), DATE_FORMAT_CLOUD);
         expect(widget.maxDate).toEqual(expected);
     });
 
@@ -91,7 +92,7 @@ describe('DateWidgetComponent', () => {
 
         widget.field = field;
         const todayDate = new Date();
-        widget.onDateChanged({ value: format(todayDate, widget.DATE_FORMAT) });
+        widget.onDateChanged({ value: format(todayDate, DATE_FORMAT_CLOUD) });
 
         expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
     });
@@ -293,7 +294,7 @@ describe('DateWidgetComponent', () => {
             await fixture.whenStable();
 
             const todayDate = new Date();
-            const expected = format(subDays(todayDate, widget.field.minDateRangeValue), widget.DATE_FORMAT);
+            const expected = format(subDays(todayDate, widget.field.minDateRangeValue), DATE_FORMAT_CLOUD);
             expect(widget.minDate).toEqual(expected);
         });
 
@@ -343,7 +344,7 @@ describe('DateWidgetComponent', () => {
             await fixture.whenStable();
 
             const todayDate = new Date();
-            const expected = format(addDays(todayDate, widget.field.maxDateRangeValue), widget.DATE_FORMAT);
+            const expected = format(addDays(todayDate, widget.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
             expect(widget.maxDate).toEqual(expected);
         });
 
@@ -403,7 +404,7 @@ describe('DateWidgetComponent', () => {
                 fixture.detectChanges();
                 await fixture.whenStable();
 
-                const expectedMinValueString = format(new Date('2022-07-21'), widget.DATE_FORMAT);
+                const expectedMinValueString = format(new Date('2022-07-21'), DATE_FORMAT_CLOUD);
 
                 expect(widget.field.minValue).toEqual(expectedMinValueString);
                 expect(widget.maxDate).toBeUndefined();
@@ -423,7 +424,7 @@ describe('DateWidgetComponent', () => {
                 fixture.detectChanges();
                 await fixture.whenStable();
 
-                const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT);
+                const expectedMaxValueString = format(new Date('2022-07-30'), DATE_FORMAT_CLOUD);
 
                 expect(widget.field.maxValue).toEqual(expectedMaxValueString);
                 expect(widget.minDate).toBeUndefined();
@@ -462,8 +463,8 @@ describe('DateWidgetComponent', () => {
                 fixture.detectChanges();
                 await fixture.whenStable();
 
-                const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT);
+                const expectedMaxValueString = format(new Date('2022-07-30'), DATE_FORMAT_CLOUD);
-                const expectedMinValueString = format(new Date('2022-07-12'), widget.DATE_FORMAT);
+                const expectedMinValueString = format(new Date('2022-07-12'), DATE_FORMAT_CLOUD);
 
                 expect(widget.field.maxValue).toEqual(expectedMaxValueString);
                 expect(widget.field.minValue).toEqual(expectedMinValueString);

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

@@ -17,13 +17,14 @@
 
 /* eslint-disable @angular-eslint/component-selector */
 
-import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, OnDestroy, Inject } from '@angular/core';
-import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { WidgetComponent, UserPreferencesService, UserPreferenceValues, FormService, DateFnsUtils } from '@alfresco/adf-core';
 import { addDays, format, isValid, subDays } from 'date-fns';
 import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
+import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model';
 
 @Component({
     selector: 'date-widget',
@@ -57,7 +58,8 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
 
     constructor(public formService: FormService,
                 private dateAdapter: DateAdapter<DateFnsAdapter>,
-                private userPreferencesService: UserPreferencesService) {
+                private userPreferencesService: UserPreferencesService,
+                @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
         super(formService);
     }
 
@@ -67,25 +69,27 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)));
 
+            this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat;
+
         if (this.field) {
             if (this.field.dynamicDateRangeSelection) {
                 const today = this.getTodaysFormattedDate();
                 if (Number.isInteger(this.field.minDateRangeValue)) {
-                    this.minDate = format(subDays(today, this.field.minDateRangeValue), this.DATE_FORMAT);
+                    this.minDate = format(subDays(today, this.field.minDateRangeValue), DATE_FORMAT_CLOUD);
                     this.field.minValue = this.minDate;
                 }
 
                 if (Number.isInteger(this.field.maxDateRangeValue)) {
-                    this.maxDate = format(addDays(today, this.field.maxDateRangeValue), this.DATE_FORMAT);
+                    this.maxDate = format(addDays(today, this.field.maxDateRangeValue), DATE_FORMAT_CLOUD);
                     this.field.maxValue = this.maxDate;
                 }
             } else {
                 if (this.field.minValue) {
-                    this.minDate = format(new Date(this.field.minValue), this.DATE_FORMAT);
+                    this.minDate = format(new Date(this.field.minValue), DATE_FORMAT_CLOUD);
                 }
 
                 if (this.field.maxValue) {
-                    this.maxDate = format(new Date(this.field.maxValue), this.DATE_FORMAT);
+                    this.maxDate = format(new Date(this.field.maxValue), DATE_FORMAT_CLOUD);
                 }
             }
         }
@@ -103,7 +107,7 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
     onDateChanged(newDateValue) {
         const date = new Date(newDateValue);
         if (isValid(date)) {
-            this.field.value = format(date, this.DATE_FORMAT);
+            this.field.value = format(date, this.field.dateDisplayFormat);
         } else {
             this.field.value = newDateValue;
         }

lib/process-services-cloud/src/lib/models/date-format-cloud.model.ts

@@ -15,4 +15,4 @@
  * limitations under the License.
  */
 
-export const DATE_FORMAT_CLOUD = 'YYYY-MM-DD';
+export const DATE_FORMAT_CLOUD = 'yyyy-MM-dd';