feat(formatters): add dateSeparator Formatter Option

- user can customize and choose a different date separator instead of the default one
- example:: this.gridOptions = { formatterOptions: { dateSeparator: '.' }};

Author: Ghislain Beaulac

src/app/examples/grid-formatter.component.ts

@@ -46,7 +46,13 @@ export class GridFormatterComponent implements OnInit {
       },
       enableAutoResize: true,
       enableCellNavigation: true,
-      enableExcelCopyBuffer: true
+      enableExcelCopyBuffer: true,
+      // you customize the date separator through "formatterOptions"
+      /*
+      formatterOptions: {
+        dateSeparator: '.'
+      },
+      */
     };
 
     // mock a dataset

src/app/modules/angular-slickgrid/formatters/__tests__/formatterUtilities.spec.ts

@@ -0,0 +1,65 @@
+import { getAssociatedDateFormatter, getValueFromParamsOrGridOptions } from '../formatterUtilities';
+import { FieldType, Column, GridOption } from '../../models';
+
+describe('formatterUtilities', () => {
+  const gridStub = {
+    getOptions: jest.fn()
+  };
+
+  describe('getValueFromParamsOrGridOptions method', () => {
+    it('should return options found in the Grid Option when not found in Column Definition "params" property', () => {
+      const gridOptions = { formatterOptions: { minDecimal: 2 } } as GridOption;
+      const gridSpy = gridStub.getOptions.mockReturnValue(gridOptions);
+
+      const output = getValueFromParamsOrGridOptions('minDecimal', {} as Column, gridStub, -1);
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(output).toBe(2);
+    });
+
+    it('should return options found in the Column Definition "params" even if exist in the Grid Option as well', () => {
+      const gridOptions = { formatterOptions: { minDecimal: 2 } } as GridOption;
+      const gridSpy = gridStub.getOptions.mockReturnValue(gridOptions);
+
+      const output = getValueFromParamsOrGridOptions('minDecimal', { params: { minDecimal: 3 } } as Column, gridStub, -1);
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(output).toBe(3);
+    });
+
+    it('should return default value when not found in "params" (columnDef) neither the "formatterOptions" (gridOption)', () => {
+      const defaultValue = 5;
+      const output = getValueFromParamsOrGridOptions('minDecimal', { field: 'column1' } as Column, {}, defaultValue);
+      expect(output).toBe(defaultValue);
+    });
+  });
+
+  describe('getAssociatedDateFormatter method', () => {
+    it('should return a Formatter function', () => {
+      const formatterFn = getAssociatedDateFormatter(FieldType.dateIso, '-');
+      const isFunction = typeof formatterFn === 'function';
+      expect(isFunction).toBe(true);
+    });
+
+    it('should return a formatted Date when calling the Formatter function', () => {
+      const formatterFn = getAssociatedDateFormatter(FieldType.dateIso, '-');
+      const gridSpy = jest.spyOn(gridStub, 'getOptions');
+
+      const output = formatterFn(1, 1, '2002-01-01T00:01:01', { type: FieldType.dateIso } as Column, {}, gridStub);
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(output).toBe('2002-01-01');
+    });
+
+    it('should return a formatted Date with a different separator when changing setting the "dateSeparator" in "formatterOptions"', () => {
+      const formatterFn = getAssociatedDateFormatter(FieldType.dateIso, '-');
+      const gridOptions = { formatterOptions: { dateSeparator: '.' } } as GridOption;
+      const gridSpy = gridStub.getOptions.mockReturnValue(gridOptions);
+
+      const output = formatterFn(1, 1, '2002-01-01T00:01:01', { type: FieldType.dateIso } as Column, {}, gridStub);
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(output).toBe('2002.01.01');
+    });
+  });
+});

src/app/modules/angular-slickgrid/formatters/formatterUtilities.ts

@@ -22,11 +22,23 @@ export function getValueFromParamsOrGridOptions(optionName: string, columnDef: C
 }
 
 /** From a FieldType, return the associated date Formatter */
