Use new Intl formatter instances where applicable.

src/components/calendar/calendar.ts

@@ -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/days-view/days-view.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/months-view/months-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/date-picker/date-picker.ts

@@ -186,7 +186,6 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   private _max: Date | null = null;
   private _disabledDates?: DateRangeDescriptor[];
   private _dateConstraints?: DateRangeDescriptor[];
-  private _displayFormat?: string;
   private _inputFormat?: string;
 
   protected override readonly _formValue = createFormValueState(this, {
@@ -391,19 +390,21 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   @property({ type: Boolean, reflect: true, attribute: 'show-week-numbers' })
   public showWeekNumbers = false;
 
+  /**
+   * Sets to always show leading zero regardless of the displayFormat applied or one based on locale.
+   * Leading zero is applied during edit for the inputFormat always, regardless of this option.
+   * @attr
+   */
+  @property({ type: Boolean, attribute: 'always-leading-zero' })
+  public alwaysLeadingZero = false;
+
   /**
    * Format to display the value in when not editing.
-   * Defaults to the input format if not set.
+   * Defaults to the locale format if not set.
    * @attr display-format
    */
   @property({ attribute: 'display-format' })
-  public set displayFormat(value: string) {
-    this._displayFormat = value;
-  }
-
-  public get displayFormat(): string {
-    return this._displayFormat ?? this.inputFormat;
-  }
+  public displayFormat?: string;
 
   /**
    * The date format to apply on the input.
@@ -794,7 +795,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
 
   protected _renderInput(id: string) {
     const format = DateTimeUtil.predefinedToDateDisplayFormat(
-      this._displayFormat!
+      this.displayFormat
     );
 
     // Dialog mode is always readonly, rest depends on configuration