From f3e204fc7135000c19b5c123a25b5a1dbe805284 Mon Sep 17 00:00:00 2001 From: SheenaMalhotra182 Date: Mon, 21 Aug 2023 11:41:15 +0530 Subject: [PATCH] [ACS-5867] made dateFormat configurable for date and date-time widgets --- .../mock/form-renderer.component.mock.ts | 2 +- .../widgets/core/form-field-validator.spec.ts | 16 +++--- .../widgets/core/form-field-validator.ts | 56 +++++++++---------- .../widgets/core/form-field.model.spec.ts | 34 +++++------ .../widgets/core/form-field.model.ts | 35 ++++++------ .../widgets/date-time/date-time.widget.html | 2 +- .../date-time/date-time.widget.spec.ts | 10 ++-- .../widgets/date-time/date-time.widget.ts | 13 +++-- .../components/widgets/date/date.widget.html | 4 +- .../widgets/date/date.widget.spec.ts | 12 ++-- .../components/widgets/date/date.widget.ts | 11 ++-- 11 files changed, 101 insertions(+), 94 deletions(-) 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 74c2ef5431..72038214d3 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 @@ -1842,7 +1842,7 @@ export const dateWidgetFormVisibilityMock = { existingColspan: 1, maxColspan: 2 }, - dateDisplayFormat: 'D-M-YYYY' + dateDisplayFormat: 'd-M-yyyy' } ] } diff --git a/lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts b/lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts index a19e889d87..95fd1294ba 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts @@ -15,6 +15,7 @@ * limitations under the License. */ +import { format, parse } from 'date-fns'; import { ErrorMessageModel } from './error-message.model'; import { FormFieldOption } from './form-field-option'; import { FormFieldTypes } from './form-field-types'; @@ -35,7 +36,6 @@ import { } from './form-field-validator'; import { FormFieldModel } from './form-field.model'; import { FormModel } from './form.model'; -declare let moment: any; describe('FormFieldValidator', () => { @@ -714,7 +714,7 @@ 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 = moment(maxValueFromActivitiInput, 'DD-M-YYYY hh:mm A').utc().format(); + const maxValueSavedInForm = format(parse(maxValueFromActivitiInput, 'dd-MM-yyyy hh:mm a', new Date()), "yyyy-MM-dd'T'HH:mm:ssXXX"); const localValidValue = '2018-3-30 11:59 PM'; @@ -729,7 +729,7 @@ 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 = moment(maxValueFromActivitiInput, 'DD-M-YYYY hh:mm A').utc().format(); + const maxValueSavedInForm = format(parse(maxValueFromActivitiInput, 'd-M-yyyy hh:mm a', new Date()), "yyyy-MM-dd'T'HH:mm:ssxxx"); const localInvalidValue = '2018-3-31 12:01 AM'; @@ -840,7 +840,7 @@ 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 = moment(minValueFromActivitiInput, 'DD-M-YYYY hh:mm A').utc().format(); + const minValueSavedInForm = format(parse(minValueFromActivitiInput, 'dd-MM-yyyy hh:mm a', new Date()), "yyyy-MM-dd'T'HH:mm:ssXXX"); const localValidValue = '2018-3-02 06:01 AM'; @@ -855,7 +855,7 @@ 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 = moment(minValueFromActivitiInput, 'DD-M-YYYY hh:mm A').utc().format(); + const minValueSavedInForm = format(parse(minValueFromActivitiInput, 'dd-MM-yyyy hh:mm a', new Date()), "yyyy-MM-dd'T'HH:mm:ssXXX"); const localInvalidValue = '2018-3-02 05:59 AM'; @@ -1113,8 +1113,8 @@ describe('FormFieldValidator', () => { it('should validate dateTime format with dateDisplayFormat', () => { const field = new FormFieldModel(new FormModel(), { type: FormFieldTypes.DATETIME, - value: '2021-06-09 14:10', - dateDisplayFormay: 'YYYY-MM-DD HH:mm' + value: '2021-06-09 02:10 PM', + dateDisplayFormat: 'yyyy-MM-dd hh:mm a', }); expect(validator.validate(field)).toBeTruthy(); @@ -1123,7 +1123,7 @@ describe('FormFieldValidator', () => { it('should validate dateTime format with default format', () => { const field = new FormFieldModel(new FormModel(), { type: FormFieldTypes.DATETIME, - value: '2021-06-09 14:10' + value: '2021-06-09 02:10 PM' }); expect(validator.validate(field)).toBeTruthy(); }); diff --git a/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts b/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts index cf63d348a0..ccf93065b2 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field-validator.ts @@ -17,10 +17,10 @@ /* eslint-disable @angular-eslint/component-selector */ -import moment from 'moment'; import { FormFieldTypes } from './form-field-types'; import { isNumberValue } from './form-field-utils'; import { FormFieldModel } from './form-field.model'; +import { format, isAfter, isBefore, isValid, parse } from 'date-fns'; export interface FormFieldValidator { @@ -145,10 +145,10 @@ export class DateFieldValidator implements FormFieldValidator { ]; // Validates that the input string is a valid date formatted as (default D-M-YYYY) - static isValidDate(inputDate: string, dateFormat: string = 'D-M-YYYY'): boolean { + static isValidDate(inputDate: string, dateFormat: string = 'd-M-yyyy'): boolean { if (inputDate) { - const d = moment(inputDate, dateFormat, true); - return d.isValid(); + const d = parse(inputDate, dateFormat, new Date()); + return isValid(d); } return false; @@ -177,10 +177,10 @@ export class DateTimeFieldValidator implements FormFieldValidator { ]; // Validates that the input string is a valid date formatted as (default D-M-YYYY) - static isValidDate(inputDate: string, dateFormat: string = 'YYYY-MM-DD HH:mm'): boolean { + static isValidDate(inputDate: string, dateFormat: string = 'yyyy-MM-dd hh:mm a'): boolean { if (inputDate) { - const d = moment(inputDate, dateFormat, true); - return d.isValid(); + const d = parse(inputDate, dateFormat, new Date()); + return isValid(d); } return false; @@ -192,7 +192,7 @@ export class DateTimeFieldValidator implements FormFieldValidator { validate(field: FormFieldModel): boolean { if (this.isSupported(field) && field.value && field.isVisible) { - if (DateFieldValidator.isValidDate(field.value, field.dateDisplayFormat)) { + if (DateTimeFieldValidator.isValidDate(field.value, field.dateDisplayFormat)) { return true; } field.validationSummary.message = field.dateDisplayFormat; @@ -204,8 +204,8 @@ export class DateTimeFieldValidator implements FormFieldValidator { export abstract class BoundaryDateFieldValidator implements FormFieldValidator { - DATE_FORMAT_CLOUD = 'YYYY-MM-DD'; - DATE_FORMAT = 'DD-MM-YYYY'; + DATE_FORMAT_CLOUD = 'yyyy-MM-dd'; + DATE_FORMAT = 'dd-MM-yyyy'; supportedTypes = [ FormFieldTypes.DATE @@ -244,17 +244,17 @@ export class MinDateFieldValidator extends BoundaryDateFieldValidator { // remove time and timezone info let fieldValueData; if (typeof field.value === 'string') { - fieldValueData = moment(field.value.split('T')[0], dateFormat); + fieldValueData = parse(field.value.split('T')[0], dateFormat, new Date()); } else { fieldValueData = field.value; } const minValueDateFormat = this.extractDateFormat(field.minValue); - const min = moment(field.minValue, minValueDateFormat); + const min = parse(field.minValue, minValueDateFormat, new Date()); - if (fieldValueData.isBefore(min)) { + if (isBefore(fieldValueData, min)) { field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_LESS_THAN`; - field.validationSummary.attributes.set('minValue', min.format(field.dateDisplayFormat).toLocaleUpperCase()); + field.validationSummary.attributes.set('minValue', format(min, field.dateDisplayFormat).toLocaleUpperCase()); isValid = false; } return isValid; @@ -274,17 +274,17 @@ export class MaxDateFieldValidator extends BoundaryDateFieldValidator { // remove time and timezone info let fieldValueData; if (typeof field.value === 'string') { - fieldValueData = moment(field.value.split('T')[0], dateFormat); + fieldValueData = parse(field.value.split('T')[0], dateFormat, new Date()); } else { fieldValueData = field.value; } const maxValueDateFormat = this.extractDateFormat(field.maxValue); - const max = moment(field.maxValue, maxValueDateFormat); + const max = parse(field.maxValue, maxValueDateFormat, new Date()); - if (fieldValueData.isAfter(max)) { + if (isAfter(fieldValueData, max)) { field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_GREATER_THAN`; - field.validationSummary.attributes.set('maxValue', max.format(field.dateDisplayFormat).toLocaleUpperCase()); + field.validationSummary.attributes.set('maxValue', format(max, field.dateDisplayFormat).toLocaleUpperCase()); isValid = false; } return isValid; @@ -301,7 +301,7 @@ export class MinDateTimeFieldValidator implements FormFieldValidator { private supportedTypes = [ FormFieldTypes.DATETIME ]; - MIN_DATETIME_FORMAT = 'YYYY-MM-DD hh:mm AZ'; + MIN_DATETIME_FORMAT = 'yyyy-MM-dd hh:mm a'; isSupported(field: FormFieldModel): boolean { return field && @@ -327,15 +327,15 @@ export class MinDateTimeFieldValidator implements FormFieldValidator { let isValid = true; let fieldValueDate; if (typeof field.value === 'string') { - fieldValueDate = moment(field.value, dateFormat); + fieldValueDate = parse(field.value, dateFormat, new Date()); } else { fieldValueDate = field.value; } - const min = moment(field.minValue, this.MIN_DATETIME_FORMAT); + const min = format(new Date(field.minValue), this.MIN_DATETIME_FORMAT); - if (fieldValueDate.isBefore(min)) { + if (isBefore(fieldValueDate, new Date(min))) { field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_LESS_THAN`; - field.validationSummary.attributes.set('minValue', min.format(field.dateDisplayFormat).replace(':', '-')); + field.validationSummary.attributes.set('minValue', format(new Date(min), field.dateDisplayFormat).replace(':', '-')); isValid = false; } return isValid; @@ -347,7 +347,7 @@ export class MaxDateTimeFieldValidator implements FormFieldValidator { private supportedTypes = [ FormFieldTypes.DATETIME ]; - MAX_DATETIME_FORMAT = 'YYYY-MM-DD hh:mm AZ'; + MAX_DATETIME_FORMAT = 'yyyy-MM-dd hh:mm a'; isSupported(field: FormFieldModel): boolean { return field && @@ -374,15 +374,15 @@ export class MaxDateTimeFieldValidator implements FormFieldValidator { let fieldValueDate; if (typeof field.value === 'string') { - fieldValueDate = moment(field.value, dateFormat); + fieldValueDate = parse(field.value, dateFormat, new Date()); } else { fieldValueDate = field.value; } - const max = moment(field.maxValue, this.MAX_DATETIME_FORMAT); + const max = format(new Date(field.maxValue), this.MAX_DATETIME_FORMAT); - if (fieldValueDate.isAfter(max)) { + if (isAfter(fieldValueDate, new Date(max))) { field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_GREATER_THAN`; - field.validationSummary.attributes.set('maxValue', max.format(field.dateDisplayFormat).replace(':', '-')); + field.validationSummary.attributes.set('maxValue', format(new Date(max), field.dateDisplayFormat).replace(':', '-')); isValid = false; } return isValid; diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts index 99efcbd8b9..5ae744233c 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts @@ -15,10 +15,10 @@ * limitations under the License. */ -import moment from 'moment'; import { FormFieldTypes } from './form-field-types'; import { FormFieldModel } from './form-field.model'; import { FormModel } from './form.model'; +import { format, startOfDay } from 'date-fns'; describe('FormFieldModel', () => { @@ -167,7 +167,7 @@ describe('FormFieldModel', () => { readOnly: false } }, - dateDisplayFormat: 'MM-DD-YYYY' + dateDisplayFormat: 'MM-dd-yyyy' }); expect(field.value).toBe('04-28-2017'); expect(form.values['mmddyyyy']).toEqual('2017-04-28T00:00:00.000Z'); @@ -193,7 +193,7 @@ describe('FormFieldModel', () => { readOnly: false } }, - dateDisplayFormat: 'MM-YY-DD' + dateDisplayFormat: 'MM-yy-dd' }); expect(field.value).toBe('04-17-28'); expect(form.values['mmyydd']).toEqual('2017-04-28T00:00:00.000Z'); @@ -219,7 +219,7 @@ describe('FormFieldModel', () => { readOnly: false } }, - dateDisplayFormat: 'DD-MM-YYYY' + dateDisplayFormat: 'dd-MM-yyyy' }); expect(field.value).toBe('28-04-2017'); expect(form.values['ddmmyyy']).toEqual('2017-04-28T00:00:00.000Z'); @@ -245,7 +245,7 @@ describe('FormFieldModel', () => { readOnly: false } }, - dateDisplayFormat: 'DD-MM-YYYY' + dateDisplayFormat: 'dd-MM-yyyy' }); expect(field.value).toBe('28-04-2017'); }); @@ -257,7 +257,7 @@ describe('FormFieldModel', () => { id: 'ddmmyyy', name: 'DD-MM-YYYY', type: 'date', - value: 'today', + value: startOfDay(new Date()), required: false, readOnly: false, params: { @@ -265,17 +265,17 @@ describe('FormFieldModel', () => { id: 'ddmmyyy', name: 'DD-MM-YYYY', type: 'date', - value: 'today', + value: startOfDay(new Date()), required: false, readOnly: false } }, - dateDisplayFormat: 'DD-MM-YYYY' + dateDisplayFormat: 'dd-MM-yyyy' }); - const currentDate = moment(new Date()); - const expectedDate = moment(currentDate).format('DD-MM-YYYY'); - const expectedDateFormat = `${currentDate.format('YYYY-MM-DD')}T00:00:00.000Z`; + const currentDate = new Date(); + const expectedDate = format(currentDate, 'dd-MM-yyyy'); + const expectedDateFormat = `${format(currentDate, 'yyyy-MM-dd')}T00:00:00.000Z`; expect(field.value).toBe(expectedDate); expect(form.values['ddmmyyy']).toEqual(expectedDateFormat); @@ -288,7 +288,7 @@ describe('FormFieldModel', () => { id: 'datetime', name: 'date and time', type: 'datetime', - value: 'now', + value: new Date(), required: false, readOnly: false, params: { @@ -296,17 +296,17 @@ describe('FormFieldModel', () => { id: 'datetime', name: 'date and time', type: 'datetime', - value: 'now', + value: new Date(), required: false, readOnly: false } }, - dateDisplayFormat: 'YYYY-MM-DD HH:mm' + dateDisplayFormat: 'yyyy-MM-dd hh:mm' }); - const currentDateTime = moment(new Date()); - const expectedDateTime = moment.utc(currentDateTime).format('YYYY-MM-DD HH:mm'); - const expectedDateTimeFormat = `${currentDateTime.utc().format('YYYY-MM-DDTHH:mm:00')}.000Z`; + const currentDateTime = new Date(); + const expectedDateTime = format(currentDateTime, 'yyyy-MM-dd hh:mm'); + const expectedDateTimeFormat = `${format(currentDateTime, "yyyy-MM-dd'\T'hh:mm")}:00.000Z`; expect(field.value).toBe(expectedDateTime); expect(form.values['datetime']).toEqual(expectedDateTimeFormat); diff --git a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts index 71f10f4361..dd820c12c8 100644 --- a/lib/core/src/lib/form/components/widgets/core/form-field.model.ts +++ b/lib/core/src/lib/form/components/widgets/core/form-field.model.ts @@ -16,7 +16,6 @@ */ /* eslint-disable @angular-eslint/component-selector */ -import moment from 'moment'; import { WidgetVisibilityModel } from '../../../models/widget-visibility.model'; import { ContainerColumnModel } from './container-column.model'; import { ErrorMessageModel } from './error-message.model'; @@ -29,6 +28,7 @@ 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 { format, isValid, parse } from 'date-fns'; // Maps to FormFieldRepresentation export class FormFieldModel extends FormWidgetModel { @@ -37,8 +37,8 @@ export class FormFieldModel extends FormWidgetModel { private _isValid: boolean = true; private _required: boolean = false; - readonly defaultDateFormat: string = 'D-M-YYYY'; - readonly defaultDateTimeFormat: string = 'D-M-YYYY hh:mm A'; + readonly defaultDateFormat: string = 'd-M-yyyy'; + readonly defaultDateTimeFormat: string = 'd-M-yyyy hh:mm a'; // model members fieldType: string; @@ -340,12 +340,14 @@ export class FormFieldModel extends FormWidgetModel { if (value) { let dateValue; if (isNumberValue(value)) { - dateValue = moment(value); + dateValue = new Date(value); } else { - dateValue = this.isDateTimeField(json) ? moment.utc(value, 'YYYY-MM-DD hh:mm A') : moment.utc(value.split('T')[0], 'YYYY-M-D'); + dateValue = this.isDateTimeField(json) + ? parse(value, 'yyyy-MM-dd hh:mm a', new Date()) + : parse(value.split('T')[0], 'yyyy-M-d', new Date()); } - if (dateValue?.isValid()) { - value = dateValue.utc().format(this.dateDisplayFormat); + if (isValid(dateValue)) { + value = format(dateValue, this.dateDisplayFormat); } } } @@ -414,12 +416,13 @@ export class FormFieldModel extends FormWidgetModel { break; case FormFieldTypes.DATE: if (typeof this.value === 'string' && this.value === 'today') { - this.value = moment(new Date()).format(this.dateDisplayFormat); + this.value = format(new Date(), this.dateDisplayFormat); } - const dateValue = moment(this.value, this.dateDisplayFormat, true); - if (dateValue?.isValid()) { - this.form.values[this.id] = `${dateValue.format('YYYY-MM-DD')}T00:00:00.000Z`; + const dateValue = parse(this.value, this.dateDisplayFormat, new Date()); + + if (isValid(dateValue)) { + this.form.values[this.id] = `${format(dateValue, 'yyyy-MM-dd')}T00:00:00.000Z`; } else { this.form.values[this.id] = null; this._value = this.value; @@ -427,13 +430,13 @@ export class FormFieldModel extends FormWidgetModel { break; case FormFieldTypes.DATETIME: if (typeof this.value === 'string' && this.value === 'now') { - this.value = moment(new Date()).utc().format(this.dateDisplayFormat); + this.value = format(new Date(), this.dateDisplayFormat); } - const dateTimeValue = moment.utc(this.value, this.dateDisplayFormat, true); - if (dateTimeValue?.isValid()) { - /* cspell:disable-next-line */ - this.form.values[this.id] = `${dateTimeValue.utc().format('YYYY-MM-DDTHH:mm:ss')}.000Z`; + const dateTimeValue = parse(this.value, this.dateDisplayFormat, new Date()); + + if (isValid(dateTimeValue)) { + this.form.values[this.id] = `${format(dateTimeValue, 'yyyy-MM-dd\'T\'HH:mm:ss')}.000Z`; } else { this.form.values[this.id] = null; this._value = this.value; 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 1749a2440e..634bc28514 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 @@ { @@ -102,7 +102,7 @@ describe('DateTimeWidgetComponent', () => { }); widget.field = field; - const mockDate = parse('1982-03-13T10:00:000Z', widget.DATE_TIME_FORMAT, new Date()); + const mockDate = format(new Date('1982-03-13 10:00 AM'), "yyyy-MM-dd'\T'hh:mm:ssxxx"); widget.onDateChanged(mockDate); expect(widget.onFieldChanged).toHaveBeenCalledWith(field); @@ -199,7 +199,7 @@ describe('DateTimeWidgetComponent', () => { id: 'date-field-id', name: 'date-name', value: '12-30-9999 10:30 AM', - dateDisplayFormat: 'MM-DD-YYYY HH:mm A', + dateDisplayFormat: 'MM-dd-yyyy hh:mm a', type: 'datetime', readOnly: 'false' }); @@ -218,7 +218,7 @@ describe('DateTimeWidgetComponent', () => { id: 'date-field-id', name: 'date-name', value: '12-30-9999 10:30 AM', - dateDisplayFormat: 'MM-DD-YYYY HH:mm A', + dateDisplayFormat: 'MM-dd-yyyy hh:mm a', type: 'datetime', readOnly: 'false' }); @@ -244,7 +244,7 @@ describe('DateTimeWidgetComponent', () => { readOnly: 'false' }); field.isVisible = true; - field.dateDisplayFormat = 'MM-DD-YYYY HH:mm A'; + field.dateDisplayFormat = 'MM-dd-yyyy hh:mm a'; widget.field = field; fixture.detectChanges(); 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 e30541e4b9..ef263c3f53 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 @@ -17,8 +17,8 @@ /* eslint-disable @angular-eslint/component-selector */ -import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core'; -import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; +import { Component, OnInit, ViewEncapsulation, OnDestroy, Inject } from '@angular/core'; +import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core'; import { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core'; import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment'; import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service'; @@ -45,8 +45,6 @@ import { format, isValid, parseISO } from 'date-fns'; }) export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy { - DATE_TIME_FORMAT = 'd-M-yyyy hh:mm a'; - minDate: string; maxDate: string; @@ -54,7 +52,8 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, constructor(public formService: FormService, private dateAdapter: DateAdapter, - private userPreferencesService: UserPreferencesService) { + private userPreferencesService: UserPreferencesService, + @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) { super(formService); } @@ -64,6 +63,8 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, .pipe(takeUntil(this.onDestroy$)) .subscribe(locale => this.dateAdapter.setLocale(locale)); + this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat; + if (this.field) { if (this.field.minValue) { this.minDate = format(parseISO(this.field.minValue), `yyyy-MM-dd'T'HH:mm:ssXXX`); @@ -83,7 +84,7 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, onDateChanged(newDateValue) { const date = new Date(newDateValue); if (isValid(date)) { - this.field.value = format(date, this.DATE_TIME_FORMAT); + this.field.value = format(date, this.field.dateDisplayFormat); } 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 d9c2abdafc..c1528ffc8d 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 @@ - + { @@ -103,7 +103,7 @@ describe('DateWidgetComponent', () => { readOnly: 'false' }); widget.field = field; - widget.onDateChanged({ value: parse('12/12/2012', widget.DATE_FORMAT, new Date()) }); + widget.onDateChanged({ value: format(new Date('12/12/2012'), widget.field.dateDisplayFormat) }); expect(widget.onFieldChanged).toHaveBeenCalledWith(field); }); @@ -172,7 +172,7 @@ describe('DateWidgetComponent', () => { readOnly: 'false' }); widget.field.isVisible = true; - widget.field.dateDisplayFormat = 'MM-DD-YYYY'; + widget.field.dateDisplayFormat = 'MM-dd-yyyy'; fixture.detectChanges(); @@ -180,7 +180,7 @@ describe('DateWidgetComponent', () => { expect(dateElement.value).toContain('12-30-9999'); widget.field.value = '5-6-2019 00:00'; - widget.field.dateDisplayFormat = 'D-M-YYYY HH:mm'; + widget.field.dateDisplayFormat = 'd-M-yyyy HH:mm'; fixture.detectChanges(); @@ -188,7 +188,7 @@ describe('DateWidgetComponent', () => { expect(dateElement.value).toContain('5-6-2019 00:00'); widget.field.value = '05.06.2019'; - widget.field.dateDisplayFormat = 'DD.MM.YYYY'; + widget.field.dateDisplayFormat = 'dd.MM.yyyy'; fixture.detectChanges(); @@ -244,7 +244,7 @@ describe('DateWidgetComponent', () => { readOnly: 'false' }); field.isVisible = true; - field.dateDisplayFormat = 'MM-DD-YYYY'; + field.dateDisplayFormat = 'MM-dd-yyyy'; widget.field = field; fixture.detectChanges(); 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 604321a79f..bc61b8e3b5 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,8 +18,8 @@ /* eslint-disable @angular-eslint/component-selector */ import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service'; -import { Component, OnInit, ViewEncapsulation, OnDestroy } from '@angular/core'; -import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core'; +import { Component, OnInit, ViewEncapsulation, OnDestroy, Inject } from '@angular/core'; +import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core'; import { FormService } from '../../../services/form.service'; import { WidgetComponent } from '../widget.component'; import { Subject } from 'rxjs'; @@ -59,7 +59,8 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe constructor(public formService: FormService, private dateAdapter: DateAdapter, - private userPreferencesService: UserPreferencesService) { + private userPreferencesService: UserPreferencesService, + @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) { super(formService); } @@ -69,6 +70,8 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe .pipe(takeUntil(this.onDestroy$)) .subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale))); + this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat; + if (this.field) { 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; @@ -83,7 +86,7 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe 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; }