fix(VDatePicker): don't truncate day names in other locales

fixes vuetifyjs#19013 reverts 7e8dbcf short is too long in arabic and chinese, and [0] breaks any locale that needs more than one character to represent a day
tmasrat · Jan 25, 2024 · 9ceade2 · 9ceade2
1 parent c48c2a7
commit 9ceade2
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx b/packages/vuetify/src/components/VDatePicker/VDatePickerMonth.tsx
@@ -147,7 +147,7 @@ export const VDatePickerMonth = genericComponent<VDatePickerMonthSlots>()({
                 'v-date-picker-month__day',
                 'v-date-picker-month__weekday',
               ]}
-            >{ weekDay[0] }</div>
+            >{ weekDay }</div>
           ))}
 
           { daysInMonth.value.map((item, i) => {

diff --git a/packages/vuetify/src/composables/date/adapters/__tests__/vuetify.spec.ts b/packages/vuetify/src/composables/date/adapters/__tests__/vuetify.spec.ts
@@ -7,17 +7,17 @@ import { VuetifyDateAdapter } from '../vuetify'
 import type { TimeZone } from 'timezone-mock'
 
 describe('vuetify date adapter', () => {
-  it('should return weekdays based on locale', () => {
+  it('returns weekdays based on locale', () => {
     let instance = new VuetifyDateAdapter({ locale: 'en-us' })
 
-    expect(instance.getWeekdays()).toStrictEqual(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'])
+    expect(instance.getWeekdays()).toStrictEqual(['S', 'M', 'T', 'W', 'T', 'F', 'S'])
 
     instance = new VuetifyDateAdapter({ locale: 'sv-se' })
 
-    expect(instance.getWeekdays()).toStrictEqual(['mån', 'tis', 'ons', 'tors', 'fre', 'lör', 'sön'])
+    expect(instance.getWeekdays()).toStrictEqual(['M', 'T', 'O', 'T', 'F', 'L', 'S'])
   })
 
-  it('should format dates', () => {
+  it('formats dates', () => {
     let instance = new VuetifyDateAdapter({ locale: 'en-us' })
 
     expect(instance.format(new Date(2000, 0, 1), 'fullDateWithWeekday')).toBe('Saturday, January 1, 2000')
@@ -36,7 +36,7 @@ describe('vuetify date adapter', () => {
     'Etc/GMT-2',
     'Etc/GMT-4',
     'Etc/GMT+4',
-  ])('should handle timezone %s when parsing date without time', timezone => {
+  ])('handles timezone %s when parsing date without time', timezone => {
     // locale option here has no impact on timezone
     const instance = new VuetifyDateAdapter({ locale: 'en-us' })
 

diff --git a/packages/vuetify/src/composables/date/adapters/vuetify.ts b/packages/vuetify/src/composables/date/adapters/vuetify.ts
@@ -255,15 +255,13 @@ function date (value?: any): Date | null {
 
 const sundayJanuarySecond2000 = new Date(2000, 0, 2)
 
-// The number of letters returned by getWeekday() varies by date library
-// So we've opted for 3-letter abbreviations for all locales
 function getWeekdays (locale: string) {
   const daysFromSunday = firstDay[locale.slice(-2).toUpperCase()]
 
   return createRange(7).map(i => {
     const weekday = new Date(sundayJanuarySecond2000)
     weekday.setDate(sundayJanuarySecond2000.getDate() + daysFromSunday + i)
-    return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(weekday)
+    return new Intl.DateTimeFormat(locale, { weekday: 'narrow' }).format(weekday)
   })
 }