Merge 179135a into ed25da3

package.json

@@ -151,6 +151,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.6.3",
         "@marko-tags/subscribe": "^0.5.1",
+        "date-fns": "^3.6.0",
         "makeup-active-descendant": "0.6.1",
         "makeup-expander": "~0.10.1",
         "makeup-floating-label": "~0.3.2",

src/components/ebay-calendar/component.ts

@@ -4,7 +4,7 @@ import {
     dateArgToISO,
     fromISO,
     getWeekdayInfo,
-    localeOverride,
+    getDateFnsLocale,
     offsetISO,
     toISO,
     type DayISO,
@@ -62,9 +62,7 @@ interface State {
 
 class Calendar extends Marko.Component<Input, State> {
     onCreate(input: Input) {
-        const { firstDayOfWeek, weekdayLabels } = getWeekdayInfo(
-            localeOverride(input.locale),
-        );
+        const { firstDayOfWeek, weekdayLabels } = getWeekdayInfo(input.locale);
         const todayISO = toISO(new Date());
         this.state = {
             focusISO: null,
@@ -85,9 +83,7 @@ class Calendar extends Marko.Component<Input, State> {
 
     onMount() {
         // recalculate on the browser in case firstDayOfWeek is not supported
-        const { firstDayOfWeek } = getWeekdayInfo(
-            localeOverride(this.input.locale),
-        );
+        const { firstDayOfWeek } = getWeekdayInfo(this.input.locale);
         this.state.firstDayOfWeek = firstDayOfWeek;
     }
 
@@ -281,7 +277,7 @@ class Calendar extends Marko.Component<Input, State> {
 
     monthTitle(date: Date) {
         const formatter = new Intl.DateTimeFormat(
-            localeOverride(this.input.locale),
+            getDateFnsLocale(this.input.locale).code,
             {
                 month: "long",
                 year: "numeric",

src/components/ebay-calendar/date-utils.ts

@@ -1,3 +1,6 @@
+import type { Locale } from "date-fns";
+import * as locales from "./locales";
+
 export type DayISO = `${number}-${number}-${number}`;
 
 export function findFirstDayOfWeek(localeName: string): number {
@@ -13,8 +16,9 @@ export function findFirstDayOfWeek(localeName: string): number {
     return 0;
 }
 
-export function getWeekdayInfo(localeName: string) {
-    const firstDayOfWeek = findFirstDayOfWeek(localeName);
+export function getWeekdayInfo(localeName?: string) {
+    const locale = getDateFnsLocale(localeName) as Locale;
+    const firstDayOfWeek = locale.options?.weekStartsOn || 0;
 
     const weekdayLabelFormatter = new Intl.DateTimeFormat(localeName, {
         weekday: "short",
@@ -50,6 +54,10 @@ export function offsetISO(iso: DayISO, days: number) {
     return toISO(date);
 }
 
-export function localeOverride(locale?: string) {
-    return locale || navigator.language;
+export function getDateFnsLocale(locale?: string): Locale {
+    locale ??= navigator.language;
+    locale = locale.toLowerCase().replace(/\W/g, "");
+    return locale in locales
+        ? locales[locale as keyof typeof locales]
+        : locales["enus"];
 }

src/components/ebay-calendar/locales.ts

@@ -0,0 +1,98 @@
+/** Lowercased with non-alpha removed */
+export {
+    af,
+    ar,
+    arDZ as ardz,
+    arEG as areg,
+    arMA as arma,
+    arSA as arsa,
+    arTN as artn,
+    az,
+    be,
+    beTarask as betarask,
+    bg,
+    bn,
+    bs,
+    ca,
+    ckb,
+    cs,
+    cy,
+    da,
+    de,
+    deAT as deat,
+    el,
+    enAU as enau,
+    enCA as enca,
+    enGB as engb,
+    enIE as enie,
+    enIN as enin,
+    enNZ as ennz,
+    enUS as enus,
+    enZA as enza,
+    eo,
+    es,
+    et,
+    eu,
+    faIR as fair,
+    fi,
+    fr,
+    frCA as frca,
+    frCH as frch,
+    fy,
+    gd,
+    gl,
+    gu,
+    he,
+    hi,
+    hr,
+    ht,
+    hu,
+    hy,
+    id,
+    is,
+    it,
+    itCH as itch,
+    ja,
+    jaHira as jahira,
+    ka,
+    kk,
+    km,
+    kn,
+    ko,
+    lb,
+    lt,
+    lv,
+    mk,
+    mn,
+    ms,
+    mt,
+    nb,
+    nl,
+    nlBE as nlbe,
+    nn,
+    oc,
+    pl,
+    pt,
+    ptBR as ptbr,
+    ro,
+    ru,
+    se,
+    sk,
+    sl,
+    sq,
+    sr,
+    srLatn as srlatn,
+    sv,
+    ta,
+    te,
+    th,
+    tr,
+    ug,
+    uk,
+    uz,
+    uzCyrl as uzcyrl,
+    vi,
+    zhCN as zhcn,
+    zhHK as zhhk,
+    zhTW as zhtw,
+} from "date-fns/locale";

src/components/ebay-date-textbox/component.ts

@@ -1,7 +1,12 @@
 import Expander from "makeup-expander";
-import { type DayISO, dateArgToISO } from "../ebay-calendar/date-utils";
+import {
+    type DayISO,
+    dateArgToISO,
+    getDateFnsLocale,
+} from "../ebay-calendar/date-utils";
 import type { WithNormalizedProps } from "../../global";
 import type { AttrString } from "marko/tags-html";
+import { parse } from "date-fns";
 
 const MIN_WIDTH_FOR_DOUBLE_PANE = 600;
 
@@ -88,7 +93,10 @@ class DateTextbox extends Marko.Component<Input, State> {
     }
 
     handleInputChange(index: number, { value }: { value: string }) {
-        const valueDate = new Date(value);
+        const valueDate = parse(value, "P", new Date(), {
+            locale: getDateFnsLocale(this.input.locale),
+        });
+        console.log(valueDate);
         const iso = isNaN(valueDate.getTime()) ? null : dateArgToISO(valueDate);
         if (index === 0) {
             this.state.firstSelected = iso;

src/components/ebay-date-textbox/date-textbox.stories.ts

@@ -198,8 +198,8 @@ export default {
             type: "text|array",
             control: { type: "object" },
             description:
-                'Text for the input placeholder. Should indicate that users need to enter dates in ISO format. If separate placeholders are required for a range display, use an array of two strings (i. e. `["Start (YYYY-MM-DD)", "End (YYYY-MM-DD)"]`).',
-            table: { defaultValue: { summary: '"YYYY-MM-DD"' } },
+                'Text for the input placeholder. Should indicate that users need to enter dates in ISO format. If separate placeholders are required for a range display, use an array of two strings (i. e. `["Start (MM/DD/YYYY)", "End (MM/DD/YYYY)"]`).',
+            table: { defaultValue: { summary: '"MM/DD/YYYY"' } },
         },
         onChange: {
             action: "on-change",

src/components/ebay-date-textbox/index.marko

@@ -1,7 +1,9 @@
+import { format, parseISO } from "date-fns";
+import { getDateFnsLocale } from "../ebay-calendar/date-utils";
 $ const {
     a11yOpenPopoverText = "open calendar",
     range,
-    inputPlaceholderText = "YYYY-MM-DD",
+    inputPlaceholderText = "MM/DD/YYYY",
     ...calendarInput
 } = input;
 $ const [rangeStartPlaceholder, mainPlaceholder] = (
@@ -15,18 +17,24 @@ $ const [rangeStartPlaceholder, mainPlaceholder] = (
     on-expander-collapse("closePopover")
     class="date-textbox"
 >
+    $ const locale = getDateFnsLocale(input.locale);
     <if(range)>
         <ebay-textbox
             placeholder=rangeStartPlaceholder
-            value=state.firstSelected
+            value=(
+                state.firstSelected
+                    ? format(parseISO(state.firstSelected), "P", { locale })
+                    : ""
+            )
             on-blur("handleInputChange", 0)
         />
     </if>
+    $ const textboxValue = range ? state.secondSelected : state.firstSelected;
     <ebay-textbox
         class="ebay-date-textbox--main"
         placeholder=mainPlaceholder
         buttonAriaLabel=a11yOpenPopoverText
-        value=(range ? state.secondSelected : state.firstSelected)
+        value=(textboxValue ? format(parseISO(textboxValue), "P", { locale }) : "")
         on-blur("handleInputChange", range ? 1 : 0)
     >
         <@postfix-icon>