feat(date-picker, input-date-picker): add numberingSystem property

src/components/date-picker-day/date-picker-day.e2e.ts

@@ -8,7 +8,6 @@ describe("calcite-date-picker-day", () => {
       const dateEl = document.createElement("calcite-date-picker-day") as HTMLCalciteDatePickerDayElement;
       dateEl.active = true;
       dateEl.day = 3;
-      dateEl.localeData = { numerals: "0123456789" } as HTMLCalciteDatePickerDayElement["localeData"];
       document.body.append(dateEl);
     });
     await page.waitForChanges();

src/components/date-picker-day/date-picker-day.tsx

@@ -11,11 +11,11 @@ import {
 } from "@stencil/core";
 
 import { getElementDir } from "../../utils/dom";
-import { DateLocaleData } from "../date-picker/utils";
 import { Scale } from "../interfaces";
 import { CSS_UTILITY } from "../../utils/resources";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
+import { numberStringFormatter } from "../../utils/locale";
 
 @Component({
   tag: "calcite-date-picker-day",
@@ -38,7 +38,7 @@ export class DatePickerDay implements InteractiveComponent {
   //--------------------------------------------------------------------------
 
   /** Day of the month to be shown. */
-  @Prop() day: number;
+  @Prop() day!: number;
 
   /** Date is outside of range and can't be selected */
   @Prop({ reflect: true }) disabled = false;
@@ -67,10 +67,6 @@ export class DatePickerDay implements InteractiveComponent {
   /** Date is actively in focus for keyboard navigation */
   @Prop({ reflect: true }) active = false;
 
-  /** CLDR data for current locale */
-  /* @internal */
-  @Prop() localeData: DateLocaleData;
-
   /** specify the scale of the date picker */
   @Prop({ reflect: true }) scale: Scale;
 
@@ -123,10 +119,7 @@ export class DatePickerDay implements InteractiveComponent {
   //
   //--------------------------------------------------------------------------
   render(): VNode {
-    const formattedDay = String(this.day)
-      .split("")
-      .map((i) => this.localeData.numerals[i])
-      .join("");
+    const formattedDay = numberStringFormatter.localize(String(this.day));
     const dir = getElementDir(this.el);
     return (
       <Host onClick={this.onClick} onKeyDown={this.keyDownHandler} role="gridcell">

src/components/date-picker-month-header/date-picker-month-header.tsx

@@ -10,20 +10,14 @@ import {
   Watch,
   Fragment
 } from "@stencil/core";
-import {
-  dateFromRange,
-  nextMonth,
-  prevMonth,
-  localizeNumber,
-  parseNumber,
-  getOrder
-} from "../../utils/date";
+import { dateFromRange, nextMonth, prevMonth, getOrder } from "../../utils/date";
 
 import { DateLocaleData } from "../date-picker/utils";
 import { Scale } from "../interfaces";
 import { HeadingLevel, Heading } from "../functional/Heading";
 import { BUDDHIST_CALENDAR_YEAR_OFFSET } from "./resources";
 import { isActivationKey } from "../../utils/key";
+import { numberStringFormatter } from "../../utils/locale";
 
 @Component({
   tag: "calcite-date-picker-month-header",
@@ -118,7 +112,7 @@ export class DatePickerMonthHeader {
     return (
       <Fragment>
         <a
-          aria-disabled={(this.prevMonthDate.getMonth() === activeMonth).toString()}
+          aria-disabled={`${this.prevMonthDate.getMonth() === activeMonth}`}
           aria-label={this.intlPrevMonth}
           class="chevron"
           href="#"
@@ -155,7 +149,7 @@ export class DatePickerMonthHeader {
           </span>
         </div>
         <a
-          aria-disabled={(this.nextMonthDate.getMonth() === activeMonth).toString()}
+          aria-disabled={`${this.nextMonthDate.getMonth() === activeMonth}`}
           aria-label={this.intlNextMonth}
           class="chevron"
           href="#"
@@ -224,15 +218,17 @@ export class DatePickerMonthHeader {
     const { localeData } = this;
     const buddhistCalendar = localeData["default-calendar"] === "buddhist";
     const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
-    return localizeNumber(year + yearOffset, localeData);
+
+    return numberStringFormatter.localize(`${year + yearOffset}`);
   }
 
   private parseCalendarYear(year: string): string {
     const { localeData } = this;
     const buddhistCalendar = localeData["default-calendar"] === "buddhist";
     const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
 
-    return localizeNumber(parseNumber(year, localeData) - yearOffset, localeData);
+    const parsedYear = Number(numberStringFormatter.delocalize(year)) - yearOffset;
+    return numberStringFormatter.localize(`${parsedYear}`);
   }
 
   private onYearChange = (event: Event): void => {
@@ -283,8 +279,8 @@ export class DatePickerMonthHeader {
     localizedYear: string;
     offset?: number;
   }): Date {
-    const { min, max, activeDate, localeData } = this;
-    const parsedYear = parseNumber(localizedYear, localeData);
+    const { min, max, activeDate } = this;
+    const parsedYear = Number(numberStringFormatter.delocalize(localizedYear));
     const length = parsedYear.toString().length;
     const year = isNaN(parsedYear) ? false : parsedYear + offset;
     const inRange =

src/components/date-picker-month/date-picker-month.tsx

@@ -415,7 +415,6 @@ export class DatePickerMonth {
         endOfRange={this.isEndOfRange(date)}
         highlighted={this.betweenSelectedRange(date)}
         key={date.toDateString()}
-        localeData={this.localeData}
         onCalciteDaySelect={this.daySelect}
         onCalciteInternalDayHover={this.dayHover}
         range={!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)}