feat(grid): expose editorOptions for the default editors and improve built-in editing for date/time cols (input formats) (#14465)

* feat(date-time-util): logic to identify numeric formats for editing

* chore(date-time-util): formatting fixes

* fix(esf-styles): small margin fix for time picker

* feat(grid-interface): add editorOptions property on the ColumnType and FieldType

* feat(grid-column): get/set editorOptions and dateTimeFormat

* feat(grid-cells): use editorOptions.dateTimeFormat; add locale where missing

* feat(grid-filters): use editorOptions.dateTimeFormat and locale on filter inputs

* feat(docs): add defaultFormatType info to Changelog

---------

Co-authored-by: Stamen Stoychev <[email protected]>

Author: ddaribo

CHANGELOG.md

@@ -12,6 +12,29 @@ All notable changes for each version of this project will be documented in this
 - `IgxCarousel`
     - Added support for vertical alignment. Can be configured via the `vertical` property. Defaults to `false`.
     - Added support for showing/hiding the indicator controls (dots). Can be configured via the `indicators` property. Defaults to `true`.
+- `ColumnType`, `IgxColumn`
+    - The built-in editors for columns of type `date`, `dateTime` and `time` now use a default input format as per the `IgxGrid`'s `locale`. This is valid both for cell editors and the ones in the filtering UI for all modes - `quickFilter`, `excelStyle` and the Advanced filtering.
+    - In case the `pipeArgs.displayFormat` property of a date-time column is set and contains only numeric date-time parts or such that can be handled by the editors, the built-in editors input format is inferred from it.
+    - To configure the built-in editors, a new `editorOptions` property is added that allows to pass optional parameters. Accepts an `IColumnEditorOptions` object with the `dateTimeFormat` property, that is used as input format for the editors of
+    `date`, `dateTime` and `time` column data types:
+        ```ts
+            const editorOptions: IColumnEditorOptions = { Field?
+                dateTimeFormat: 'MM/dd/YYYY',
+            }
+        ```
+        ```html
+            <igx-column field="sampleDate" dataType="date" [editorOptions]="editorOptions"></igx-column>
+        ```
+- `FieldType` (`IgxQueryBuilder`)
+    - Similar to the above, the fields now accept an `editorOptions` object of type `IFieldEditorOptions`. Its `dateTimeFormat` property is used as input format for the query editors of date-time fields.
+- `IgxDateTimeEditor`, `IgxDatePicker`, `IgxTimePicker`, `IgxDateRangePicker`
+    - In case the `inputFormat` property is not set, the input format is inferred from
+    `displayFormat` if set and if it contains only numeric date-time parts.
+- `IgxTimePicker`
+    - The input and display formats are now adjusted based on the locale. For instance, day period time part (AM/PM or a/p) would not be displayed for locales that do not require it.
+- `IgxDateTimeEditor`
+    - Added a new `defaultFormatType` property (`date` | `time` | `dateTime`) which configures the date-time parts
+    according to the target type that the editor mask includes. Defaults to `date`.
 
 ### Themes
 - `Palettes`

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -678,7 +678,8 @@
             margin: rem(16px) 0;
 
             ~ igx-input-group,
-            ~ igx-date-picker {
+            ~ igx-date-picker,
+            ~ igx-time-picker {
                 margin-inline-start: rem(16px);
             }
         }

projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts

@@ -29,7 +29,6 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
      *
      * @remarks
      * Also used as a placeholder when none is provided.
-     * Default is `"'MM/dd/yyyy'"`
      *
      * @example
      * ```html

projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts

@@ -1,5 +1,6 @@
 import { DateTimeUtil } from './date-time.util';
 import { DatePart, DatePartInfo } from '../../directives/date-time-editor/date-time-editor.common';
+import { DataType } from '../../data-operations/data-util';
 
 const reduceToDictionary = (parts: DatePartInfo[]) => parts.reduce((obj, x) => {
     obj[x.type] = x;
@@ -233,6 +234,28 @@ describe(`DateTimeUtil Unit tests`, () => {
         expect(result).toEqual('MM/dd/yyyy');
     });
 
+    it('should properly build input formats based on locale for dateTime data type ', () => {
+        let result = DateTimeUtil.getDefaultInputFormat('en-US', DataType.DateTime);
+        expect(result.normalize('NFKC')).toEqual('MM/dd/yyyy, hh:mm:ss tt');
+
+        result = DateTimeUtil.getDefaultInputFormat('bg-BG', DataType.DateTime);
+        expect(result.normalize('NFKC')).toEqual('dd.MM.yyyy г., HH:mm:ss');
+
+        result = DateTimeUtil.getDefaultInputFormat('fr-FR', DataType.DateTime);
+        expect(result).toEqual('dd/MM/yyyy HH:mm:ss');
+    });
+
+    it('should properly build input formats based on locale for time data type ', () => {
+        let result = DateTimeUtil.getDefaultInputFormat('en-US', DataType.Time);
+        expect(result.normalize('NFKC')).toEqual('hh:mm tt');
+
+        result = DateTimeUtil.getDefaultInputFormat('bg-BG', DataType.Time);
+        expect(result.normalize('NFKC')).toEqual('HH:mm');
+
+        result = DateTimeUtil.getDefaultInputFormat('fr-FR', DataType.Time);
+        expect(result).toEqual('HH:mm');
+    });
+
     it('should correctly distinguish date from time characters', () => {
         expect(DateTimeUtil.isDateOrTimeChar('d')).toBeTrue();
         expect(DateTimeUtil.isDateOrTimeChar('M')).toBeTrue();
@@ -628,4 +651,59 @@ describe(`DateTimeUtil Unit tests`, () => {
         expect(DateTimeUtil.isValidDate(false)).toBeFalse();
         expect(DateTimeUtil.isValidDate(true)).toBeFalse();
     });
+
+    it('should correctly identify formats that would resolve to only numeric parts (and period) for the date/time parts', () => {
+        // test with locale covering non-ASCII characters as well
+        const locale = 'bg';
+
+        const numericFormats = ['y', 'yy', 'yyy', 'yyyy', 'M', 'MM', 'd', 'dd', 'h', 'hh',
+            'H', 'HH', 'm', 'mm', 's', 'ss', 'S', 'SS', 'SSS',
+            'dd-MM-yyyy', 'dd/M/yyyy HH:mm:ss tt', 'dd/M/yyyy HH:mm:ss:SS a',
+            // literals are allowed in the format
+            'dd/MM/yyyy test hh:mm'
+        ];
+        numericFormats.forEach(format => {
+            expect(DateTimeUtil.isFormatNumeric(locale, format)).withContext(`Format: ${format}`).toBeTrue();
+        });
+
+        const nonNumericFormats = ['MMM', 'MMMM', 'MMMMM', 'medium', 'long', 'full', 'mediumDate',
+            'longDate', 'fullDate', 'longTime', 'fullTime', 'dd-MMM-yyyy', 'E', 'EE'];
+
+        nonNumericFormats.forEach(format => {
+            expect(DateTimeUtil.isFormatNumeric(locale, format)).withContext(`Format: ${format}`).toBeFalse();
+        });
+    });
+
+    it('getNumericInputFormat should return formats with date parts that the date-time editors can handle', () => {
+        let locale = 'en-US';
+
+        // returns the equivalent of the predefined numeric formats as date parts
+        // should be transformed as inputFormats for editing (numeric year, 2-digit parts for the rest)
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'short')).toBe('MM/dd/yyyy, hh:mm tt');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'shortDate')).toBe('MM/dd/yyyy');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'shortTime').normalize('NFKD')).toBe('hh:mm tt');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'mediumTime').normalize('NFKD')).toBe('hh:mm:ss tt');
+
+        // handle the predefined formats for different locales
+        locale = 'bg-BG';
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'short').normalize('NFKD')).toBe('dd.MM.yyyy г., HH:mm');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'shortDate').normalize('NFKD')).toBe('dd.MM.yyyy г.');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'shortTime').normalize('NFKD')).toBe('HH:mm');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'mediumTime').normalize('NFKD')).toBe('HH:mm:ss');
+
+        locale = 'ja-JP';
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'short')).toBe('yyyy/MM/dd HH:mm');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'shortDate')).toBe('yyyy/MM/dd');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'shortTime').normalize('NFKD')).toBe('HH:mm');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'mediumTime').normalize('NFKD')).toBe('HH:mm:ss');
+
+        // returns the same format if it is custom and numeric
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'dd-MM-yyyy')).toBe('dd-MM-yyyy');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'dd/M/yyyy hh:mm:ss:SS aa')).toBe('dd/M/yyyy hh:mm:ss:SS aa');
+
+        // returns empty string if predefined and not among the numeric ones
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'medium')).toBe('');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'mediumDate')).toBe('');
+        expect(DateTimeUtil.getNumericInputFormat(locale, 'longTime')).toBe('');
+    });
 });