#470: Allow country specific locale for dates.

* We do not cut (with .split) the locale of the country anymore ("en" vs "en-GB"), because we need it to show dates. * With the country-specific locale, we can display the correct order of the date parts (day, month & year). * As we have defined English and German as languages, all country-specific languages are now defined for the date format.
MORE-Platform · Jun 28, 2024 · e6fc560 · e6fc560
1 parent bac863c
commit e6fc560
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 51 deletions.
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -19,55 +19,53 @@ const fallbackLocale: FallbackLocale = 'en';
 const localeEn: Locale = 'en';
 const localeDe: Locale = 'de';
 
-let usersLanguage = window.navigator.language;
-usersLanguage = usersLanguage.split('-')[0];
+const usersLanguage = window.navigator.language;
 
-const datetimeFormats: IntlDateTimeFormats = {
-  en: {
-    short: {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-    },
-    long: {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: 'numeric',
-      minute: 'numeric',
-      hour12: false,
-    },
-    longSec: {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: 'numeric',
-      minute: 'numeric',
-      second: '2-digit',
-    },
+const commonDatetimeFormat = {
+  short: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
   },
-  de: {
-    short: {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-    },
-    long: {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: 'numeric',
-      minute: 'numeric',
-    },
-    longSec: {
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-      hour: 'numeric',
-      minute: 'numeric',
-      second: '2-digit',
-    },
+  long: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: 'numeric',
+    minute: 'numeric',
+    hour12: false,
   },
+  longSec: {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: '2-digit',
+  },
+};
+
+const datetimeFormats = {
+  en: commonDatetimeFormat,
+  'en-GB': commonDatetimeFormat,
+  'en-US': commonDatetimeFormat,
+  'en-AU': commonDatetimeFormat,
+  'en-BZ': commonDatetimeFormat,
+  'en-CA': commonDatetimeFormat,
+  'en-IE': commonDatetimeFormat,
+  'en-JM': commonDatetimeFormat,
+  'en-NZ': commonDatetimeFormat,
+  'en-PH': commonDatetimeFormat,
+  'en-ZA': commonDatetimeFormat,
+  'en-TT': commonDatetimeFormat,
+  'en-VI': commonDatetimeFormat,
+  'en-ZW': commonDatetimeFormat,
+  de: commonDatetimeFormat,
+  'de-AT': commonDatetimeFormat,
+  'de-DE': commonDatetimeFormat,
+  'de-CH': commonDatetimeFormat,
+  'de-LI': commonDatetimeFormat,
+  'de-LU': commonDatetimeFormat,
 };
 
 export default createI18n({
@@ -80,6 +78,6 @@ export default createI18n({
     en,
     de,
   },
-  datetimeFormats,
+  datetimeFormats: datetimeFormats as IntlDateTimeFormats,
   warnHtmlMessage: false,
 });
diff --git a/src/stores/globalStore.ts b/src/stores/globalStore.ts
@@ -31,10 +31,7 @@ function getBrowserDateFormat(): string {
   }
 
   const sampleDate = new Date(2023, 6, 17);
-  //const locale = navigator.language || 'en-GB';
-  let usersLanguage = window.navigator.language;
-  usersLanguage = usersLanguage.split('-')[0];
-
+  const usersLanguage = window.navigator.language;
   const dateFormat = new Intl.DateTimeFormat(usersLanguage).formatToParts(
     sampleDate,
   );