diff --git a/lib/core/src/lib/form/components/form-renderer.component.spec.ts b/lib/core/src/lib/form/components/form-renderer.component.spec.ts index f026c60db2..ff9dd6e71d 100644 --- a/lib/core/src/lib/form/components/form-renderer.component.spec.ts +++ b/lib/core/src/lib/form/components/form-renderer.component.spec.ts @@ -48,6 +48,7 @@ import { TextWidgetComponent } from './widgets'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { FormRulesManager } from '../models/form-rules.model'; +import { format } from 'date-fns'; const typeIntoInput = (targetInput: HTMLInputElement, message: string) => { expect(targetInput).toBeTruthy('Expected input to set to be valid and not null'); @@ -112,7 +113,7 @@ describe('Form Renderer Component', () => { fixture.destroy(); }); - describe('Display Date Widget ', () => { + describe('Display Date Widget ', async() => { it('Should be able to see a widget when the visibility condition refers to another fields with specific date', async () => { formRendererComponent.formDefinition = formService.parseForm(formDateVisibility.formRepresentation.formDefinition); fixture.detectChanges(); @@ -122,11 +123,13 @@ describe('Form Renderer Component', () => { let displayTextElementContainer: HTMLInputElement = fixture.nativeElement.querySelector('#field-Text0pqd1u-container'); expectElementToBeHidden(displayTextElementContainer); - typeIntoDate(inputDateTestOne, { srcElement: { value: '2019-11-19' } }); + let formattedDate = format(new Date('2019-11-19'), 'd-M-yyyy'); + typeIntoDate(inputDateTestOne, { srcElement: { value: formattedDate } }); + fixture.detectChanges(); await fixture.whenStable(); - displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0pqd1u-container'); + displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0uyqd3-container'); expectElementToBeVisible(displayTextElementContainer); }); @@ -139,11 +142,13 @@ describe('Form Renderer Component', () => { let displayTextElementContainer: HTMLDivElement = fixture.nativeElement.querySelector('#field-Text0uyqd3-container'); expectElementToBeVisible(displayTextElementContainer); - typeIntoDate(inputDateTestOne, { srcElement: { value: '2019-11-19' } }); + let formattedDate = format(new Date('2019-11-19'), 'd-M-yyyy'); + typeIntoDate(inputDateTestOne, { srcElement: { value: formattedDate } }); + fixture.detectChanges(); await fixture.whenStable(); - displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0uyqd3-container'); + displayTextElementContainer = fixture.nativeElement.querySelector('#field-Text0pqd1u-container'); expectElementToBeHidden(displayTextElementContainer); }); diff --git a/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts b/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts index 82a652af16..74c2ef5431 100644 --- a/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts +++ b/lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts @@ -1505,7 +1505,7 @@ export const formDateVisibility = { existingColspan: 1, maxColspan: 2 }, - dateDisplayFormat: 'YYYY-MM-DD' + dateDisplayFormat: 'd-M-yyyy' } ], 2: [ @@ -1525,7 +1525,7 @@ export const formDateVisibility = { leftType: 'field', leftValue: 'Date0hwq20', operator: '==', - rightValue: '2019-11-19', + rightValue: '19-11-2019', rightType: 'value', nextConditionOperator: '', nextCondition: null @@ -1562,7 +1562,7 @@ export const formDateVisibility = { leftType: 'field', leftValue: 'Date0hwq20', operator: '!=', - rightValue: '2019-11-19', + rightValue: '19-11-2019', rightType: 'value', nextConditionOperator: '', nextCondition: null diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html index f2081c71ad..1749a2440e 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html @@ -25,7 +25,7 @@ { @@ -52,7 +52,7 @@ describe('DateTimeWidgetComponent', () => { }); it('should setup min value for date picker', () => { - const minValue = '1982-03-13T10:00:000Z'; + const minValue = '7-8-2023 02:45 PM'; widget.field = new FormFieldModel(null, { id: 'date-id', name: 'date-name', @@ -62,8 +62,8 @@ describe('DateTimeWidgetComponent', () => { fixture.detectChanges(); - const expected = moment(minValue, 'YYYY-MM-DDTHH:mm:ssZ'); - expect(widget.minDate.isSame(expected)).toBeTruthy(); + const expected = parse(minValue, widget.DATE_TIME_FORMAT, new Date()); + expect(isSameDay(widget.minDate, expected)).toBeTruthy(); }); it('should date field be present', () => { @@ -79,14 +79,14 @@ describe('DateTimeWidgetComponent', () => { }); it('should setup max value for date picker', () => { - const maxValue = '1982-03-13T10:00:000Z'; + const maxValue = '20-9-2023 02:45 PM'; widget.field = new FormFieldModel(null, { maxValue }); fixture.detectChanges(); - const expected = moment(maxValue, 'YYYY-MM-DDTHH:mm:ssZ'); - expect(widget.maxDate.isSame(expected)).toBeTruthy(); + const expected = parse(maxValue, widget.DATE_TIME_FORMAT, new Date()); + expect(isSameDay(widget.maxDate, expected)).toBeTruthy(); }); it('should eval visibility on date changed', () => { @@ -101,7 +101,7 @@ describe('DateTimeWidgetComponent', () => { }); widget.field = field; - const mockDate = moment('1982-03-13T10:00:000Z', 'YYYY-MM-DDTHH:mm:ssZ'); + const mockDate = parse('1982-03-13T10:00:000Z', widget.DATE_TIME_FORMAT, new Date()); widget.onDateChanged(mockDate); expect(widget.onFieldChanged).toHaveBeenCalledWith(field); diff --git a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts index cd8a60f8b7..96b48fb215 100644 --- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts +++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts @@ -21,7 +21,6 @@ import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core'; import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; import { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core'; import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment'; -import moment, { Moment } from 'moment'; import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service'; import { MomentDateAdapter } from '../../../../common/utils/moment-date-adapter'; import { MOMENT_DATE_FORMATS } from '../../../../common/utils/moment-date-formats.model'; @@ -29,6 +28,8 @@ import { FormService } from '../../../services/form.service'; import { WidgetComponent } from '../widget.component'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { DateFnsAdapter } from '@angular/material-date-fns-adapter'; +import { format, isValid, parse } from 'date-fns'; @Component({ providers: [ @@ -44,13 +45,15 @@ import { takeUntil } from 'rxjs/operators'; }) export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy { - minDate: Moment; - maxDate: Moment; + DATE_TIME_FORMAT = 'd-M-yyyy hh:mm a'; + + minDate: Date; + maxDate: Date; private onDestroy$ = new Subject(); constructor(public formService: FormService, - private dateAdapter: DateAdapter, + private dateAdapter: DateAdapter, private userPreferencesService: UserPreferencesService) { super(formService); } @@ -61,16 +64,13 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, .pipe(takeUntil(this.onDestroy$)) .subscribe(locale => this.dateAdapter.setLocale(locale)); - const momentDateAdapter = this.dateAdapter as MomentDateAdapter; - momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat; - if (this.field) { if (this.field.minValue) { - this.minDate = moment.utc(this.field.minValue, 'YYYY-MM-DDTHH:mm:ssZ'); + this.minDate = parse(this.field.minValue, this.DATE_TIME_FORMAT, new Date()); } if (this.field.maxValue) { - this.maxDate = moment.utc(this.field.maxValue, 'YYYY-MM-DDTHH:mm:ssZ'); + this.maxDate = parse(this.field.maxValue, this.DATE_TIME_FORMAT, new Date()); } } } @@ -81,9 +81,9 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, } onDateChanged(newDateValue) { - const date = moment(newDateValue, this.field.dateDisplayFormat, true); - if (date.isValid()) { - this.field.value = moment(date).utc().local().format(this.field.dateDisplayFormat); + const date = new Date(newDateValue); + if (isValid(date)) { + this.field.value = format(date, this.DATE_TIME_FORMAT); } else { this.field.value = newDateValue; } diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.html b/lib/core/src/lib/form/components/widgets/date/date.widget.html index 266e80e635..d9c2abdafc 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.html +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.html @@ -14,11 +14,11 @@ - + { @@ -63,8 +63,9 @@ describe('DateWidgetComponent', () => { widget.ngOnInit(); - const expected = moment(minValue, widget.field.dateDisplayFormat); - expect(widget.minDate.isSame(expected)).toBeTruthy(); + const expected = parse(minValue, widget.DATE_FORMAT, new Date()); + const widgetDate = parse(widget.minDate, widget.DATE_FORMAT, new Date()); + expect(isSameDay(widgetDate, expected)).toBeTruthy(); }); it('should date field be present', () => { @@ -86,8 +87,9 @@ describe('DateWidgetComponent', () => { }); widget.ngOnInit(); - const expected = moment(maxValue, widget.field.dateDisplayFormat); - expect(widget.maxDate.isSame(expected)).toBeTruthy(); + const expected = parse(maxValue, widget.DATE_FORMAT, new Date()); + const widgetDate = parse(widget.maxDate, widget.DATE_FORMAT, new Date()); + expect(isSameDay(widgetDate, expected)).toBeTruthy(); }); it('should eval visibility on date changed', () => { @@ -101,7 +103,7 @@ describe('DateWidgetComponent', () => { readOnly: 'false' }); widget.field = field; - widget.onDateChanged({ value: moment('12/12/2012', widget.field.dateDisplayFormat) }); + widget.onDateChanged({ value: parse('12/12/2012', widget.DATE_FORMAT, new Date()) }); expect(widget.onFieldChanged).toHaveBeenCalledWith(field); }); diff --git a/lib/core/src/lib/form/components/widgets/date/date.widget.ts b/lib/core/src/lib/form/components/widgets/date/date.widget.ts index afe9bf2109..1030113d94 100644 --- a/lib/core/src/lib/form/components/widgets/date/date.widget.ts +++ b/lib/core/src/lib/form/components/widgets/date/date.widget.ts @@ -18,21 +18,21 @@ /* eslint-disable @angular-eslint/component-selector */ import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service'; -import { MomentDateAdapter } from '../../../../common/utils/moment-date-adapter'; -import { MOMENT_DATE_FORMATS } from '../../../../common/utils/moment-date-formats.model'; import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core'; import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; -import moment, { Moment } from 'moment'; import { FormService } from '../../../services/form.service'; import { WidgetComponent } from '../widget.component'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { format, isValid } from 'date-fns'; +import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter'; +import { DateFnsUtils } from '../../../../../..'; @Component({ selector: 'date-widget', providers: [ - { provide: DateAdapter, useClass: MomentDateAdapter }, - { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }], + { provide: DateAdapter, useClass: DateFnsAdapter }, + { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS }], templateUrl: './date.widget.html', styleUrls: ['./date.widget.scss'], host: { @@ -50,15 +50,15 @@ import { takeUntil } from 'rxjs/operators'; }) export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDestroy { - DATE_FORMAT = 'DD-MM-YYYY'; + DATE_FORMAT = 'd-M-yyyy'; - minDate: Moment; - maxDate: Moment; + minDate: string; + maxDate: string; private onDestroy$ = new Subject(); constructor(public formService: FormService, - private dateAdapter: DateAdapter, + private dateAdapter: DateAdapter, private userPreferencesService: UserPreferencesService) { super(formService); } @@ -67,19 +67,11 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe this.userPreferencesService .select(UserPreferenceValues.Locale) .pipe(takeUntil(this.onDestroy$)) - .subscribe(locale => this.dateAdapter.setLocale(locale)); - - const momentDateAdapter = this.dateAdapter as MomentDateAdapter; - momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat; + .subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale))); if (this.field) { - if (this.field.minValue) { - this.minDate = moment(this.field.minValue, this.DATE_FORMAT); - } - - if (this.field.maxValue) { - this.maxDate = moment(this.field.maxValue, this.DATE_FORMAT); - } + this.minDate = isValid(this.field.minValue) ? format(new Date(this.field.minValue), this.DATE_FORMAT) : this.field.minValue; + this.maxDate = isValid(this.field.maxValue) ? format(new Date(this.field.maxValue), this.DATE_FORMAT) : this.field.maxValue; } } @@ -89,9 +81,9 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe } onDateChanged(newDateValue) { - const date = moment(newDateValue, this.field.dateDisplayFormat, true); - if (date.isValid()) { - this.field.value = date.format(this.field.dateDisplayFormat); + const date = new Date(newDateValue); + if (isValid(date)) { + this.field.value = format(date, this.DATE_FORMAT); } else { this.field.value = newDateValue; } diff --git a/lib/core/src/lib/pipes/adf-date.pipe.spec.ts b/lib/core/src/lib/pipes/adf-date.pipe.spec.ts new file mode 100644 index 0000000000..62126011c4 --- /dev/null +++ b/lib/core/src/lib/pipes/adf-date.pipe.spec.ts @@ -0,0 +1,75 @@ +/*! + * @license + * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { TestBed } from '@angular/core/testing'; +import { CoreTestingModule } from '../testing/core.testing.module'; +import { TranslateModule } from '@ngx-translate/core'; +import { ADFDatePipe } from './adf-date.pipe'; + +describe('DatePipe', () => { + let datePipe: ADFDatePipe; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [TranslateModule.forRoot(), CoreTestingModule], + providers: [ADFDatePipe], + }); + + datePipe = new ADFDatePipe(); + }); + + it('should return the formatted date string when given a valid date object', () => { + const inputDate = new Date('2023-08-14'); + const dateFormat = 'dd-MM-yyyy'; + const expectedOutput = '14-08-2023'; + + const result = datePipe.transform(inputDate, dateFormat); + + expect(result).toBe(expectedOutput); + }); + + it('should return the input value when given an invalid date object', () => { + const inputDate = new Date('invalid'); + const dateFormat = 'dd-MM-yyyy'; + const expectedOutput = inputDate.toString(); + + const result = datePipe.transform(inputDate, dateFormat); + + expect(result).toBe(expectedOutput); + }); + + it('should return the formatted date string when given a valid date string', () => { + const inputDate = '2023-08-14'; + const dateFormat = 'dd-MM-yyyy'; + const expectedOutput = '14-08-2023'; + + const 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); + }); + +}); diff --git a/lib/core/src/lib/pipes/adf-date.pipe.ts b/lib/core/src/lib/pipes/adf-date.pipe.ts new file mode 100644 index 0000000000..3d04d0daeb --- /dev/null +++ b/lib/core/src/lib/pipes/adf-date.pipe.ts @@ -0,0 +1,27 @@ +/*! + * @license + * Copyright © 2005-2023 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Pipe, PipeTransform } from '@angular/core'; +import { format, isValid} from 'date-fns'; + +@Pipe({ name: 'adfDate' }) +export class ADFDatePipe implements PipeTransform { + transform(value: Date | string, dateFormat: string): string { + const date = value instanceof Date ? value : new Date(value); + return isValid(date) ? format(date, dateFormat) : value.toString(); + } +} diff --git a/lib/core/src/lib/pipes/pipe.module.ts b/lib/core/src/lib/pipes/pipe.module.ts index 29bbf9a156..052b28316c 100644 --- a/lib/core/src/lib/pipes/pipe.module.ts +++ b/lib/core/src/lib/pipes/pipe.module.ts @@ -36,6 +36,7 @@ import { MomentDateTimePipe } from './moment-datetime.pipe'; import { FilterStringPipe } from './filter-string.pipe'; import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-prop.pipe'; import { DateTimePipe } from './date-time.pipe'; +import { ADFDatePipe } from './adf-date.pipe'; @NgModule({ imports: [ @@ -56,6 +57,7 @@ import { DateTimePipe } from './date-time.pipe'; DecimalNumberPipe, LocalizedRolePipe, MomentDatePipe, + ADFDatePipe, MomentDateTimePipe, DateTimePipe, FilterStringPipe, @@ -74,6 +76,7 @@ import { DateTimePipe } from './date-time.pipe'; DecimalNumberPipe, LocalizedRolePipe, MomentDatePipe, + ADFDatePipe, MomentDateTimePipe, DateTimePipe, FilterStringPipe, @@ -93,6 +96,7 @@ import { DateTimePipe } from './date-time.pipe'; DecimalNumberPipe, LocalizedRolePipe, MomentDatePipe, + ADFDatePipe, MomentDateTimePipe, DateTimePipe, FilterStringPipe, diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html index f65fb13fa0..4c305c5858 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html @@ -22,11 +22,11 @@ - + { @@ -43,7 +42,7 @@ describe('DateWidgetComponent', () => { }); it('should setup min value for date picker', () => { - const minValue = '1982-03-13'; + const minValue = '3-3-1982'; widget.field = new FormFieldModel(null, { id: 'date-id', name: 'date-name', @@ -52,8 +51,8 @@ describe('DateWidgetComponent', () => { widget.ngOnInit(); - const expected = moment(minValue, DATE_FORMAT_CLOUD); - expect(widget.minDate.isSame(expected)).toBeTruthy(); + const expected = format(new Date(minValue), widget.DATE_FORMAT); + expect(isSameDay(new Date(widget.minDate), new Date(expected))).toBeTruthy(); }); it('should date field be present', () => { @@ -69,14 +68,14 @@ describe('DateWidgetComponent', () => { }); it('should setup max value for date picker', () => { - const maxValue = '1982-03-13'; + const maxValue = '3-3-1982'; widget.field = new FormFieldModel(null, { maxValue }); widget.ngOnInit(); - const expected = moment(maxValue, DATE_FORMAT_CLOUD); - expect(widget.maxDate.isSame(expected)).toBeTruthy(); + const expected = format(new Date(maxValue), widget.DATE_FORMAT); + expect(isSameDay(new Date(widget.maxDate), new Date(expected))).toBeTruthy(); }); it('should eval visibility on date changed', () => { @@ -91,8 +90,8 @@ describe('DateWidgetComponent', () => { }); widget.field = field; - const todayDate = moment().format(DATE_FORMAT_CLOUD); - widget.onDateChanged({ value: todayDate }); + const todayDate = new Date(); + widget.onDateChanged({ value: format(todayDate, widget.DATE_FORMAT) }); expect(widget.onFieldChanged).toHaveBeenCalledWith(field); }); @@ -293,9 +292,9 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const todayDate = moment().format(DATE_FORMAT_CLOUD); - const expected = moment(todayDate).subtract(widget.field.minDateRangeValue, 'days'); - expect(widget.minDate).toEqual(expected); + const todayDate = new Date(); + const expected = subDays(todayDate, widget.field.minDateRangeValue); + expect(widget.minDate).toEqual(format(expected, widget.DATE_FORMAT)); }); it('should min date and max date be undefined if dynamic min and max date are not set', async () => { @@ -343,9 +342,9 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const todayDate = moment().format(DATE_FORMAT_CLOUD); - const expected = moment(todayDate).add(widget.field.maxDateRangeValue, 'days'); - expect(widget.maxDate).toEqual(expected); + const todayDate = new Date(); + const expected = addDays(todayDate, widget.field.maxDateRangeValue); + expect(widget.maxDate).toEqual(format(expected, widget.DATE_FORMAT)); }); it('should maxDate and minDate be undefined if minDateRangeValue and maxDateRangeValue are null', async () => { @@ -392,7 +391,7 @@ describe('DateWidgetComponent', () => { describe('check date validation by dynamic date ranges', () => { it('should minValue be equal to today date minus minDateRangeValue', async () => { - spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22'); + spyOn(widget, 'getTodaysFormattedDate').and.returnValue(new Date('2022-07-22')); widget.field = new FormFieldModel(null, { dynamicDateRangeSelection: true, maxDateRangeValue: null, @@ -404,7 +403,7 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const expectedMinValueString = '2022-07-21'; + const expectedMinValueString = format(new Date('2022-07-21'), widget.DATE_FORMAT); expect(widget.field.minValue).toEqual(expectedMinValueString); expect(widget.maxDate).toBeUndefined(); @@ -412,7 +411,7 @@ describe('DateWidgetComponent', () => { }); it('should maxValue be equal to today date plus maxDateRangeValue', async () => { - spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22'); + spyOn(widget, 'getTodaysFormattedDate').and.returnValue(new Date('2022-07-22')); widget.field = new FormFieldModel(null, { dynamicDateRangeSelection: true, maxDateRangeValue: 8, @@ -424,7 +423,7 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const expectedMaxValueString = '2022-07-30'; + const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT); expect(widget.field.maxValue).toEqual(expectedMaxValueString); expect(widget.minDate).toBeUndefined(); @@ -432,7 +431,7 @@ describe('DateWidgetComponent', () => { }); it('should maxValue and minValue be null if maxDateRangeValue and minDateRangeValue are null', async () => { - spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22'); + spyOn(widget, 'getTodaysFormattedDate').and.returnValue(new Date('22-07-2022')); widget.field = new FormFieldModel(null, { dynamicDateRangeSelection: true, maxDateRangeValue: null, @@ -451,7 +450,7 @@ describe('DateWidgetComponent', () => { }); it('should maxValue and minValue not be null if maxDateRangeVale and minDateRangeValue are not null', async () => { - spyOn(widget, 'getTodaysFormattedDate').and.returnValue('2022-07-22'); + spyOn(widget, 'getTodaysFormattedDate').and.returnValue(new Date('2022-07-22')); widget.field = new FormFieldModel(null, { dynamicDateRangeSelection: true, maxDateRangeValue: 8, @@ -463,8 +462,8 @@ describe('DateWidgetComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const expectedMaxValueString = '2022-07-30'; - const expectedMinValueString = '2022-07-12'; + const expectedMaxValueString = format(new Date('2022-07-30'), widget.DATE_FORMAT); + const expectedMinValueString = format(new Date('2022-07-12'), widget.DATE_FORMAT); expect(widget.field.maxValue).toEqual(expectedMaxValueString); expect(widget.field.minValue).toEqual(expectedMinValueString); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts index 8d62144249..ebb9def188 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts @@ -19,20 +19,17 @@ import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core'; import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; -import moment, { Moment } from 'moment'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { - MOMENT_DATE_FORMATS, MomentDateAdapter, WidgetComponent, - UserPreferencesService, UserPreferenceValues, FormService -} from '@alfresco/adf-core'; -import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model'; +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'; @Component({ selector: 'date-widget', providers: [ - { provide: DateAdapter, useClass: MomentDateAdapter }, - { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }], + { provide: DateAdapter, useClass: DateFnsAdapter }, + { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS }], templateUrl: './date-cloud.widget.html', styleUrls: ['./date-cloud.widget.scss'], host: { @@ -51,13 +48,15 @@ import { DATE_FORMAT_CLOUD } from '../../../../models/date-format-cloud.model'; export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, OnDestroy { typeId = 'DateCloudWidgetComponent'; - minDate: Moment; - maxDate: Moment; + minDate: string; + maxDate: string; + + DATE_FORMAT = 'd-M-yyyy'; private onDestroy$ = new Subject(); constructor(public formService: FormService, - private dateAdapter: DateAdapter, + private dateAdapter: DateAdapter, private userPreferencesService: UserPreferencesService) { super(formService); } @@ -66,36 +65,34 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, this.userPreferencesService .select(UserPreferenceValues.Locale) .pipe(takeUntil(this.onDestroy$)) - .subscribe(locale => this.dateAdapter.setLocale(locale)); - - const momentDateAdapter = this.dateAdapter as MomentDateAdapter; - momentDateAdapter.overrideDisplayFormat = this.field.dateDisplayFormat; + .subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale))); if (this.field) { if (this.field.dynamicDateRangeSelection) { const today = this.getTodaysFormattedDate(); if (Number.isInteger(this.field.minDateRangeValue)) { - this.minDate = moment(today).subtract(this.field.minDateRangeValue, 'days'); - this.field.minValue = this.minDate.format(DATE_FORMAT_CLOUD); + this.minDate = format(subDays(today, this.field.minDateRangeValue), this.DATE_FORMAT); + this.field.minValue = this.minDate; } + if (Number.isInteger(this.field.maxDateRangeValue)) { - this.maxDate = moment(today).add(this.field.maxDateRangeValue, 'days'); - this.field.maxValue = this.maxDate.format(DATE_FORMAT_CLOUD); + this.maxDate = format(addDays(today, this.field.maxDateRangeValue), this.DATE_FORMAT); + this.field.maxValue = this.maxDate; } } else { if (this.field.minValue) { - this.minDate = moment(this.field.minValue, DATE_FORMAT_CLOUD); + this.minDate = format(new Date(this.field.minValue), this.DATE_FORMAT); } if (this.field.maxValue) { - this.maxDate = moment(this.field.maxValue, DATE_FORMAT_CLOUD); + this.maxDate = format(new Date(this.field.maxValue), this.DATE_FORMAT); } } } } getTodaysFormattedDate() { - return moment().format(DATE_FORMAT_CLOUD); + return new Date(); } ngOnDestroy() { @@ -104,9 +101,9 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit, } onDateChanged(newDateValue) { - const date = moment(newDateValue, this.field.dateDisplayFormat, true); - if (date.isValid()) { - this.field.value = date.format(this.field.dateDisplayFormat); + const date = new Date(newDateValue); + if (isValid(date)) { + this.field.value = format(date, this.DATE_FORMAT); } else { this.field.value = newDateValue; }