diff --git a/web/src/app/utils.js b/web/src/app/utils.js index d0ae15ce5..6b3849f51 100644 --- a/web/src/app/utils.js +++ b/web/src/app/utils.js @@ -130,14 +130,20 @@ export const hashCode = (s) => { return hash; }; +/** + * convert `i18n.language` style str (e.g.: `en_US`) to kebab-case (e.g.: `en-US`), + * which is expected by `` and `Intl.DateTimeFormat` + */ +export const getKebabCaseLangStr = (language) => language.replace(/_/g, '-'); + export const formatShortDateTime = (timestamp, language) => - new Intl.DateTimeFormat(language, { + new Intl.DateTimeFormat(getKebabCaseLangStr(language), { dateStyle: "short", timeStyle: "short", }).format(new Date(timestamp * 1000)); export const formatShortDate = (timestamp, language) => - new Intl.DateTimeFormat(language, { dateStyle: "short" }).format(new Date(timestamp * 1000)); + new Intl.DateTimeFormat(getKebabCaseLangStr(language), { dateStyle: "short" }).format(new Date(timestamp * 1000)); export const formatBytes = (bytes, decimals = 2) => { if (bytes === 0) return "0 bytes"; diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx index d22ec66f0..7f84b7deb 100644 --- a/web/src/components/App.jsx +++ b/web/src/components/App.jsx @@ -11,7 +11,7 @@ import ActionBar from "./ActionBar"; import Preferences from "./Preferences"; import subscriptionManager from "../app/SubscriptionManager"; import userManager from "../app/UserManager"; -import { expandUrl } from "../app/utils"; +import { expandUrl, getKebabCaseLangStr } from "../app/utils"; import ErrorBoundary from "./ErrorBoundary"; import routes from "./routes"; import { useAccountListener, useBackgroundProcesses, useConnectionListeners, useWebPushTopics } from "./hooks"; @@ -56,7 +56,7 @@ const App = () => { ); useEffect(() => { - document.documentElement.setAttribute("lang", i18n.language); + document.documentElement.setAttribute("lang", getKebabCaseLangStr(i18n.language)); document.dir = languageDir; }, [i18n.language, languageDir]);