test(date-range-picker): improve coverage and refactor #5732 (#7647)

Authored-by: Boris <jackofdiamond596@gmail.com>
Plamena Miteva

projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts

@@ -1,5 +1,6 @@
 import { isIE } from '../core/utils';
 import { DatePart, DatePartInfo } from '../directives/date-time-editor/date-time-editor.common';
+import { formatDate, FormatWidth, getLocaleDateFormat } from '@angular/common';
 
 /**
  * This enum is used to keep the date validation result.
@@ -48,7 +49,7 @@ export abstract class DatePickerUtil {
 
 
     /**
-     *  TODO: Unit tests for all public methods.
+     *  TODO: (in issue #6483) Unit tests and docs for all public methods.
      */
 
 
@@ -147,6 +148,38 @@ export abstract class DatePickerUtil {
         return DatePickerUtil.getMask(parts);
     }
 
+    public static formatDate(value: number | Date, format: string, locale: string, timezone?: string): string {
+        let formattedDate: string;
+        try {
+            formattedDate = formatDate(value, format, locale, timezone);
+        } catch {
+            this.logMissingLocaleSettings(locale);
+            const formatter = new Intl.DateTimeFormat(locale);
+            formattedDate = formatter.format(value);
+        }
+
+        return formattedDate;
+    }
+
+    public static getLocaleDateFormat(locale: string, displayFormat?: string): string {
+        const formatKeys = Object.keys(FormatWidth) as (keyof FormatWidth)[];
+        const targetKey = formatKeys.find(k => k.toLowerCase() === displayFormat?.toLowerCase().replace('date', ''));
+        if (!targetKey) {
+            // if displayFormat is not shortDate, longDate, etc.
+            // or if it is not set by the user
+            return displayFormat;
+        }
+        let format: string;
+        try {
+            format = getLocaleDateFormat(locale, FormatWidth[targetKey]);
+        } catch {
+            this.logMissingLocaleSettings(locale);
+            format = DatePickerUtil.getDefaultInputFormat(locale);
+        }
+
+        return format;
+    }
+
     public static isDateOrTimeChar(char: string): boolean {
         return DATE_CHARS.indexOf(char) !== -1 || TIME_CHARS.indexOf(char) !== -1;
     }
@@ -303,6 +336,11 @@ export abstract class DatePickerUtil {
         return _value.getTime() < _minValue.getTime();
     }
 
+    private static logMissingLocaleSettings(locale: string): void {
+        console.warn(`Missing locale data for the locale ${locale}. Please refer to https://angular.io/guide/i18n#i18n-pipes`);
+        console.warn('Using default browser locale settings.');
+    }
+
     private static ensureLeadingZero(part: DatePartInfo) {
         switch (part.type) {
             case DatePart.Date:

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts

@@ -1,9 +1,9 @@
 import { Component, ContentChild, Pipe, PipeTransform, Output, EventEmitter, HostListener, Directive } from '@angular/core';
-import { formatDate } from '@angular/common';
 import { NgControl } from '@angular/forms';
 import { IgxInputDirective, IgxInputState } from '../input-group/public_api';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxInputGroupBase } from '../input-group/input-group.common';
+import { DatePickerUtil } from '../date-picker/date-picker.utils';
 import { IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
 
 /**
@@ -17,14 +17,17 @@ export interface DateRange {
 /** @hidden @internal */
 @Pipe({ name: 'dateRange' })
 export class DateRangePickerFormatPipe implements PipeTransform {
-    public transform(values: DateRange, inputFormat?: string, locale?: string): string {
-        if (!values) {
+    public transform(values: DateRange, appliedFormat?: string,
+        locale?: string, formatter?: (_: DateRange) => string): string {
+        if (!values || !values.start && !values.end) {
             return '';
         }
+        if (formatter) {
+            return formatter(values);
+        }
         const { start, end } = values;
-        // TODO: move default locale from IgxDateTimeEditorDirective to its commons file/use displayFormat
-        const startDate = inputFormat ? formatDate(start, inputFormat, locale || 'en') : start?.toLocaleDateString();
-        const endDate = inputFormat ? formatDate(end, inputFormat, locale || 'en') : end?.toLocaleDateString();
+        const startDate = appliedFormat ? DatePickerUtil.formatDate(start, appliedFormat, locale || 'en') : start?.toLocaleDateString();
+        const endDate = appliedFormat ? DatePickerUtil.formatDate(end, appliedFormat, locale || 'en') : end?.toLocaleDateString();
         let formatted;
         if (start) {
             formatted = `${startDate} - `;
@@ -33,7 +36,6 @@ export class DateRangePickerFormatPipe implements PipeTransform {
             }
         }
 
-        // TODO: no need to set format twice
         return formatted ? formatted : '';
     }
 }

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html

@@ -43,12 +43,12 @@
 <ng-template #defTemplate>
     <igx-input-group (click)="open()">
         <input #singleInput igxInput type="text" readonly
-            [placeholder]="this.value ? '' : appliedFormat"
+            [placeholder]="this.value ? '' : singleInputFormat"
             role="combobox"
             aria-haspopup="grid"
             [attr.aria-expanded]="!toggle.collapsed"
             [attr.aria-labelledby]="this.label?.id"
-            [value]="this.value | dateRange: this.inputFormat : this.locale"
+            [value]="this.value | dateRange: this.appliedFormat : this.locale : this.formatter"
         />
 
         <igx-prefix *ngIf="!this.toggleComponents.length">