-export function getAssociatedDateFormatter(fieldType: FieldType): Formatter {
-  const FORMAT = mapMomentDateFormatWithFieldType(fieldType);
+export function getAssociatedDateFormatter(fieldType: FieldType, defaultSeparator: string): Formatter {
+  const defaultDateFormat = mapMomentDateFormatWithFieldType(fieldType);
 
-  return (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
-    const isDateValid = moment(value, FORMAT, false).isValid();
-    return (value && isDateValid) ? moment(value).format(FORMAT) : value;
+  return (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {
+    const gridOptions = ((grid && typeof grid.getOptions === 'function') ? grid.getOptions() : {}) as GridOption;
+    const customSeparator = gridOptions && gridOptions.formatterOptions && gridOptions.formatterOptions.dateSeparator || defaultSeparator;
+
+    const isDateValid = moment(value, defaultDateFormat, false).isValid();
+    let outputDate = (value && isDateValid) ? moment(value).format(defaultDateFormat) : value;
+
+    // user can customize the separator through the "formatterOptions"
+    // if that is the case we need to replace the default "/" to the new separator
+    if (outputDate && customSeparator !== defaultSeparator) {
+      const regex = new RegExp(defaultSeparator, 'ig'); // find separator globally
+      outputDate = outputDate.replace(regex, customSeparator);
+    }
+
+    return outputDate;
   };
 }

src/app/modules/angular-slickgrid/formatters/index.ts

@@ -82,40 +82,40 @@ export const Formatters = {
   collectionEditor: collectionEditorFormatter,
 
   /** Takes a Date object and displays it as an ISO Date format (YYYY-MM-DD) */
-  dateIso: getAssociatedDateFormatter(FieldType.dateIso),
+  dateIso: getAssociatedDateFormatter(FieldType.dateIso, '-'),
 
   /** Takes a Date object and displays it as an ISO Date+Time format (YYYY-MM-DD HH:mm:ss) */
-  dateTimeIso: getAssociatedDateFormatter(FieldType.dateTimeIso),
+  dateTimeIso: getAssociatedDateFormatter(FieldType.dateTimeIso, '-'),
 
   /** Takes a Date object and displays it as an ISO Date+Time (without seconds) format (YYYY-MM-DD HH:mm) */
-  dateTimeShortIso: getAssociatedDateFormatter(FieldType.dateTimeShortIso),
+  dateTimeShortIso: getAssociatedDateFormatter(FieldType.dateTimeShortIso, '-'),
 
   /** Takes a Date object and displays it as an ISO Date+Time+(am/pm) format (YYYY-MM-DD h:mm:ss a) */
-  dateTimeIsoAmPm: getAssociatedDateFormatter(FieldType.dateTimeIsoAmPm),
+  dateTimeIsoAmPm: getAssociatedDateFormatter(FieldType.dateTimeIsoAmPm, '-'),
 
   /** Takes a Date object and displays it as an Euro Date format (DD/MM/YYYY) */
-  dateEuro: getAssociatedDateFormatter(FieldType.dateEuro),
+  dateEuro: getAssociatedDateFormatter(FieldType.dateEuro, '/'),
 
   /** Takes a Date object and displays it as an Euro Date+Time format (DD/MM/YYYY HH:mm:ss) */
-  dateTimeEuro: getAssociatedDateFormatter(FieldType.dateTimeEuro),
+  dateTimeEuro: getAssociatedDateFormatter(FieldType.dateTimeEuro, '/'),
 
   /** Takes a Date object and displays it as an Euro Date+Time (without seconds) format (DD/MM/YYYY HH:mm) */
-  dateTimeShortEuro: getAssociatedDateFormatter(FieldType.dateTimeShortEuro),
+  dateTimeShortEuro: getAssociatedDateFormatter(FieldType.dateTimeShortEuro, '/'),
 
   /** Takes a Date object and displays it as an Euro Date+Time+(am/pm) format (DD/MM/YYYY hh:mm:ss a) */
-  dateTimeEuroAmPm: getAssociatedDateFormatter(FieldType.dateTimeEuroAmPm),
+  dateTimeEuroAmPm: getAssociatedDateFormatter(FieldType.dateTimeEuroAmPm, '/'),
 
   /** Takes a Date object and displays it as an US Date format (MM/DD/YYYY) */
-  dateUs: getAssociatedDateFormatter(FieldType.dateUs),
+  dateUs: getAssociatedDateFormatter(FieldType.dateUs, '/'),
 
   /** Takes a Date object and displays it as an US Date+Time format (MM/DD/YYYY HH:mm:ss) */
-  dateTimeUs: getAssociatedDateFormatter(FieldType.dateTimeUs),
+  dateTimeUs: getAssociatedDateFormatter(FieldType.dateTimeUs, '/'),
 
   /** Takes a Date object and displays it as an US Date+Time (without seconds) format (MM/DD/YYYY HH:mm:ss) */
-  dateTimeShortUs: getAssociatedDateFormatter(FieldType.dateTimeShortUs),
+  dateTimeShortUs: getAssociatedDateFormatter(FieldType.dateTimeShortUs, '/'),
 
   /** Takes a Date object and displays it as an US Date+Time+(am/pm) format (MM/DD/YYYY hh:mm:ss a) */
-  dateTimeUsAmPm: getAssociatedDateFormatter(FieldType.dateTimeUsAmPm),
+  dateTimeUsAmPm: getAssociatedDateFormatter(FieldType.dateTimeUsAmPm, '/'),
 
   /** Displays a Font-Awesome delete icon (fa-trash) */
   deleteIcon: deleteIconFormatter,

src/app/modules/angular-slickgrid/models/formatterOption.interface.ts

@@ -1,10 +1,13 @@
 export interface FormatterOption {
-  /** defaults to false, option to display negative numbers in parentheses, example: -$12.50 becomes ($12.50) */
+  /** What separator to use to display a Date, for example using "." it could be "2002.01.01" */
+  dateSeparator?: '/' | '-' | '.' | ' ';
+
+  /** Defaults to false, option to display negative numbers wrapped in parentheses, example: -$12.50 becomes ($12.50) */
   displayNegativeNumberWithParentheses?: boolean;
 
-  /** defaults to undefined, minimum number of decimals */
+  /** Defaults to undefined, minimum number of decimals */
   minDecimal?: number;
 
-  /** defaults to undefined, maximum number of decimals */
+  /** Defaults to undefined, maximum number of decimals */
   maxDecimal?: number;
 }