fix(date-range): Update date time input manually when locale changes. Some tweaks.

Author: skrustev

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

@@ -47,8 +47,8 @@ export class DateRangePickerFormatPipe implements PipeTransform {
         if (!isDate(end)) {
             end = DateTimeUtil.parseIsoDate(end);
         }
-        const startDate = appliedFormat ? this.i18nFormatter.formatDate(start, appliedFormat, locale || 'en') : start?.toLocaleDateString();
-        const endDate = appliedFormat ? this.i18nFormatter.formatDate(end, appliedFormat, locale || 'en') : end?.toLocaleDateString();
+        const startDate = this.i18nFormatter.formatDate(start, appliedFormat, locale);
+        const endDate = this.i18nFormatter.formatDate(end, appliedFormat, locale);
         let formatted;
         if (start) {
             formatted = `${startDate} - `;

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

@@ -30,7 +30,7 @@
         <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->
         <input #singleInput igxInput type="text" [igxReadOnlyInput]="readOnly" readonly [disabled]="disabled" [placeholder]="value ? '' : singleInputFormat"
             role="combobox" aria-haspopup="grid" [attr.aria-expanded]="!collapsed" [attr.aria-labelledby]="label?.id"
-            [value]="value | dateRange: displayFormat : locale : formatter" />
+            [value]="value | dateRange: appliedFormat : locale : formatter" />
 
         @if (!toggleComponents.length) {
             <igx-prefix (click)="toggle()">

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

@@ -1286,12 +1286,13 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this.projectedInputs.forEach(i => {
             const input = i as IgxDateRangeInputsBaseComponent;
             input.dateTimeEditor.locale = this.locale;
+            input.dateTimeEditor.updateMask();
         });
     }
 
     protected override onResourceChange(args: CustomEvent<IResourceChangeEventArgs>) {
         super.onResourceChange(args);
-        if (this.hasProjectedInputs) {
+        if (args.detail.oldLocale !== args.detail.newLocale && this.hasProjectedInputs) {
             this.updateInputLocale();
             this.updateDisplayFormat();
         }

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -304,11 +304,11 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
         maskParser: MaskParsingService,
         platform: PlatformUtil,
         @Inject(DOCUMENT) private _document: any,
-        @Inject(LOCALE_ID) private _locale: any,
+        @Inject(LOCALE_ID) private _localeID: any,
         @Inject(I18N_FORMATTER) private _i18nFormatter: BaseFormatter) {
         super(elementRef, maskParser, renderer, platform);
         this.document = this._document as Document;
-        this.locale = this.locale || this._locale;
+        this.locale = this.locale || this._localeID;
     }
 
     @HostListener('wheel', ['$event'])
@@ -533,7 +533,8 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
         this.setMask(this.inputFormat);
     }
 
-    private updateMask(): void {
+    /** @hidden @internal */
+    public updateMask(): void {
         if (this._focused) {
             // store the cursor position as it will be moved during masking
             const cursor = this.selectionEnd;