feat(dates): add all supported formats

vuetifyjs · Apr 10, 2024 · 45199a4 · 45199a4
1 parent b51fc39
commit 45199a4
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 27 deletions.
diff --git a/packages/docs/src/pages/en/features/dates.md b/packages/docs/src/pages/en/features/dates.md
@@ -64,16 +64,35 @@ For a list of all supported date adapters, visit the [date-io](https://github.co
 
 The date composable supports the following date formatting options:
 
-* fullDateWithWeekday
-* normalDateWithWeekday
-* keyboardDate
-* monthAndDate
-* monthAndYear
-* month
-* monthShort
-* dayOfMonth
-* shortDate
-* year
+| Format Name | Format Output |
+| - | - |
+| fullDate | "Jan 1, 2024" |
+| fullDateWithWeekday | "Tuesday, January 1, 2024" |
+| normalDate | "1 January" |
+| normalDateWithWeekday | "Wed, Jan 1" |
+| shortDate | "Jan 1" |
+| year | "2024" |
+| month | "January" |
+| monthShort | "Jan" |
+| monthAndYear | "January 2024" |
+| monthAndDate | "January 1" |
+| weekday | "Wednesday" |
+| weekdayShort | "Wed" |
+| dayOfMonth | "1" |
+| hours12h | "11" |
+| hours24h | "23" |
+| minutes | "44" |
+| seconds | "00" |
+| fullTime | "11:44 PM" for US, "23:44" for Europe |
+| fullTime12h | "11:44 PM" |
+| fullTime24h | "23:44" |
+| fullDateTime | "Jan 1, 2024 11:44 PM" |
+| fullDateTime12h | "Jan 1, 2024 11:44 PM" |
+| fullDateTime24h | "Jan 1, 2024 23:44" |
+| keyboardDate | "02/13/2024" |
+| keyboardDateTime | "02/13/2024 23:44" |
+| keyboardDateTime12h | "02/13/2024 11:44 PM" |
+| keyboardDateTime24h | "02/13/2024 23:44" |
 
 The following example shows how to use the date composable to format a date string:
 

diff --git a/packages/vuetify/src/composables/date/adapters/vuetify.ts b/packages/vuetify/src/composables/date/adapters/vuetify.ts
@@ -280,40 +280,86 @@ function format (
 
   let options: Intl.DateTimeFormatOptions = {}
   switch (formatString) {
-    case 'fullDateWithWeekday':
-      options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }
+    case 'fullDate':
+      options = { year: 'numeric', month: 'long', day: 'numeric' }
       break
-    case 'hours12h':
-      options = { hour: 'numeric', hour12: true }
+    case 'fullDateWithWeekday':
+      options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
       break
+    case 'normalDate':
+      const day = newDate.getDate()
+      const month = new Intl.DateTimeFormat(locale, { month: 'long' }).format(newDate)
+      return `${day} ${month}`
     case 'normalDateWithWeekday':
       options = { weekday: 'short', day: 'numeric', month: 'short' }
       break
-    case 'keyboardDate':
-      options = { day: '2-digit', month: '2-digit', year: 'numeric' }
-      break
-    case 'monthAndDate':
-      options = { month: 'long', day: 'numeric' }
+    case 'shortDate':
+      options = { month: 'short', day: 'numeric' }
       break
-    case 'monthAndYear':
-      options = { month: 'long', year: 'numeric' }
+    case 'year':
+      options = { year: 'numeric' }
       break
     case 'month':
       options = { month: 'long' }
       break
     case 'monthShort':
       options = { month: 'short' }
       break
-    case 'dayOfMonth':
-      return new Intl.NumberFormat(locale).format(newDate.getDate())
-    case 'shortDate':
-      options = { year: '2-digit', month: 'numeric', day: 'numeric' }
+    case 'monthAndYear':
+      options = { month: 'long', year: 'numeric' }
+      break
+    case 'monthAndDate':
+      options = { month: 'long', day: 'numeric' }
+      break
+    case 'weekday':
+      options = { weekday: 'long' }
       break
     case 'weekdayShort':
       options = { weekday: 'short' }
       break
-    case 'year':
-      options = { year: 'numeric' }
+    case 'dayOfMonth':
+      return new Intl.NumberFormat(locale).format(newDate.getDate())
+    case 'hours12h':
+      options = { hour: 'numeric', hour12: true }
+      break
+    case 'hours24h':
+      options = { hour: 'numeric', hour12: false }
+      break
+    case 'minutes':
+      options = { minute: 'numeric' }
+      break
+    case 'seconds':
+      options = { second: 'numeric' }
+      break
+    case 'fullTime':
+      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      break
+    case 'fullTime12h':
+      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      break
+    case 'fullTime24h':
+      options = { hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
+      break
+    case 'fullDateTime':
+      options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      break
+    case 'fullDateTime12h':
+      options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      break
+    case 'fullDateTime24h':
+      options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: '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
+    case 'keyboardDateTime12h':
+      options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true }
+      break
+    case 'keyboardDateTime24h':
+      options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false }
       break
     default:
       options = customFormat ?? { timeZone: 'UTC', timeZoneName: 'short' }