support localization in date-fns implementation

Author: KoolADE85

components/dash-core-components/src/utils/calendar/CalendarMonth.tsx

@@ -15,7 +15,12 @@ import type {Day} from 'date-fns';
 import CalendarDay from './CalendarDay';
 import CalendarDayPadding from './CalendarDayPadding';
 import {createMonthGrid} from './createMonthGrid';
-import {isDateInRange, isDateDisabled, isSameDay} from './helpers';
+import {
+    isDateInRange,
+    isDateDisabled,
+    isSameDay,
+    getUserLocale,
+} from './helpers';
 import {CalendarDirection} from '../../types';
 import '../../components/css/calendar.css';
 import CalendarMonthHeader from './CalendarMonthHeader';
@@ -94,7 +99,7 @@ export const CalendarMonth = ({
     const daysOfTheWeek = useMemo(() => {
         return Array.from({length: 7}, (_, i) => {
             const date = setDay(new Date(), (i + firstDayOfWeek) % 7);
-            return format(date, 'EEEEEE');
+            return format(date, 'EEEEEE', {locale: getUserLocale()});
         });
     }, [firstDayOfWeek]);
 

components/dash-core-components/src/utils/calendar/helpers.ts

@@ -12,8 +12,17 @@ import {
     min,
     max,
 } from 'date-fns';
+import type {Locale} from 'date-fns';
 import {DatePickerSingleProps} from '../../types';
 
+declare global {
+    interface Window {
+        dateFns?: {
+            locale?: Record<string, Locale>;
+        };
+    }
+}
+
 /**
  * Converts relevant moment.js format tokens to unicode tokens suitable for use
  * in date-fns. This maintains backwards compatibility with our publicly
@@ -31,12 +40,42 @@ function convertFormatTokens(momentFormat: string): string {
         .replace(/X/g, 't'); // Unix timestamp (seconds)
 }
 
+/**
+ * Matches the user's preferred locale against the locales that have been loaded
+ * externally on the page from the assets folder or via a script tag
+ */
+export function getUserLocale(): Locale | undefined {
+    // Check if page has loaded any external locales
+    const availableLocales = window.dateFns?.locale ?? {};
+
+    // Match available locales against user locale preferences
+    const localeKeys = Object.keys(availableLocales);
+    const userLanguages = navigator.languages || [navigator.language];
+    for (const lang of userLanguages) {
+        // First check full locale string for regional variants (e.g., 'fr-CA')
+        const normalizedLang = lang.replace('-', '');
+        if (availableLocales[normalizedLang]) {
+            return availableLocales[normalizedLang];
+        }
+
+        // Fallback to simple language code (e.g., 'fr')
+        const langCode = lang.split('-')[0];
+        if (availableLocales[langCode]) {
+            return availableLocales[langCode];
+        }
+    }
+
+    // No match found against user language preferences, we'll use first
+    // loaded locale (ultimately determined by script order in HTML)
+    return availableLocales[localeKeys[0]];
+}
+
 export function formatDate(date?: Date, formatStr = 'YYYY-MM-DD'): string {
     if (!date) {
         return '';
     }
     const convertedFormat = convertFormatTokens(formatStr);
-    return format(date, convertedFormat);
+    return format(date, convertedFormat, {locale: getUserLocale()});
 }
 
 /*
@@ -59,8 +98,11 @@ export function strAsDate(
         return undefined;
     }
 
+    const locale = getUserLocale();
     let parsed = formatStr
-        ? parse(dateStr, convertFormatTokens(formatStr), new Date())
+        ? parse(dateStr, convertFormatTokens(formatStr), new Date(), {
+              locale,
+          })
         : parseISO(dateStr);
 
     // Fallback to native Date constructor for non-ISO formats
@@ -148,7 +190,9 @@ export function formatMonth(
 ): string {
     const {monthFormat} = extractFormats(formatStr);
     const convertedFormat = convertFormatTokens(monthFormat);
-    return format(new Date(year, month, 1), convertedFormat);
+    return format(new Date(year, month, 1), convertedFormat, {
+        locale: getUserLocale(),
+    });
 }
 
 /**
@@ -187,7 +231,9 @@ export function getMonthOptions(
 
     return Array.from({length: 12}, (_, i) => {
         const monthStart = new Date(year, i, 1);
-        const label = format(monthStart, convertedFormat);
+        const label = format(monthStart, convertedFormat, {
+            locale: getUserLocale(),
+        });
 
         // Check if this month is outside the allowed range (month-level comparison)
         const disabled =
@@ -204,7 +250,9 @@ export function getMonthOptions(
 export function formatYear(year: number, formatStr?: string): string {
     const {yearFormat} = extractFormats(formatStr);
     const convertedFormat = convertFormatTokens(yearFormat);
-    return format(new Date(year, 0, 1), convertedFormat);
+    return format(new Date(year, 0, 1), convertedFormat, {
+        locale: getUserLocale(),
+    });
 }
 
 /**

components/dash-core-components/tests/integration/calendar/locales/assets/date-fns-locale-fr.min.js

@@ -0,0 +1,85 @@
+from datetime import datetime
+
+from dash import Dash, html, dcc, Input, Output
+from selenium.webdriver.common.keys import Keys
+
+
+def test_dtps030_french_localization_via_cdn(dash_dcc):
+    """Test that French locale from CDN is applied to date picker."""
+    app = Dash(
+        __name__,
+    )
+
+    app.layout = html.Div(
+        [
+            html.P("DatePicker localization - translations in assets folder"),
+            dcc.DatePickerSingle(
+                id="dps",
+                date="2025-01-15",
+                initial_visible_month=datetime(2025, 1, 1),
+                display_format="MMMM DD, YYYY",
+                month_format="MMMM YYYY",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Input("dps", "date"),
+    )
+    def update_output(date):
+        return f"Date: {date}"
+
+    dash_dcc.start_server(app)
+
+    # Wait for date picker to render
+    input_element = dash_dcc.wait_for_element("#dps")
+
+    # Check initial callback output shows ISO format date
+    dash_dcc.wait_for_text_to_equal("#output", "Date: 2025-01-15")
+
+    # Check that display format uses French month name
+    display_value = input_element.get_attribute("value")
+    assert (
+        "janvier" in display_value.lower()
+    ), f"Display format should use French month name 'janvier', but got: {display_value}"
+
+    # Test typing a French month name in the input
+    input_element.clear()
+    input_element.send_keys("février 20, 2025")
+    input_element.send_keys(Keys.TAB)  # Blur to trigger parsing
+
+    # Wait for the date to be parsed and formatted
+    dash_dcc.wait_for_text_to_equal("#dps", "février 20, 2025")
+
+    # Verify the input now shows the French formatted date
+    display_value = input_element.get_attribute("value")
+    assert (
+        "février" in display_value.lower()
+    ), f"Input should accept and display French month name 'février', but got: {display_value}"
+
+    # Verify the callback received the correct ISO format date (locale-independent)
+    dash_dcc.wait_for_text_to_equal("#output", "Date: 2025-02-20")
+
+    # Open the calendar
+    input_element.click()
+    dash_dcc.wait_for_element(".dash-datepicker-calendar-container")
+
+    # Check that days of the week are in French
+    # French abbreviated days: Lu, Ma, Me, Je, Ve, Sa, Di
+    day_headers = dash_dcc.find_elements(".dash-datepicker-calendar thead th span")
+    day_texts = [header.text for header in day_headers]
+
+    # Check for French day abbreviations (2-letter format)
+    french_days = ["lu", "ma", "me", "je", "ve", "sa", "di"]
+    assert (
+        len(day_texts) == 7
+    ), f"Should have 7 day headers, but got {len(day_texts)}: {day_texts}"
+
+    for day_text in day_texts:
+        assert any(
+            french_day in day_text.lower() for french_day in french_days
+        ), f"Day header '{day_text}' should be a French day abbreviation, expected one of: {french_days}"
+
+    assert dash_dcc.get_logs() == []