From ca096c9d1bb9ab9bd14a349004c757de24dfc6bd Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 7 Sep 2025 13:24:27 +0200
Subject: [PATCH] feat(i18n,a11y): change last update logic

---
 .../components/VPDocFooterLastUpdated.vue     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooterLastUpdated.vue b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
index 5ec3cfeb..6812285e 100644
--- a/src/client/theme-default/components/VPDocFooterLastUpdated.vue
+++ b/src/client/theme-default/components/VPDocFooterLastUpdated.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, watchEffect, onMounted } from 'vue'
+import { ref, computed, watchEffect, onMounted, useTemplateRef } from 'vue'
 import { useData } from '../composables/data'
+import { useNavigatorLanguage } from '@vueuse/core'
 
 const { theme, page, lang } = useData()
+const { language } = useNavigatorLanguage()
+
+const timeRef = useTemplateRef('timeRef')
 
 const date = computed(
   () => new Date(page.value.lastUpdated!)
@@ -14,13 +18,20 @@ const datetime = ref('')
 // potential differences in timezones of the server and clients
 onMounted(() => {
   watchEffect(() => {
+    const browserLang = theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : language.value
     datetime.value = new Intl.DateTimeFormat(
-      theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+      browserLang,
       theme.value.lastUpdated?.formatOptions ?? {
-        dateStyle: 'short',
-        timeStyle: 'short'
+        dateStyle: 'medium',
+        timeStyle: 'medium'
       }
     ).format(date.value)
+    if (browserLang && lang.value !== browserLang) {
+      timeRef.value?.setAttribute('lang', browserLang)
+    }
+    else {
+      timeRef.value?.removeAttribute('lang')
+    }
   })
 })
 </script>
@@ -28,7 +39,7 @@ onMounted(() => {
 <template>
   <p class="VPLastUpdated">
     {{ theme.lastUpdated?.text || theme.lastUpdatedText || 'Last updated' }}:
-    <time :datetime="isoDatetime">{{ datetime }}</time>
+    <time ref="timeRef" :datetime="isoDatetime">{{ datetime }}</time>
   </p>
 </template>