Use new Intl formatter instances where applicable. (#1845)

---------

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: skrustev

CHANGELOG.md

@@ -5,9 +5,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Added
+- #### Localization
+  - New localization implementation. Now you can set global localization for all localized Ignite UI components using the `registerI18n` and `setCurrentI18n` methods.
+  - Calendar, Date Input, Date Picker and Date Range Picker components now implement the new localization for formatting as well, which internally uses new implementation of the Intl.
+  - Added localization for Carousel, Chip, Combo, File Input and Tree. They now have `locale` and `resourceStrings` properties as well, which you can set to customize them individually.
+
 ### Fixed
 - #### Tooltip
   - Do not show tooltip when target is clicked [#1828](https://github.com/IgniteUI/igniteui-webcomponents/issues/1828)
+- #### Date input, Date picker, Date range picker
+  - Default display format now follows strictly locale format as per specification without leading zeros.
 
 ## [6.3.6] - 2025-11-14
 ### Fixed

package-lock.json

@@ -56,7 +56,7 @@
     "@floating-ui/dom": "^1.7.4",
     "@lit-labs/virtualizer": "^2.1.1",
     "@lit/context": "^1.1.6",
-    "igniteui-i18n-core": "0.6.0-alpha.4",
+    "igniteui-i18n-core": "0.7.0-alpha.8",
     "lit": "^3.3.1"
   },
   "devDependencies": {
@@ -81,7 +81,7 @@
     "globby": "^15.0.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.0",
-    "igniteui-i18n-resources": "0.6.0-alpha.4",
+    "igniteui-i18n-resources": "0.7.0-alpha.8",
     "igniteui-theming": "^22.1.0",
     "keep-a-changelog": "^2.7.1",
     "lint-staged": "^16.2.6",

package.json

@@ -1,3 +1,4 @@
+import { getDateFormatter } from 'igniteui-i18n-core';
 import { html, nothing } from 'lit';
 import { property, query, queryAll, state } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
@@ -15,9 +16,7 @@ import {
   pageUpKey,
   shiftKey,
 } from '../common/controllers/key-bindings.js';
-import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { createDateTimeFormatters } from '../common/localization/intl-formatters.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { partMap } from '../common/part-map.js';
@@ -219,30 +218,21 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
   public formatOptions: Pick<Intl.DateTimeFormatOptions, 'month' | 'weekday'> =
     { month: 'long', weekday: 'narrow' };
 
-  private _intl = createDateTimeFormatters(this.locale, {
-    month: {
-      month: this.formatOptions.month,
-    },
-    monthLabel: { month: 'long' },
-    weekday: { weekday: 'short' },
-    monthDay: { month: 'short', day: 'numeric' },
-    yearLabel: { month: 'long', year: 'numeric' },
-  });
-
-  @watch('locale')
-  protected localeChange() {
-    this._intl.locale = this.locale;
-  }
-
-  @watch('formatOptions')
-  protected formatOptionsChange() {
-    this._intl.update({
-      month: {
-        month: this.formatOptions.month,
-      },
-    });
+  private get _monthOptions(): Intl.DateTimeFormatOptions {
+    return { month: this.formatOptions.month };
   }
 
+  private _monthLabelOptions: Intl.DateTimeFormatOptions = { month: 'long' };
+  private _weekdayOptions: Intl.DateTimeFormatOptions = { weekday: 'short' };
+  private _monthDayOptions: Intl.DateTimeFormatOptions = {
+    month: 'short',
+    day: 'numeric',
+  };
+  private _yearLabelOptions: Intl.DateTimeFormatOptions = {
+    month: 'long',
+    year: 'numeric',
+  };
+
   /** @private @hidden @internal */
   public async [focusActiveDate](options?: FocusOptions) {
     await this.updateComplete;
@@ -462,23 +452,34 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
     active: CalendarDay,
     viewIndex: number
   ) {
-    const labelFmt = this._intl.get('monthLabel').format;
-    const valueFmt = this._intl.get('month').format;
-    const ariaLabel = `${labelFmt(active.native)}, ${this.resourceStrings.selectMonth}`;
+    const label = getDateFormatter().formatDateTime(
+      active.native,
+      this.locale,
+      this._monthLabelOptions
+    );
+    const value = getDateFormatter().formatDateTime(
+      active.native,
+      this.locale,
+      this._monthOptions
+    );
+    const ariaLabel = `${label}, ${this.resourceStrings.selectMonth}`;
 
     return html`
       <button
         part="months-navigation"
         aria-label=${ariaLabel}
         @click=${() => this.switchToMonths(viewIndex)}
       >
-        ${valueFmt(active.native)}
+        ${value}
       </button>
     `;
   }
 
   protected renderYearButtonNavigation(active: CalendarDay, viewIndex: number) {
-    const fmt = this._intl.get('yearLabel').format;
+    const fmt = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._yearLabelOptions
+    ).format;
     const ariaLabel = `${active.year}, ${this.resourceStrings.selectYear}`;
     const ariaSkip = this._isDayView ? fmt(active.native) : active.year;
 
@@ -548,19 +549,30 @@ export default class IgcCalendarComponent extends EventEmitterMixin<
 
   protected renderHeaderDateSingle() {
     const date = this.value ?? CalendarDay.today.native;
-    const day = this._intl.get('weekday').format(date);
-    const month = this._intl.get('monthDay').format(date);
+    const weekday = getDateFormatter().formatDateTime(
+      date,
+      this.locale,
+      this._weekdayOptions
+    );
+    const monthDay = getDateFormatter().formatDateTime(
+      date,
+      this.locale,
+      this._monthDayOptions
+    );
     const separator =
       this.headerOrientation === 'vertical' ? html`<br />` : ' ';
 
-    const formatted = html`${day},${separator}${month}`;
+    const formatted = html`${weekday},${separator}${monthDay}`;
 
     return html`<slot name="header-date">${formatted}</slot>`;
   }
 
   protected renderHeaderDateRange() {
     const values = this.values;
-    const fmt = this._intl.get('monthDay').format;
+    const fmt = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._monthDayOptions
+    ).format;
     const { startDate, endDate } = this.resourceStrings;
 
     const start = this._hasValues ? fmt(first(values)) : startDate;

src/components/calendar/calendar.ts

@@ -1,13 +1,12 @@
+import { getDateFormatter } from 'igniteui-i18n-core';
 import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-
 import { addThemingController } from '../../../theming/theming-controller.js';
 import { addKeybindings } from '../../common/controllers/key-bindings.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
 import { watch } from '../../common/decorators/watch.js';
 import { registerComponent } from '../../common/definitions/register.js';
-import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partMap } from '../../common/part-map.js';
@@ -107,21 +106,17 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
   @property({ attribute: 'week-day-format' })
   public weekDayFormat: 'long' | 'short' | 'narrow' = 'narrow';
 
-  private _intl = createDateTimeFormatters(this.locale, {
-    weekday: { weekday: this.weekDayFormat },
-    label: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
-    ariaWeekday: { weekday: 'long' },
-  });
-
-  @watch('locale')
-  protected localeChange() {
-    this._intl.locale = this.locale;
+  private get _weekdayOptions(): Intl.DateTimeFormatOptions {
+    return { weekday: this.weekDayFormat };
   }
 
-  @watch('weekDayFormat')
-  protected weekDayFormatChange() {
-    this._intl.update({ weekday: { weekday: this.weekDayFormat } });
-  }
+  private _labelOptions: Intl.DateTimeFormatOptions = {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  };
+  private _ariaWeekdayOptions: Intl.DateTimeFormatOptions = { weekday: 'long' };
 
   @watch('weekStart')
   @watch('activeDate')
@@ -336,7 +331,10 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
   }
 
   private intlFormatDay(day: CalendarDay) {
-    const fmt = this._intl.get('label');
+    const fmt = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._labelOptions
+    );
 
     // Range selection in progress
     if (this._rangePreviewDate?.equalTo(day)) {
@@ -444,8 +442,14 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
   }
 
   protected renderHeaders() {
-    const label = this._intl.get('weekday');
-    const aria = this._intl.get('ariaWeekday');
+    const label = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._weekdayOptions
+    );
+    const aria = getDateFormatter().getIntlFormatter(
+      this.locale,
+      this._ariaWeekdayOptions
+    );
     const days = take(
       generateMonth(this._activeDate, this._firstDayOfWeek),
       daysInWeek

src/components/calendar/days-view/days-view.ts

@@ -1,14 +1,12 @@
+import { getDateFormatter } from 'igniteui-i18n-core';
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { range } from 'lit/directives/range.js';
-
 import { addThemingController } from '../../../theming/theming-controller.js';
 import { addKeybindings } from '../../common/controllers/key-bindings.js';
 import { blazorIndirectRender } from '../../common/decorators/blazorIndirectRender.js';
 import { blazorSuppressComponent } from '../../common/decorators/blazorSuppressComponent.js';
-import { watch } from '../../common/decorators/watch.js';
 import { registerComponent } from '../../common/definitions/register.js';
-import { createDateTimeFormatters } from '../../common/localization/intl-formatters.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partMap } from '../../common/part-map.js';
@@ -67,20 +65,14 @@ export default class IgcMonthsViewComponent extends EventEmitterMixin<
   public monthFormat: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' =
     'long';
 
-  private _intl = createDateTimeFormatters(this.locale, {
-    month: { month: this.monthFormat },
-    ariaMonth: { month: 'long', year: 'numeric' },
-  });
-
-  @watch('locale')
-  protected localeChange() {
-    this._intl.locale = this.locale;
+  private get _monthOptions(): Intl.DateTimeFormatOptions {
+    return { month: this.monthFormat };
   }
 
-  @watch('monthFormat')
-  protected formatChange() {
-    this._intl.update({ month: { month: this.monthFormat } });
-  }
+  private _ariaMonthOptions: Intl.DateTimeFormatOptions = {
+    month: 'long',
+    year: 'numeric',
+  };
 
   constructor() {
     super();
@@ -110,8 +102,16 @@ export default class IgcMonthsViewComponent extends EventEmitterMixin<
   }
 
   protected renderMonth(entry: CalendarDay, now: CalendarDay) {
-    const ariaLabel = this._intl.get('ariaMonth').format(entry.native);
-    const value = this._intl.get('month').format(entry.native);
+    const ariaLabel = getDateFormatter().formatDateTime(
+      entry.native,
+      this.locale,
+      this._ariaMonthOptions
+    );
+    const value = getDateFormatter().formatDateTime(
+      entry.native,
+      this.locale,
+      this._monthOptions
+    );
 
     const active = areSameMonth(this._value, entry);
     const current = areSameMonth(now, entry);

src/components/calendar/months-view/months-view.ts

@@ -281,7 +281,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   public animationType: HorizontalTransitionAnimation = 'slide';
 
   /**
-   * Gets/Sets the locale used for formatting and displaying the dates in the component.
+   * Gets/Sets the locale used for getting language, affecting resource strings.
    * @attr locale
    */
   @property()
@@ -295,6 +295,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
 
   /**
    * The resource strings for localization.
+   * Currently only aria-label attributes are localized for the carousel.
    */
   @property({ attribute: false })
   public set resourceStrings(value: ICarouselResourceStrings) {