diff --git a/packages/docs/src/pages/en/features/dates.md b/packages/docs/src/pages/en/features/dates.md index 7bb2b43690f..3c2f234bbdf 100644 --- 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 index 8537657a50e..f48aac8779e 100644 --- a/packages/vuetify/src/composables/date/adapters/vuetify.ts +++ b/packages/vuetify/src/composables/date/adapters/vuetify.ts @@ -280,23 +280,24 @@ 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' } @@ -304,16 +305,61 @@ function format ( 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' }