From acd8dbb914f1e1ce8652a1dee03a3300ae371fa8 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 30 Jan 2026 02:28:23 +0800
Subject: [PATCH 1/2] feat: format DateTime title

---
 app/components/DateTime.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/components/DateTime.vue b/app/components/DateTime.vue
index df57a83a72..70a77c2c66 100644
--- a/app/components/DateTime.vue
+++ b/app/components/DateTime.vue
@@ -33,11 +33,20 @@ const { locale } = useI18n()
 
 const relativeDates = useRelativeDates()
 
+const dateFormatter = new Intl.DateTimeFormat(locale.value, {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  timeZoneName: 'short',
+})
+
 // Compute the title - always show full date for accessibility
 const titleValue = computed(() => {
   if (props.title) return props.title
-  if (typeof props.datetime === 'string') return props.datetime
-  return props.datetime.toISOString()
+  const date = typeof props.datetime === 'string' ? new Date(props.datetime) : props.datetime
+  return dateFormatter.format(date)
 })
 </script>
 

From 76558aa3bfae41c1c642e8d69e740062feb12950 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 30 Jan 2026 02:46:40 +0800
Subject: [PATCH 2/2] test: update

---
 test/nuxt/components/DateTime.spec.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/test/nuxt/components/DateTime.spec.ts b/test/nuxt/components/DateTime.spec.ts
index a090d0bf30..612bf5d483 100644
--- a/test/nuxt/components/DateTime.spec.ts
+++ b/test/nuxt/components/DateTime.spec.ts
@@ -16,6 +16,7 @@ vi.mock('~/composables/useSettings', () => ({
 describe('DateTime', () => {
   const testDate = '2024-01-15T12:00:00.000Z'
   const testDateObject = new Date('2024-06-15T10:30:00.000Z')
+  const testYear = testDateObject.getUTCFullYear()
 
   beforeEach(() => {
     mockRelativeDates.value = false
@@ -61,12 +62,12 @@ describe('DateTime', () => {
   })
 
   describe('title attribute', () => {
-    it('uses datetime string as title by default', async () => {
+    it('has title with formatted date by default', async () => {
       const component = await mountSuspended(DateTime, {
         props: { datetime: testDate },
       })
       const timeEl = component.find('time')
-      expect(timeEl.attributes('title')).toBe(testDate)
+      expect(timeEl.attributes('title')).toContain(testYear)
     })
 
     it('uses custom title when provided', async () => {
@@ -81,12 +82,12 @@ describe('DateTime', () => {
       expect(timeEl.attributes('title')).toBe(customTitle)
     })
 
-    it('converts Date object to ISO string for title', async () => {
+    it('converts Date object to formatted date in title', async () => {
       const component = await mountSuspended(DateTime, {
         props: { datetime: testDateObject },
       })
       const timeEl = component.find('time')
-      expect(timeEl.attributes('title')).toBe(testDateObject.toISOString())
+      expect(timeEl.attributes('title')).toContain(testYear)
     })
   })
 
@@ -119,14 +120,14 @@ describe('DateTime', () => {
       let component = await mountSuspended(DateTime, {
         props: { datetime: testDate },
       })
-      expect(component.find('time').attributes('title')).toBe(testDate)
+      expect(component.find('time').attributes('title')).toContain(testYear)
 
       // Test with relative dates on
       mockRelativeDates.value = true
       component = await mountSuspended(DateTime, {
         props: { datetime: testDate },
       })
-      expect(component.find('time').attributes('title')).toBe(testDate)
+      expect(component.find('time').attributes('title')).toContain(testYear)
     })
   })