feat: allows for date format to be overriden with locale. fixes #2665 (#2671)

assets/auto-imports.d.ts

@@ -40,6 +40,7 @@ declare global {
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
+  const dateLocale: typeof import('./stores/settings')['dateLocale']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
@@ -393,6 +394,7 @@ declare module 'vue' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly dateLocale: UnwrapRef<typeof import('./stores/settings')['dateLocale']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
@@ -738,6 +740,7 @@ declare module '@vue/runtime-core' {
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly dateLocale: UnwrapRef<typeof import('./stores/settings')['dateLocale']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>

assets/components/common/DateTime.vue

@@ -10,13 +10,21 @@ const props = defineProps<{
   date: Date;
 }>();
 
-const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
+const dateOverride = computed(() => (dateLocale.value === "auto" ? undefined : dateLocale.value));
-const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false })[hourStyle.value]);
+const dateFormatter = computed(
-const timeFormatter = $computed(
+  () => new Intl.DateTimeFormat(dateOverride.value, { day: "2-digit", month: "2-digit", year: "numeric" }),
+);
+const use12Hour = computed(() => ({ auto: undefined, "12": true, "24": false })[hourStyle.value]);
+const timeFormatter = computed(
   () =>
-    new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: use12Hour }),
+    new Intl.DateTimeFormat(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: use12Hour.value,
+    }),
 );
 
-const dateStr = $computed(() => dateFormatter.format(props.date));
+const dateStr = computed(() => dateFormatter.value.format(props.date));
-const timeStr = $computed(() => timeFormatter.format(props.date));
+const timeStr = computed(() => timeFormatter.value.format(props.date));
 </script>

assets/pages/settings.vue

@@ -31,17 +31,29 @@
 
           <labeled-input>
             <template #label>
-              {{ $t("settings.12-24-format") }}
+              {{ $t("settings.datetime-format") }}
             </template>
             <template #input>
-              <dropdown-menu
+              <div class="flex gap-2">
-                v-model="hourStyle"
+                <dropdown-menu
-                :options="[
+                  v-model="dateLocale"
-                  { label: 'Auto', value: 'auto' },
+                  :options="[
-                  { label: '12', value: '12' },
+                    { label: 'Auto', value: 'auto' },
-                  { label: '24', value: '24' },
+                    { label: 'MM/DD/YYYY', value: 'en-US' },
-                ]"
+                    { label: 'DD/MM/YYYY', value: 'en-GB' },
-              />
+                    { label: 'DD.MM.YYYY', value: 'de-DE' },
+                    { label: 'YYYY-MM-DD', value: 'en-CA' },
+                  ]"
+                />
+                <dropdown-menu
+                  v-model="hourStyle"
+                  :options="[
+                    { label: 'Auto', value: 'auto' },
+                    { label: '12', value: '12' },
+                    { label: '24', value: '24' },
+                  ]"
+                />
+              </div>
             </template>
           </labeled-input>
 
@@ -113,6 +125,7 @@ import { ComplexLogEntry, SimpleLogEntry } from "@/models/LogEntry";
 import {
   automaticRedirect,
   hourStyle,
+  dateLocale,
   lightTheme,
   search,
   showAllContainers,

assets/stores/settings.ts

@@ -10,6 +10,7 @@ export type Settings = {
   showAllContainers: boolean;
   lightTheme: "auto" | "dark" | "light";
   hourStyle: "auto" | "24" | "12";
+  dateLocale: "auto" | "en-US" | "en-GB" | "de-DE" | "en-CA";
   softWrap: boolean;
   collapseNav: boolean;
   automaticRedirect: boolean;
@@ -24,6 +25,7 @@ export const DEFAULT_SETTINGS: Settings = {
   showAllContainers: false,
   lightTheme: "auto",
   hourStyle: "auto",
+  dateLocale: "auto",
   softWrap: true,
   collapseNav: false,
   automaticRedirect: true,
@@ -35,6 +37,7 @@ export const {
   collapseNav,
   softWrap,
   hourStyle,
+  dateLocale,
   lightTheme,
   showAllContainers,
   showTimestamp,

internal/profile/disk.go

@@ -32,6 +32,7 @@ type Settings struct {
 	Size              string  `json:"size,omitempty"`
 	LightTheme        string  `json:"lightTheme,omitempty"`
 	HourStyle         string  `json:"hourStyle,omitempty"`
+	DateLocale        string  `json:"dateLocale,omitempty"`
 }
 
 type Profile struct {

locales/en.yml

@@ -68,7 +68,7 @@ settings:
   small-scrollbars: Use smaller scrollbars
   show-timesamps: Show timestamps
   soft-wrap: Soft wrap lines
-  12-24-format: Time format
+  datetime-format: Override date and time format
   font-size: Font size to use for logs
   color-scheme: Color scheme
   options: Options