diff --git a/e2e/process-services/dynamic-table-date-picker.e2e.ts b/e2e/process-services/dynamic-table-date-picker.e2e.ts
index 3a2ba5df73..5751d05452 100644
--- a/e2e/process-services/dynamic-table-date-picker.e2e.ts
+++ b/e2e/process-services/dynamic-table-date-picker.e2e.ts
@@ -67,9 +67,10 @@ describe('Dynamic Table', () => {
const app = resources.Files.DYNAMIC_TABLE_APP;
const randomText = {
- date: 'HELLO WORLD',
+ date: '12/12/2012',
+ wrongDate: 'HELLO WORLD',
dateTime: 'Test',
- error: `Field 'columnDate' is required.`
+ error: `Invalid 'columnDate' format.`
};
const rowPosition = 0;
@@ -111,7 +112,7 @@ describe('Dynamic Table', () => {
it('[C286279] Should be able to save row with Date field', () => {
widget.dynamicTable().clickAddButton();
- widget.dynamicTable().addRandomStringOnDate(randomText.date);
+ widget.dynamicTable().addRandomStringOnDate(randomText.wrongDate);
widget.dynamicTable().clickSaveButton();
expect(widget.dynamicTable().checkErrorMessage()).toBe(randomText.error);
diff --git a/lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts b/lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts
index 73a650b361..baae431d3b 100644
--- a/lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts
+++ b/lib/core/form/components/widgets/dynamic-table/date-cell-validator-model.ts
@@ -37,7 +37,12 @@ export class DateCellValidator implements CellValidator {
if (this.isSupported(column)) {
const value = row.value[column.id];
- const dateValue = moment(value, 'D-M-YYYY');
+
+ if (!value && !column.required) {
+ return true;
+ }
+
+ const dateValue = moment(value, 'YYYY-MM-DDTHH:mm:ss.SSSSZ', true);
if (!dateValue.isValid()) {
if (summary) {
summary.isValid = false;
diff --git a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html
index 43d556212d..b6bd7b1347 100644
--- a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html
+++ b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.html
@@ -1,6 +1,6 @@
-
+
diff --git a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts
index 7c4b57a5cc..d1c8b782c4 100644
--- a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts
+++ b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.spec.ts
@@ -16,15 +16,16 @@
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import moment from 'moment-es6';
import { FormFieldModel, FormModel } from '../../../index';
-import { DynamicTableColumn } from './../../dynamic-table-column.model';
-import { DynamicTableRow } from './../../dynamic-table-row.model';
+import { DynamicTableColumn } from './../../dynamic-table-column.model';
+import { DynamicTableRow } from './../../dynamic-table-row.model';
import { DynamicTableModel } from './../../dynamic-table.widget.model';
import { DateEditorComponent } from './date.editor';
import { setupTestBed } from '../../../../../../testing/setupTestBed';
import { CoreModule } from '../../../../../../core.module';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
+import { MatDatepickerInputEvent } from '@angular/material';
describe('DateEditorComponent', () => {
let component: DateEditorComponent;
@@ -59,31 +60,90 @@ describe('DateEditorComponent', () => {
expect(fixture.componentInstance instanceof DateEditorComponent).toBe(true, 'should create DateEditorComponent');
});
- it('should update fow value on change', () => {
- component.ngOnInit();
- const newDate = moment('14-03-1879', 'DD-MM-YYYY');
- component.onDateChanged(newDate);
- expect(row.value[column.id]).toBe('1879-03-14T00:00:00.000Z');
+ describe('using Date Piker', () => {
+ it('should update row value on change', () => {
+ const input =
> {value: '14-03-2016' };
+
+ component.ngOnInit();
+ component.onDateChanged(input);
+
+ const actual = row.value[column.id];
+ expect(actual).toBe('2016-03-14T00:00:00.000Z');
+ });
+
+ it('should flush value on user input', () => {
+ spyOn(table, 'flushValue').and.callThrough();
+ const input = > {value: '14-03-2016' };
+
+ component.ngOnInit();
+ component.onDateChanged(input);
+
+ expect(table.flushValue).toHaveBeenCalled();
+ });
});
- it('should update row value upon user input', () => {
- const input = {value: '14-03-2016' };
+ describe('user manual input', () => {
- component.ngOnInit();
- component.onDateChanged(input);
+ beforeEach(() => {
+ spyOn(component, 'onDateChanged').and.callThrough();
+ spyOn(table, 'flushValue').and.callThrough();
+ });
- const actual = row.value[column.id];
- expect(actual).toBe('2016-03-14T00:00:00.000Z');
- });
+ it('should update row value upon user input', () => {
+ const inputElement = fixture.debugElement.query(By.css('input'));
+ inputElement.nativeElement.value = '14-03-1879';
+ inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+ fixture.detectChanges();
- it('should flush value on user input', () => {
- spyOn(table, 'flushValue').and.callThrough();
- const input = {value: '14-03-2016' };
+ expect(component.onDateChanged).toHaveBeenCalled();
+ const actual = row.value[column.id];
+ expect(actual).toBe('1879-03-14T00:00:00.000Z');
+ });
- component.ngOnInit();
- component.onDateChanged(input);
+ it('should flush value on user input', () => {
+ const inputElement = fixture.debugElement.query(By.css('input'));
+ inputElement.nativeElement.value = '14-03-1879';
+ inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+ fixture.detectChanges();
+
+ expect(table.flushValue).toHaveBeenCalled();
+ });
+
+ it('should not flush value when user input is wrong', () => {
+ const inputElement = fixture.debugElement.query(By.css('input'));
+ inputElement.nativeElement.value = 'ab-bc-de';
+ inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+
+ fixture.detectChanges();
+ expect(table.flushValue).not.toHaveBeenCalled();
+
+ inputElement.nativeElement.value = '12';
+ inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+ fixture.detectChanges();
+ expect(table.flushValue).not.toHaveBeenCalled();
+
+ inputElement.nativeElement.value = '12-11';
+ inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+ fixture.detectChanges();
+ expect(table.flushValue).not.toHaveBeenCalled();
+
+ inputElement.nativeElement.value = '12-13-12';
+ inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+ fixture.detectChanges();
+ expect(table.flushValue).not.toHaveBeenCalled();
+ });
+
+ it('should remove the date when user removes manually', () => {
+ const inputElement = fixture.debugElement.query(By.css('input'));
+ inputElement.nativeElement.value = '';
+ inputElement.nativeElement.dispatchEvent(new Event('focusout'));
+ fixture.detectChanges();
+
+ expect(component.onDateChanged).toHaveBeenCalled();
+ const actual = row.value[column.id];
+ expect(actual).toBe('');
+ });
- expect(table.flushValue).toHaveBeenCalled();
});
});
diff --git a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts
index 1d7129e5d9..b6b58e3c1c 100644
--- a/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts
+++ b/lib/core/form/components/widgets/dynamic-table/editors/date/date.editor.ts
@@ -22,7 +22,7 @@ import { UserPreferencesService, UserPreferenceValues } from '../../../../../../
import { MomentDateAdapter } from '../../../../../../utils/momentDateAdapter';
import { MOMENT_DATE_FORMATS } from '../../../../../../utils/moment-date-formats.model';
import { Component, Input, OnInit } from '@angular/core';
-import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
+import { DateAdapter, MAT_DATE_FORMATS, MatDatepickerInputEvent } from '@angular/material';
import moment from 'moment-es6';
import { Moment } from 'moment';
import { DynamicTableColumn } from './../../dynamic-table-column.model';
@@ -67,19 +67,23 @@ export class DateEditorComponent implements OnInit {
const momentDateAdapter = this.dateAdapter;
momentDateAdapter.overrideDisplayFormat = this.DATE_FORMAT;
- this.value = moment(this.table.getCellValue(this.row, this.column), 'YYYY-MM-DD');
+ this.value = moment(this.table.getCellValue(this.row, this.column), this.DATE_FORMAT);
}
- onDateChanged(newDateValue) {
+ onDateChanged(newDateValue: MatDatepickerInputEvent | HTMLInputElement) {
if (newDateValue && newDateValue.value) {
+ /* validates the user inputs */
const momentDate = moment(newDateValue.value, this.DATE_FORMAT, true);
if (!momentDate.isValid()) {
- this.row.value[this.column.id] = '';
+ this.row.value[this.column.id] = newDateValue.value;
} else {
this.row.value[this.column.id] = `${momentDate.format('YYYY-MM-DD')}T00:00:00.000Z`;
this.table.flushValue();
}
+ } else {
+ /* removes the date */
+ this.row.value[this.column.id] = '';
}
}