fix(formatters): date formatters should accept ISO input & output to US

examples/webpack-demo-vanilla-bundle/webpack.config.js

@@ -39,7 +39,7 @@ module.exports = ({ production } = {}, { hmr, port, host } = {}) => ({
     extensions: ['.ts', '.js'],
     modules: [srcDir, 'node_modules'],
     alias: {
-      moment$: 'moment/moment.js'
+      moment: 'moment/moment.js'
     }
   },
   module: {

packages/common/src/formatters/__tests__/dateEuroFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateEuro Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 00:00:01';
+    const result = Formatters.dateEuro(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('03/05/2019');
+  });
+
   it('should return a formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-03T00:00:01');
     const result = Formatters.dateEuro(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateIsoFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the Date ISO Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 00:00:01';
+    const result = Formatters.dateIso(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('2019-05-03');
+  });
+
   it('should return a formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-03T00:00:01');
     const result = Formatters.dateIso(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeEuroAmPmFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeShortEuro Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeEuroAmPm(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('01/05/2019 02:36:07 am');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeEuroAmPm(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeEuroFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeEuro Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeEuro(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('01/05/2019 02:36:07');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeEuro(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeIsoAmPmFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeIsoAmPm Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeIsoAmPm(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('2019-05-01 02:36:07 am');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeIsoAmPm(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeIsoFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeIso Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeIso(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('2019-05-01 02:36:07');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeIso(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeShortEuroFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeShortEuro Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeShortEuro(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('01/05/2019 02:36');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeShortEuro(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeShortIsoFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeShortIso Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-01 02:36:07';
+    const result = Formatters.dateTimeShortIso(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('2019-05-01 02:36');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeShortIso(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeShortUsFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeShortUs Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 02:36:07';
+    const result = Formatters.dateTimeShortUs(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('05/03/2019 02:36');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeShortUs(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeUsAmPmFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeShortUs Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 02:36:07';
+    const result = Formatters.dateTimeUsAmPm(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('05/03/2019 02:36:07 am');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeUsAmPm(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateTimeUsFormatter.spec.ts

@@ -14,6 +14,12 @@ describe('the DateTimeUs Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03 02:36:07';
+    const result = Formatters.dateTimeUs(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('05/03/2019 02:36:07');
+  });
+
   it('should return a formatted date value in the morning when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateTimeUs(0, 0, value, {} as Column, {});

packages/common/src/formatters/__tests__/dateUsFormatter.spec.ts

@@ -14,13 +14,19 @@ describe('the DateUs Formatter', () => {
     expect(result).toBe('TBD');
   });
 
+  it('should provide a dateIso formatted input and return a formatted date value without time when valid date value is provided', () => {
+    const value = '2019-05-03';
+    const result = Formatters.dateUs(0, 0, value, { input: 'dateIso' } as unknown as Column, {});
+    expect(result).toBe('05/03/2019');
+  });
+
   it('should return a formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-03T00:00:01');
     const result = Formatters.dateUs(0, 0, value, {} as Column, {});
     expect(result).toBe('05/03/2019');
   });
 
-  it('should return a formatted date value without time when valid date value is provided', () => {
+  it('should return a second formatted date value without time when valid date value is provided', () => {
     const value = new Date('2019-05-01T02:36:07');
     const result = Formatters.dateUs(0, 0, value, {} as Column, {});
     expect(result).toBe('05/01/2019');

packages/common/src/formatters/formatterUtilities.ts

@@ -29,9 +29,11 @@ export function getAssociatedDateFormatter(fieldType: typeof FieldType[keyof typ
   return (_row: number, _cell: number, value: any, columnDef: Column, _dataContext: any, grid: SlickGrid) => {
     const gridOptions = ((grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {}) as GridOption;
     const customSeparator = gridOptions?.formatterOptions?.dateSeparator ?? defaultSeparator;
+    const inputType = columnDef?.type ?? 'date';
+    const inputDateFormat = mapMomentDateFormatWithFieldType(inputType);
     const isParsingAsUtc = columnDef?.params?.parseDateAsUtc ?? false;
 
-    const isDateValid = moment(value, defaultDateFormat, false).isValid();
+    const isDateValid = moment(value, inputDateFormat, false).isValid();
     let outputDate = value;
     if (value && isDateValid) {
       outputDate = isParsingAsUtc ? moment.utc(value).format(defaultDateFormat) : moment(value).format(defaultDateFormat);

packages/vanilla-bundle/webpack.config.js

@@ -35,7 +35,7 @@ module.exports = ({ production } = {}) => ({
     mainFields: production ? ['module', 'main'] : ['browser', 'module', 'main'],
     alias: {
       dompurify: 'dompurify/dist/purify.es.js',
-      moment$: 'moment/moment.js'
+      moment: 'moment/moment.js'
     }
   },
   module: {