feat(VDatePicker): restore weekday-format (#21290)

Author: J-Sek

packages/api-generator/src/locale/en/VCalendarMonthly.json

@@ -13,7 +13,6 @@
     "showMonthOnFirst": "Whether the name of the month should be displayed on the first day of the month.",
     "showWeek": "Whether week numbers should be displayed when using the `month` view.",
     "start": "The starting date on the calendar (inclusive) in the format of `YYYY-MM-DD`. This may be ignored depending on the `type` of the calendar.",
-    "weekdayFormat": "Formats day of the week string that appears in the header to specified locale.",
     "weekdays": "Specifies which days of the week to display. To display Monday through Friday only, a value of `[1, 2, 3, 4, 5]` can be used. To display a week starting on Monday a value of `[1, 2, 3, 4, 5, 6, 0]` can be used."
   }
 }

packages/api-generator/src/locale/en/VCalendarWeekly.json

@@ -13,7 +13,6 @@
     "showMonthOnFirst": "Whether the name of the month should be displayed on the first day of the month.",
     "showWeek": "Whether week numbers should be displayed when using the `month` view.",
     "start": "The starting date on the calendar (inclusive) in the format of `YYYY-MM-DD`. This may be ignored depending on the `type` of the calendar.",
-    "weekdayFormat": "Formats day of the week string that appears in the header to specified locale.",
     "weekdays": "Specifies which days of the week to display. To display Monday through Friday only, a value of `[1, 2, 3, 4, 5]` can be used. To display a week starting on Monday a value of `[1, 2, 3, 4, 5, 6, 0]` can be used."
   }
 }

packages/api-generator/src/locale/en/VDatePicker.json

@@ -40,7 +40,6 @@
     "type": "Determines the type of the picker - `date` for date picker, `month` for month picker.",
     "value": "Date picker model (ISO 8601 format, YYYY-mm-dd or YYYY-mm).",
     "viewMode": "Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`.",
-    "weekdayFormat": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Called with date (ISO 8601 **date** string) arguments.",
     "width": "Width of the picker.",
     "yearFormat": "Allows you to customize the format of the year string that appears in the header of the calendar. Called with date (ISO 8601 **date** string) arguments.",
     "yearIcon": "Sets the icon in the year selection button."

packages/api-generator/src/locale/en/generic.json

@@ -62,6 +62,7 @@
     "trueValue": "Sets value for truthy state.",
     "valueComparator": "Apply a custom comparison algorithm to compare **model-value** and values contains in the **items** prop.",
     "variant": "Applies a distinct style to the component.",
+    "weekdayFormat": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Uses `'narrow'` by default. (Note: not guaranteed to work when using custom date adapters.)",
     "width": "Sets the width for the component."
   },
   "slots": {

packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx

@@ -175,7 +175,7 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
             key={ daysInMonth.value[0].date?.toString() }
             class="v-date-picker-month__days"
           >
-            { !props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek).map(weekDay => (
+            { !props.hideWeekdays && adapter.getWeekdays(props.firstDayOfWeek, props.weekdayFormat).map(weekDay => (
               <div
                 class={[
                   'v-date-picker-month__day',

packages/vuetify/src/composables/calendar.ts

@@ -78,6 +78,7 @@ export const makeCalendarProps = propsFactory({
     type: [Number, String],
     default: undefined,
   },
+  weekdayFormat: String as PropType<'long' | 'short' | 'narrow' | undefined>,
 }, 'calendar')
 
 export function useCalendar (props: CalendarProps) {

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

@@ -36,7 +36,7 @@ export interface DateAdapter<T = unknown> {
   setYear (date: T, year: number): T
   getDiff (date: T, comparing: T | string, unit?: string): number
   getWeekArray (date: T, firstDayOfWeek?: number | string): T[][]
-  getWeekdays (firstDayOfWeek?: number | string): string[]
+  getWeekdays (firstDayOfWeek?: number | string, weekdayFormat?: 'long' | 'short' | 'narrow'): string[]
   getWeek (date: T, firstDayOfWeek?: number | string, firstWeekMinSize?: number): number
   getMonth (date: T): number
   setMonth (date: T, month: number): T

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

@@ -142,13 +142,13 @@ function date (value?: any): Date | null {
 
 const sundayJanuarySecond2000 = new Date(2000, 0, 2)
 
-function getWeekdays (locale: string, firstDayOfWeek?: number) {
+function getWeekdays (locale: string, firstDayOfWeek?: number, weekdayFormat?: 'long' | 'short' | 'narrow') {
   const daysFromSunday = firstDayOfWeek ?? weekInfo(locale)?.firstDay ?? 0
 
   return createRange(7).map(i => {
     const weekday = new Date(sundayJanuarySecond2000)
     weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i)
-    return new Intl.DateTimeFormat(locale, { weekday: 'narrow' }).format(weekday)
+    return new Intl.DateTimeFormat(locale, { weekday: weekdayFormat ?? 'narrow' }).format(weekday)
   })
 }
 
@@ -597,9 +597,9 @@ export class VuetifyDateAdapter implements DateAdapter<Date> {
     return getDiff(date, comparing, unit)
   }
 
-  getWeekdays (firstDayOfWeek?: number | string) {
+  getWeekdays (firstDayOfWeek?: number | string, weekdayFormat?: 'long' | 'short' | 'narrow') {
     const firstDay = firstDayOfWeek !== undefined ? Number(firstDayOfWeek) : undefined
-    return getWeekdays(this.locale, firstDay)
+    return getWeekdays(this.locale, firstDay, weekdayFormat)
   }
 
   getYear (date: Date) {