Fix date formatting for different locales

ori-community · Apr 5, 2024 · 7412ba7 · 7412ba7
1 parent c2ef2ed
commit 7412ba7
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/assets/lib/formatsDates.js b/assets/lib/formatsDates.js
@@ -1,33 +1,44 @@
 import { format as formatDate, formatDistanceToNow, parseISO } from 'date-fns'
-import { enCA } from 'date-fns/locale'
+
+let allLocales = {};
+import("date-fns/locale").then(locales => {
+  allLocales = locales;
+});
+
+const getLocale = () => {
+  const locale = navigator.language.replace("-", "");
+  const rootLocale = locale.substring(0, 2);
+
+  return allLocales[locale] ?? allLocales[rootLocale];
+};
 
 export const formatsDates = {
   methods: {
     formatDateRelative(date) {
       if (process.server) {
         return 'on ' + formatDate(new Date(date), 'PP', {
-          locale: enCA,
+          locale: getLocale(),
         })
       }
 
       return formatDistanceToNow(new Date(date), {
         addSuffix: true,
-        locale: enCA,
+        locale: getLocale(),
       })
     },
-    formatDate(dateISO, format = 'dd.MM.yyyy') {
+    formatDate(dateISO, format = 'P') {
       return formatDate(parseISO(dateISO), format, {
-        locale: enCA,
+        locale: getLocale(),
       })
     },
-    formatDateObject(date, format = 'dd.MM.yyyy') {
+    formatDateObject(date, format = 'P') {
       return formatDate(date, format, {
-        locale: enCA,
+        locale: getLocale(),
       })
     },
-    formatDateEpoch(epochMillis, format = 'dd.MM.yyyy') {
+    formatDateEpoch(epochMillis, format = 'P') {
       return formatDate(new Date(epochMillis), format, {
-        locale: enCA,
+        locale: getLocale(),
       })
     },
   },

diff --git a/components/League/SeasonCard.vue b/components/League/SeasonCard.vue
@@ -18,7 +18,7 @@
 
       <div v-if="mode === MODE_UPCOMING">
         <v-icon x-small>mdi-clock-outline</v-icon> starts at
-        {{ formatDateEpoch(season.nextContinuationAt, 'dd.MM.yyyy HH:mm') }}
+        {{ formatDateEpoch(season.nextContinuationAt, 'P p') }}
       </div>
       <div>
         <v-icon x-small>mdi-account-multiple-outline</v-icon>