fix(DateAdapter): update date formats to match interface (#20229)

fixes #20228

Author: RyanCrompton

packages/vuetify/src/composables/date/adapters/__tests__/vuetify.spec.ts

@@ -17,7 +17,23 @@ describe('vuetify date adapter', () => {
   })
 
   it('formats dates', () => {
-    let instance = new VuetifyDateAdapter({ locale: 'en-us' })
+    let instance = new VuetifyDateAdapter({ locale: 'en-gb' })
+    expect(instance.format(new Date(2000, 0, 1, 13), 'fullTime')).toBe('13:00')
+
+    instance = new VuetifyDateAdapter({ locale: 'en-us' })
+    expect(instance.format(new Date(2000, 0, 1, 13), 'fullTime')).toBe('1:00 PM')
+    expect(instance.format(new Date(2000, 0, 1, 13), 'fullTime12h')).toBe('1:00 PM')
+    expect(instance.format(new Date(2000, 0, 1, 13), 'fullTime24h')).toBe('13:00')
+
+    // These don't match the date-io spec
+    expect(instance.format(new Date(2000, 0, 1, 13), 'fullDateTime')).toBe('Jan 1, 2000, 1:00 PM')
+    expect(instance.format(new Date(2000, 0, 1, 13), 'fullDateTime12h')).toBe('Jan 1, 2000, 1:00 PM')
+    expect(instance.format(new Date(2000, 0, 1, 13), 'fullDateTime24h')).toBe('Jan 1, 2000, 13:00')
+
+    const keyboardDateTime12hFormat = '01/01/2000 1:00 PM'
+    expect(instance.format(new Date(2000, 0, 1, 13), 'keyboardDateTime')).toBe(keyboardDateTime12hFormat)
+    expect(instance.format(new Date(2000, 0, 1, 13), 'keyboardDateTime12h')).toBe(keyboardDateTime12hFormat)
+    expect(instance.format(new Date(2000, 0, 1, 13), 'keyboardDateTime24h')).toBe('01/01/2000 13:00')
 
     expect(instance.format(new Date(2000, 0, 1), 'fullDateWithWeekday')).toBe('Saturday, January 1, 2000')
 

packages/vuetify/src/composables/date/adapters/vuetify.ts

@@ -336,35 +336,35 @@ function format (
       options = { second: 'numeric' }
       break
     case 'fullTime':
-      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      options = { hour: 'numeric', minute: 'numeric' }
       break
     case 'fullTime12h':
-      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      options = { hour: 'numeric', minute: 'numeric', hour12: true }
       break
     case 'fullTime24h':
-      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
+      options = { hour: 'numeric', minute: 'numeric', hour12: false }
       break
     case 'fullDateTime':
-      options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      options = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' }
       break
     case 'fullDateTime12h':
-      options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      options = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true }
       break
     case 'fullDateTime24h':
-      options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
+      options = { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false }
       break
     case 'keyboardDate':
       options = { year: 'numeric', month: '2-digit', day: '2-digit' }
       break
     case 'keyboardDateTime':
-      options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
-      break
+      options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric' }
+      return new Intl.DateTimeFormat(locale, options).format(newDate).replace(/, /g, ' ')
     case 'keyboardDateTime12h':
-      options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
-      break
+      options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', hour12: true }
+      return new Intl.DateTimeFormat(locale, options).format(newDate).replace(/, /g, ' ')
     case 'keyboardDateTime24h':
-      options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
-      break
+      options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', hour12: false }
+      return new Intl.DateTimeFormat(locale, options).format(newDate).replace(/, /g, ' ')
     default:
       options = customFormat ?? { timeZone: 'UTC', timeZoneName: 'short' }
   }