Supported localization for numbers.

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

@@ -1,5 +1,6 @@
 import { h, FunctionalComponent } from "@stencil/core"
 import { isEqual, isEqualMonth } from "./date-utils"
+import { DuetLocalizedText } from "./date-localization"
 
 export type DatePickerDayProps = {
  focusedDay: Date
@@ -12,6 +13,7 @@ export type DatePickerDayProps = {
  onDaySelect: (event: MouseEvent, day: Date) => void
  onKeyboardNavigation: (event: KeyboardEvent) => void
  focusedDayRef?: (element: HTMLElement) => void
+ localization: DuetLocalizedText
 }
 
 export const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({
@@ -25,6 +27,7 @@ export const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({
  inRange,
  isSelected,
  dateFormatter,
+ localization,
 }) => {
  const isToday = isEqual(day, today)
  const isMonth = isEqualMonth(day, focusedDay)
@@ -57,7 +60,7 @@ export const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({
  }
  }}
  >
- <span aria-hidden="true">{day.getDate()}</span>
+ <span aria-hidden="true">{Number(day.getDate()).toLocaleString(localization.locale)}</span>
  <span class="duet-date__vhidden">{dateFormatter.format(day)}</span>
  </button>
  )

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

@@ -81,6 +81,7 @@ export const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({
  dateFormatter={dateFormatter}
  onKeyboardNavigation={onKeyboardNavigation}
  focusedDayRef={focusedDayRef}
+ localization={localization}
  />
  </td>
  ))}

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

@@ -714,13 +714,17 @@ export class DuetDatePicker implements ComponentInterface {
  <div class="duet-date__select">
  <select id={this.yearSelectId} class="duet-date__select--year" onChange={this.handleYearSelect}>
  {range(minYear, maxYear).map(year => (
- <option key={year} selected={year === focusedYear}>
- {year}
+ <option key={year} selected={year === focusedYear} value={year}>
+ {Number(year).toLocaleString(this.localization.locale, { useGrouping: false })}
  </option>
  ))}
  </select>
  <div class="duet-date__select-label" aria-hidden="true">
- <span>{this.focusedDay.getFullYear()}</span>
+ <span>
+ {Number(this.focusedDay.getFullYear()).toLocaleString(this.localization.locale, {
+ useGrouping: false,
+ })}
+ </span>
  <svg
  fill="currentColor"
  xmlns="http://www.w3.org/2000/svg"