inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5867] made dateFormat configurable for date and date-time widgets

Browse Source
This commit is contained in:
SheenaMalhotra182
2023-09-20 15:47:19 +05:30
parent a07afb5377
commit f3e204fc71
11 changed files with 101 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/form/components/mock/form-renderer.component.mock.ts
+1 -1
View File
@@ -1842,7 +1842,7 @@ export const dateWidgetFormVisibilityMock = {
existingColspan: 1, existingColspan: 1,
maxColspan: 2 maxColspan: 2
}, },
dateDisplayFormat: 'D-M-YYYY' dateDisplayFormat: 'd-M-yyyy'
} }
] ]
} }
lib/core/src/lib/form/components/widgets/core/form-field-validator.spec.ts
+8 -8
View File
@@ -15,6 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { format, parse } from 'date-fns';
import { ErrorMessageModel } from './error-message.model'; import { ErrorMessageModel } from './error-message.model';
import { FormFieldOption } from './form-field-option'; import { FormFieldOption } from './form-field-option';
import { FormFieldTypes } from './form-field-types'; import { FormFieldTypes } from './form-field-types';
@@ -35,7 +36,6 @@ import {
} from './form-field-validator'; } from './form-field-validator';
import { FormFieldModel } from './form-field.model'; import { FormFieldModel } from './form-field.model';
import { FormModel } from './form.model'; import { FormModel } from './form.model';
declare let moment: any;
describe('FormFieldValidator', () => { 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', () => { 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 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'; 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', () => { 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 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'; 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', () => { 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 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'; 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', () => { 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 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'; const localInvalidValue = '2018-3-02 05:59 AM';
@@ -1113,8 +1113,8 @@ describe('FormFieldValidator', () => {
it('should validate dateTime format with dateDisplayFormat', () => { it('should validate dateTime format with dateDisplayFormat', () => {
const field = new FormFieldModel(new FormModel(), { const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME, type: FormFieldTypes.DATETIME,
value: '2021-06-09 14:10', value: '2021-06-09 02:10 PM',
dateDisplayFormay: 'YYYY-MM-DD HH:mm' dateDisplayFormat: 'yyyy-MM-dd hh:mm a',
}); });
expect(validator.validate(field)).toBeTruthy(); expect(validator.validate(field)).toBeTruthy();
@@ -1123,7 +1123,7 @@ describe('FormFieldValidator', () => {
it('should validate dateTime format with default format', () => { it('should validate dateTime format with default format', () => {
const field = new FormFieldModel(new FormModel(), { const field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.DATETIME, type: FormFieldTypes.DATETIME,
value: '2021-06-09 14:10' value: '2021-06-09 02:10 PM'
}); });
expect(validator.validate(field)).toBeTruthy(); expect(validator.validate(field)).toBeTruthy();
}); });
lib/core/src/lib/form/components/widgets/core/form-field-validator.ts
+28 -28
View File
@@ -17,10 +17,10 @@
/* eslint-disable @angular-eslint/component-selector */ /* eslint-disable @angular-eslint/component-selector */
import moment from 'moment';
import { FormFieldTypes } from './form-field-types'; import { FormFieldTypes } from './form-field-types';
import { isNumberValue } from './form-field-utils'; import { isNumberValue } from './form-field-utils';
import { FormFieldModel } from './form-field.model'; import { FormFieldModel } from './form-field.model';
import { format, isAfter, isBefore, isValid, parse } from 'date-fns';
export interface FormFieldValidator { export interface FormFieldValidator {
@@ -145,10 +145,10 @@ export class DateFieldValidator implements FormFieldValidator {
]; ];
// Validates that the input string is a valid date formatted as <dateFormat> (default D-M-YYYY) // Validates that the input string is a valid date formatted as <dateFormat> (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) { if (inputDate) {
const d = moment(inputDate, dateFormat, true); const d = parse(inputDate, dateFormat, new Date());
return d.isValid(); return isValid(d);
} }
return false; return false;
@@ -177,10 +177,10 @@ export class DateTimeFieldValidator implements FormFieldValidator {
]; ];
// Validates that the input string is a valid date formatted as <dateFormat> (default D-M-YYYY) // 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 { static isValidDate(inputDate: string, dateFormat: string = 'yyyy-MM-dd hh:mm a'): boolean {
if (inputDate) { if (inputDate) {
const d = moment(inputDate, dateFormat, true); const d = parse(inputDate, dateFormat, new Date());
return d.isValid(); return isValid(d);
} }
return false; return false;
@@ -192,7 +192,7 @@ export class DateTimeFieldValidator implements FormFieldValidator {
validate(field: FormFieldModel): boolean { validate(field: FormFieldModel): boolean {
if (this.isSupported(field) && field.value && field.isVisible) { if (this.isSupported(field) && field.value && field.isVisible) {
if (DateFieldValidator.isValidDate(field.value, field.dateDisplayFormat)) { if (DateTimeFieldValidator.isValidDate(field.value, field.dateDisplayFormat)) {
return true; return true;
} }
field.validationSummary.message = field.dateDisplayFormat; field.validationSummary.message = field.dateDisplayFormat;
@@ -204,8 +204,8 @@ export class DateTimeFieldValidator implements FormFieldValidator {
export abstract class BoundaryDateFieldValidator implements FormFieldValidator { export abstract class BoundaryDateFieldValidator implements FormFieldValidator {
DATE_FORMAT_CLOUD = 'YYYY-MM-DD'; DATE_FORMAT_CLOUD = 'yyyy-MM-dd';
DATE_FORMAT = 'DD-MM-YYYY'; DATE_FORMAT = 'dd-MM-yyyy';
supportedTypes = [ supportedTypes = [
FormFieldTypes.DATE FormFieldTypes.DATE
@@ -244,17 +244,17 @@ export class MinDateFieldValidator extends BoundaryDateFieldValidator {
// remove time and timezone info // remove time and timezone info
let fieldValueData; let fieldValueData;
if (typeof field.value === 'string') { if (typeof field.value === 'string') {
fieldValueData = moment(field.value.split('T')[0], dateFormat); fieldValueData = parse(field.value.split('T')[0], dateFormat, new Date());
} else { } else {
fieldValueData = field.value; fieldValueData = field.value;
} }
const minValueDateFormat = this.extractDateFormat(field.minValue); 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.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; isValid = false;
} }
return isValid; return isValid;
@@ -274,17 +274,17 @@ export class MaxDateFieldValidator extends BoundaryDateFieldValidator {
// remove time and timezone info // remove time and timezone info
let fieldValueData; let fieldValueData;
if (typeof field.value === 'string') { if (typeof field.value === 'string') {
fieldValueData = moment(field.value.split('T')[0], dateFormat); fieldValueData = parse(field.value.split('T')[0], dateFormat, new Date());
} else { } else {
fieldValueData = field.value; fieldValueData = field.value;
} }
const maxValueDateFormat = this.extractDateFormat(field.maxValue); 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.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; isValid = false;
} }
return isValid; return isValid;
@@ -301,7 +301,7 @@ export class MinDateTimeFieldValidator implements FormFieldValidator {
private supportedTypes = [ private supportedTypes = [
FormFieldTypes.DATETIME FormFieldTypes.DATETIME
]; ];
MIN_DATETIME_FORMAT = 'YYYY-MM-DD hh:mm AZ'; MIN_DATETIME_FORMAT = 'yyyy-MM-dd hh:mm a';
isSupported(field: FormFieldModel): boolean { isSupported(field: FormFieldModel): boolean {
return field && return field &&
@@ -327,15 +327,15 @@ export class MinDateTimeFieldValidator implements FormFieldValidator {
let isValid = true; let isValid = true;
let fieldValueDate; let fieldValueDate;
if (typeof field.value === 'string') { if (typeof field.value === 'string') {
fieldValueDate = moment(field.value, dateFormat); fieldValueDate = parse(field.value, dateFormat, new Date());
} else { } else {
fieldValueDate = field.value; 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.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; isValid = false;
} }
return isValid; return isValid;
@@ -347,7 +347,7 @@ export class MaxDateTimeFieldValidator implements FormFieldValidator {
private supportedTypes = [ private supportedTypes = [
FormFieldTypes.DATETIME FormFieldTypes.DATETIME
]; ];
MAX_DATETIME_FORMAT = 'YYYY-MM-DD hh:mm AZ'; MAX_DATETIME_FORMAT = 'yyyy-MM-dd hh:mm a';
isSupported(field: FormFieldModel): boolean { isSupported(field: FormFieldModel): boolean {
return field && return field &&
@@ -374,15 +374,15 @@ export class MaxDateTimeFieldValidator implements FormFieldValidator {
let fieldValueDate; let fieldValueDate;
if (typeof field.value === 'string') { if (typeof field.value === 'string') {
fieldValueDate = moment(field.value, dateFormat); fieldValueDate = parse(field.value, dateFormat, new Date());
} else { } else {
fieldValueDate = field.value; 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.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; isValid = false;
} }
return isValid; return isValid;
lib/core/src/lib/form/components/widgets/core/form-field.model.spec.ts
+17 -17
View File
@@ -15,10 +15,10 @@
* limitations under the License. * limitations under the License.
*/ */
import moment from 'moment';
import { FormFieldTypes } from './form-field-types'; import { FormFieldTypes } from './form-field-types';
import { FormFieldModel } from './form-field.model'; import { FormFieldModel } from './form-field.model';
import { FormModel } from './form.model'; import { FormModel } from './form.model';
import { format, startOfDay } from 'date-fns';
describe('FormFieldModel', () => { describe('FormFieldModel', () => {
@@ -167,7 +167,7 @@ describe('FormFieldModel', () => {
readOnly: false readOnly: false
} }
}, },
dateDisplayFormat: 'MM-DD-YYYY' dateDisplayFormat: 'MM-dd-yyyy'
}); });
expect(field.value).toBe('04-28-2017'); expect(field.value).toBe('04-28-2017');
expect(form.values['mmddyyyy']).toEqual('2017-04-28T00:00:00.000Z'); expect(form.values['mmddyyyy']).toEqual('2017-04-28T00:00:00.000Z');
@@ -193,7 +193,7 @@ describe('FormFieldModel', () => {
readOnly: false readOnly: false
} }
}, },
dateDisplayFormat: 'MM-YY-DD' dateDisplayFormat: 'MM-yy-dd'
}); });
expect(field.value).toBe('04-17-28'); expect(field.value).toBe('04-17-28');
expect(form.values['mmyydd']).toEqual('2017-04-28T00:00:00.000Z'); expect(form.values['mmyydd']).toEqual('2017-04-28T00:00:00.000Z');
@@ -219,7 +219,7 @@ describe('FormFieldModel', () => {
readOnly: false readOnly: false
} }
}, },
dateDisplayFormat: 'DD-MM-YYYY' dateDisplayFormat: 'dd-MM-yyyy'
}); });
expect(field.value).toBe('28-04-2017'); expect(field.value).toBe('28-04-2017');
expect(form.values['ddmmyyy']).toEqual('2017-04-28T00:00:00.000Z'); expect(form.values['ddmmyyy']).toEqual('2017-04-28T00:00:00.000Z');
@@ -245,7 +245,7 @@ describe('FormFieldModel', () => {
readOnly: false readOnly: false
} }
}, },
dateDisplayFormat: 'DD-MM-YYYY' dateDisplayFormat: 'dd-MM-yyyy'
}); });
expect(field.value).toBe('28-04-2017'); expect(field.value).toBe('28-04-2017');
}); });
@@ -257,7 +257,7 @@ describe('FormFieldModel', () => {
id: 'ddmmyyy', id: 'ddmmyyy',
name: 'DD-MM-YYYY', name: 'DD-MM-YYYY',
type: 'date', type: 'date',
value: 'today', value: startOfDay(new Date()),
required: false, required: false,
readOnly: false, readOnly: false,
params: { params: {
@@ -265,17 +265,17 @@ describe('FormFieldModel', () => {
id: 'ddmmyyy', id: 'ddmmyyy',
name: 'DD-MM-YYYY', name: 'DD-MM-YYYY',
type: 'date', type: 'date',
value: 'today', value: startOfDay(new Date()),
required: false, required: false,
readOnly: false readOnly: false
} }
}, },
dateDisplayFormat: 'DD-MM-YYYY' dateDisplayFormat: 'dd-MM-yyyy'
}); });
const currentDate = moment(new Date()); const currentDate = new Date();
const expectedDate = moment(currentDate).format('DD-MM-YYYY'); const expectedDate = format(currentDate, 'dd-MM-yyyy');
const expectedDateFormat = `${currentDate.format('YYYY-MM-DD')}T00:00:00.000Z`; const expectedDateFormat = `${format(currentDate, 'yyyy-MM-dd')}T00:00:00.000Z`;
expect(field.value).toBe(expectedDate); expect(field.value).toBe(expectedDate);
expect(form.values['ddmmyyy']).toEqual(expectedDateFormat); expect(form.values['ddmmyyy']).toEqual(expectedDateFormat);
@@ -288,7 +288,7 @@ describe('FormFieldModel', () => {
id: 'datetime', id: 'datetime',
name: 'date and time', name: 'date and time',
type: 'datetime', type: 'datetime',
value: 'now', value: new Date(),
required: false, required: false,
readOnly: false, readOnly: false,
params: { params: {
@@ -296,17 +296,17 @@ describe('FormFieldModel', () => {
id: 'datetime', id: 'datetime',
name: 'date and time', name: 'date and time',
type: 'datetime', type: 'datetime',
value: 'now', value: new Date(),
required: false, required: false,
readOnly: false readOnly: false
} }
}, },
dateDisplayFormat: 'YYYY-MM-DD HH:mm' dateDisplayFormat: 'yyyy-MM-dd hh:mm'
}); });
const currentDateTime = moment(new Date()); const currentDateTime = new Date();
const expectedDateTime = moment.utc(currentDateTime).format('YYYY-MM-DD HH:mm'); const expectedDateTime = format(currentDateTime, 'yyyy-MM-dd hh:mm');
const expectedDateTimeFormat = `${currentDateTime.utc().format('YYYY-MM-DDTHH:mm:00')}.000Z`; const expectedDateTimeFormat = `${format(currentDateTime, "yyyy-MM-dd'\T'hh:mm")}:00.000Z`;
expect(field.value).toBe(expectedDateTime); expect(field.value).toBe(expectedDateTime);
expect(form.values['datetime']).toEqual(expectedDateTimeFormat); expect(form.values['datetime']).toEqual(expectedDateTimeFormat);
lib/core/src/lib/form/components/widgets/core/form-field.model.ts
+19 -16
View File
@@ -16,7 +16,6 @@
*/ */
/* eslint-disable @angular-eslint/component-selector */ /* eslint-disable @angular-eslint/component-selector */
import moment from 'moment';
import { WidgetVisibilityModel } from '../../../models/widget-visibility.model'; import { WidgetVisibilityModel } from '../../../models/widget-visibility.model';
import { ContainerColumnModel } from './container-column.model'; import { ContainerColumnModel } from './container-column.model';
import { ErrorMessageModel } from './error-message.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 { isNumberValue } from './form-field-utils';
import { VariableConfig } from './form-field-variable-options'; import { VariableConfig } from './form-field-variable-options';
import { DataColumn } from '../../../../datatable/data/data-column.model'; import { DataColumn } from '../../../../datatable/data/data-column.model';
import { format, isValid, parse } from 'date-fns';
// Maps to FormFieldRepresentation // Maps to FormFieldRepresentation
export class FormFieldModel extends FormWidgetModel { export class FormFieldModel extends FormWidgetModel {
@@ -37,8 +37,8 @@ export class FormFieldModel extends FormWidgetModel {
private _isValid: boolean = true; private _isValid: boolean = true;
private _required: boolean = false; private _required: boolean = false;
readonly defaultDateFormat: string = 'D-M-YYYY'; readonly defaultDateFormat: string = 'd-M-yyyy';
readonly defaultDateTimeFormat: string = 'D-M-YYYY hh:mm A'; readonly defaultDateTimeFormat: string = 'd-M-yyyy hh:mm a';
// model members // model members
fieldType: string; fieldType: string;
@@ -340,12 +340,14 @@ export class FormFieldModel extends FormWidgetModel {
if (value) { if (value) {
let dateValue; let dateValue;
if (isNumberValue(value)) { if (isNumberValue(value)) {
dateValue = moment(value); dateValue = new Date(value);
} else { } 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()) { if (isValid(dateValue)) {
value = dateValue.utc().format(this.dateDisplayFormat); value = format(dateValue, this.dateDisplayFormat);
} }
} }
} }
@@ -414,12 +416,13 @@ export class FormFieldModel extends FormWidgetModel {
break; break;
case FormFieldTypes.DATE: case FormFieldTypes.DATE:
if (typeof this.value === 'string' && this.value === 'today') { 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); const dateValue = parse(this.value, this.dateDisplayFormat, new Date());
if (dateValue?.isValid()) {
this.form.values[this.id] = `${dateValue.format('YYYY-MM-DD')}T00:00:00.000Z`; if (isValid(dateValue)) {
this.form.values[this.id] = `${format(dateValue, 'yyyy-MM-dd')}T00:00:00.000Z`;
} else { } else {
this.form.values[this.id] = null; this.form.values[this.id] = null;
this._value = this.value; this._value = this.value;
@@ -427,13 +430,13 @@ export class FormFieldModel extends FormWidgetModel {
break; break;
case FormFieldTypes.DATETIME: case FormFieldTypes.DATETIME:
if (typeof this.value === 'string' && this.value === 'now') { 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); const dateTimeValue = parse(this.value, this.dateDisplayFormat, new Date());
if (dateTimeValue?.isValid()) {
/* cspell:disable-next-line */ if (isValid(dateTimeValue)) {
this.form.values[this.id] = `${dateTimeValue.utc().format('YYYY-MM-DDTHH:mm:ss')}.000Z`; this.form.values[this.id] = `${format(dateTimeValue, 'yyyy-MM-dd\'T\'HH:mm:ss')}.000Z`;
} else { } else {
this.form.values[this.id] = null; this.form.values[this.id] = null;
this._value = this.value; this._value = this.value;
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+1 -1
View File
@@ -25,7 +25,7 @@
<input <input
type="hidden" type="hidden"
[matDatetimepicker]="datetimePicker" [matDatetimepicker]="datetimePicker"
[value]="field.value | adfDate: DATE_TIME_FORMAT" [value]="field.value | adfDate: field.dateDisplayFormat"
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[disabled]="field.readOnly" [disabled]="field.readOnly"
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.spec.ts
+5 -5
View File
@@ -24,7 +24,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { FormFieldTypes } from '../core/form-field-types'; import { FormFieldTypes } from '../core/form-field-types';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { format, parse, parseISO } from 'date-fns'; import { format, parseISO } from 'date-fns';
describe('DateTimeWidgetComponent', () => { describe('DateTimeWidgetComponent', () => {
@@ -102,7 +102,7 @@ describe('DateTimeWidgetComponent', () => {
}); });
widget.field = field; 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); widget.onDateChanged(mockDate);
expect(widget.onFieldChanged).toHaveBeenCalledWith(field); expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
@@ -199,7 +199,7 @@ describe('DateTimeWidgetComponent', () => {
id: 'date-field-id', id: 'date-field-id',
name: 'date-name', name: 'date-name',
value: '12-30-9999 10:30 AM', value: '12-30-9999 10:30 AM',
dateDisplayFormat: 'MM-DD-YYYY HH:mm A', dateDisplayFormat: 'MM-dd-yyyy hh:mm a',
type: 'datetime', type: 'datetime',
readOnly: 'false' readOnly: 'false'
}); });
@@ -218,7 +218,7 @@ describe('DateTimeWidgetComponent', () => {
id: 'date-field-id', id: 'date-field-id',
name: 'date-name', name: 'date-name',
value: '12-30-9999 10:30 AM', value: '12-30-9999 10:30 AM',
dateDisplayFormat: 'MM-DD-YYYY HH:mm A', dateDisplayFormat: 'MM-dd-yyyy hh:mm a',
type: 'datetime', type: 'datetime',
readOnly: 'false' readOnly: 'false'
}); });
@@ -244,7 +244,7 @@ describe('DateTimeWidgetComponent', () => {
readOnly: 'false' readOnly: 'false'
}); });
field.isVisible = true; field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY HH:mm A'; field.dateDisplayFormat = 'MM-dd-yyyy hh:mm a';
widget.field = field; widget.field = field;
fixture.detectChanges(); fixture.detectChanges();
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.ts
+7 -6
View File
@@ -17,8 +17,8 @@
/* eslint-disable @angular-eslint/component-selector */ /* 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 { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core'; import { DatetimeAdapter, MAT_DATETIME_FORMATS } from '@mat-datetimepicker/core';
import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment'; import { MomentDatetimeAdapter, MAT_MOMENT_DATETIME_FORMATS } from '@mat-datetimepicker/moment';
import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service'; 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 { export class DateTimeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
DATE_TIME_FORMAT = 'd-M-yyyy hh:mm a';
minDate: string; minDate: string;
maxDate: string; maxDate: string;
@@ -54,7 +52,8 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
constructor(public formService: FormService, constructor(public formService: FormService,
private dateAdapter: DateAdapter<DateFnsAdapter>, private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService) { private userPreferencesService: UserPreferencesService,
@Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
super(formService); super(formService);
} }
@@ -64,6 +63,8 @@ export class DateTimeWidgetComponent extends WidgetComponent implements OnInit,
.pipe(takeUntil(this.onDestroy$)) .pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(locale)); .subscribe(locale => this.dateAdapter.setLocale(locale));
this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat;
if (this.field) { if (this.field) {
if (this.field.minValue) { if (this.field.minValue) {
this.minDate = format(parseISO(this.field.minValue), `yyyy-MM-dd'T'HH:mm:ssXXX`); 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) { onDateChanged(newDateValue) {
const date = new Date(newDateValue); const date = new Date(newDateValue);
if (isValid(date)) { if (isValid(date)) {
this.field.value = format(date, this.DATE_TIME_FORMAT); this.field.value = format(date, this.field.dateDisplayFormat);
} else { } else {
this.field.value = newDateValue; this.field.value = newDateValue;
} }
lib/core/src/lib/form/components/widgets/date/date.widget.html
+2 -2
View File
@@ -14,11 +14,11 @@
</mat-form-field> </mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget> <error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></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 <input
type="hidden" type="hidden"
[matDatepicker]="datePicker" [matDatepicker]="datePicker"
[value]="field.value | adfDate: DATE_FORMAT" [value]="field.value | adfDate: field.dateDisplayFormat"
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[disabled]="field.readOnly" [disabled]="field.readOnly"
lib/core/src/lib/form/components/widgets/date/date.widget.spec.ts
+6 -6
View File
@@ -22,7 +22,7 @@ import { DateWidgetComponent } from './date.widget';
import { CoreTestingModule } from '../../../../testing/core.testing.module'; import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { FormFieldTypes } from '../core/form-field-types'; import { FormFieldTypes } from '../core/form-field-types';
import { isSameDay, parse } from 'date-fns'; import { format, isSameDay, parse } from 'date-fns';
describe('DateWidgetComponent', () => { describe('DateWidgetComponent', () => {
@@ -103,7 +103,7 @@ describe('DateWidgetComponent', () => {
readOnly: 'false' readOnly: 'false'
}); });
widget.field = field; 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); expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
}); });
@@ -172,7 +172,7 @@ describe('DateWidgetComponent', () => {
readOnly: 'false' readOnly: 'false'
}); });
widget.field.isVisible = true; widget.field.isVisible = true;
widget.field.dateDisplayFormat = 'MM-DD-YYYY'; widget.field.dateDisplayFormat = 'MM-dd-yyyy';
fixture.detectChanges(); fixture.detectChanges();
@@ -180,7 +180,7 @@ describe('DateWidgetComponent', () => {
expect(dateElement.value).toContain('12-30-9999'); expect(dateElement.value).toContain('12-30-9999');
widget.field.value = '5-6-2019 00:00'; 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(); fixture.detectChanges();
@@ -188,7 +188,7 @@ describe('DateWidgetComponent', () => {
expect(dateElement.value).toContain('5-6-2019 00:00'); expect(dateElement.value).toContain('5-6-2019 00:00');
widget.field.value = '05.06.2019'; widget.field.value = '05.06.2019';
widget.field.dateDisplayFormat = 'DD.MM.YYYY'; widget.field.dateDisplayFormat = 'dd.MM.yyyy';
fixture.detectChanges(); fixture.detectChanges();
@@ -244,7 +244,7 @@ describe('DateWidgetComponent', () => {
readOnly: 'false' readOnly: 'false'
}); });
field.isVisible = true; field.isVisible = true;
field.dateDisplayFormat = 'MM-DD-YYYY'; field.dateDisplayFormat = 'MM-dd-yyyy';
widget.field = field; widget.field = field;
fixture.detectChanges(); fixture.detectChanges();
lib/core/src/lib/form/components/widgets/date/date.widget.ts
+7 -4
View File
@@ -18,8 +18,8 @@
/* eslint-disable @angular-eslint/component-selector */ /* eslint-disable @angular-eslint/component-selector */
import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service'; import { UserPreferencesService, UserPreferenceValues } from '../../../../common/services/user-preferences.service';
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 { FormService } from '../../../services/form.service'; import { FormService } from '../../../services/form.service';
import { WidgetComponent } from '../widget.component'; import { WidgetComponent } from '../widget.component';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@@ -59,7 +59,8 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe
constructor(public formService: FormService, constructor(public formService: FormService,
private dateAdapter: DateAdapter<DateFnsAdapter>, private dateAdapter: DateAdapter<DateFnsAdapter>,
private userPreferencesService: UserPreferencesService) { private userPreferencesService: UserPreferencesService,
@Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
super(formService); super(formService);
} }
@@ -69,6 +70,8 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit, OnDe
.pipe(takeUntil(this.onDestroy$)) .pipe(takeUntil(this.onDestroy$))
.subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale))); .subscribe(locale => this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale)));
this.dateFormatConfig.display.dateInput = this.field.dateDisplayFormat;
if (this.field) { if (this.field) {
this.minDate = isValid(this.field.minValue) ? format(new Date(this.field.minValue), this.DATE_FORMAT) : this.field.minValue; 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; 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) { onDateChanged(newDateValue) {
const date = new Date(newDateValue); const date = new Date(newDateValue);
if (isValid(date)) { if (isValid(date)) {
this.field.value = format(date, this.DATE_FORMAT); this.field.value = format(date, this.field.dateDisplayFormat);
} else { } else {
this.field.value = newDateValue; this.field.value = newDateValue;
} }