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,
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.
*/
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();
});
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 */
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 <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) {
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 <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) {
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;
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.
*/
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);
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 */
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;
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+1 -1
View File
@@ -25,7 +25,7 @@
<input
type="hidden"
[matDatetimepicker]="datetimePicker"
[value]="field.value | adfDate: DATE_TIME_FORMAT"
[value]="field.value | adfDate: field.dateDisplayFormat"
[min]="minDate"
[max]="maxDate"
[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 { FormFieldTypes } from '../core/form-field-types';
import { By } from '@angular/platform-browser';
import { format, parse, parseISO } from 'date-fns';
import { format, parseISO } from 'date-fns';
describe('DateTimeWidgetComponent', () => {
@@ -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();
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 */
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<DateFnsAdapter>,
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;
}
lib/core/src/lib/form/components/widgets/date/date.widget.html
+2 -2
View File
@@ -14,11 +14,11 @@
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfDate: DATE_FORMAT" [disabled]="field.readOnly"></mat-datepicker>
<mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfDate: field.dateDisplayFormat" [disabled]="field.readOnly"></mat-datepicker>
<input
type="hidden"
[matDatepicker]="datePicker"
[value]="field.value | adfDate: DATE_FORMAT"
[value]="field.value | adfDate: field.dateDisplayFormat"
[min]="minDate"
[max]="maxDate"
[disabled]="field.readOnly"
lib/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 { TranslateModule } from '@ngx-translate/core';
import { FormFieldTypes } from '../core/form-field-types';
import { isSameDay, parse } from 'date-fns';
import { format, isSameDay, parse } from 'date-fns';
describe('DateWidgetComponent', () => {
@@ -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();
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 */
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<DateFnsAdapter>,
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;
}