fix(VDatePicker): use start of week to calculate week numbers

[J-Sek]

Description

fixes #20724
fixes #20490

• ISO-ish 4-day requirement for the first week defaults to match en-US

Markup:

<template>
  <v-app style="background-color: rgba(var(--v-theme-on-surface), 0.2)">
    <v-container>
      <div class="d-flex justify-center align-center ga-3">
        <span class="opacity-70">locale:</span>
        <v-chip-group v-model="currentLocale">
          <v-chip filter label text="en" value="en"></v-chip>
          <v-chip filter label text="pl" value="pl"></v-chip>
          <v-chip filter label text="fr" value="fr"></v-chip>
          <v-chip filter label text="pt" value="pt"></v-chip>
        </v-chip-group>
      </div>
      <div class="d-flex justify-center align-center ga-3">
        <span class="opacity-70">startOfWeek:</span>
        <v-chip-group v-model="startOfWeek">
          <v-chip
            v-for="o in startOfWeekOptions"
            v-bind="o"
            :key="o.value"
            filter
            label
          ></v-chip>
        </v-chip-group>
      </div>
      <div class="d-flex flex-wrap justify-center ga-6">
        <v-locale-provider :locale="currentLocale">
          <v-date-picker
            v-for="d in 6"
            :key="d"
            :elevation="5"
            :first-day-of-week="startOfWeek"
            :model-value="new Date(2023 + d, 0, 1)"
            class="mt-3"
            hide-header
            show-adjacent-months
            show-week
          ></v-date-picker>
        </v-locale-provider>
      </div>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const currentLocale = ref('en')
  const startOfWeek = ref(undefined)
  const startOfWeekOptions = 'Sun|Mon|Tue|Wed|Thu|Fri|Sat'
    .split('|')
    .map((x, i) => ({ text: x, value: i }))
</script>

[johnleider]

Please make sure to check #20794 as I think some of the changes might effect your P.R.

[J-Sek]

If we decide to trust Intl.Locale we could rewrite firstDay = [ ... ] into weekInfo = [ ... ]
It is just a matter of mapping all the codes

[
    {code: 'US', intlCode: 'en-US'},
    {code: 'FR', intlCode: 'fr'},
    {code: 'PL', intlCode: 'pl'},
    // etc...
]
.map(({code, intlCode}) => {
    const {firstDay, minimalDays} = new Intl.Locale(intlCode).getWeekInfo()
    return `'${code}': { firstDay: ${firstDay}, minimalDays: ${minimalDays} },`
})
.join('\n')

[J-Sek]

Ok, this PR was wrong in the state when firstWeekSize was forced to 4 (ISO) while it is 1 in United States.
I am trying to align with #20794 so we can merge it together.
When generating weekInfo dictionary in place of firstDay map, there are sometimes multiple matches and the old value do not align. It would be great if we could resolve this quickly.

[J-Sek]

@johnleider this PR can be merged instead of #20794 once we resolve changes to firstDay

Code	old	Intl	DateFns	Day.js	CLDR
AG	0	1	-	-	0
BS	0	1	1/4	1	0
BT	0	1 or 0(dz)	-	-	0
BW	0	1 or 0(tn)	-	-	0
DJ	6	1	-	-	6
DM	0	1	-	-	0
MM	0	1 or 0(my)	-	-	0
MZ	0	1	-	-	0
SM	1	0	-	-	1
UM	0	1(en-UM)	-	-	0
VI	0	1	1/1	1	0
WS	0	1 or 0(sm)	-	-	0

Options:

• revert back to original values
  • although BS and VI have mixed info nevermind, mapped to correct locale codes
• accept all
• pick and choose

[J-Sek]

Glad I had this test case for Portugal. It was incorrectly assigned during refactoring.

[johnleider]

this PR can be merged instead of #20794 once we resolve changes to firstDay

What changes are left for firstDay?

[J-Sek]

What changes are left for firstDay?

None, all reverted. Hard to prove after refactoring into the concise switch though.. You'd need a script probably

const firstDay = {
  '001': 1,
  AD: 1,
  // etc.
}

console.log('codes for 0', Object.entries(firstDay).filter((_,v) => v === 0).map(([k,_]) => k).sort().join(' '))
console.log('codes for 1', Object.entries(firstDay).filter((_,v) => v === 1).map(([k,_]) => k).sort().join(' '))
console.log('codes for 6', Object.entries(firstDay).filter((_,v) => v === 6).map(([k,_]) => k).sort().join(' '))

[johnleider]

I know that I added new arguments to some of the typings but it was probably the wrong move. We need to figure out a way to get this information without needing to change the interface.

[KaelWD]

Sounds like we should just be using ISO rules for week of year https://unicode-org.atlassian.net/browse/CLDR-18275

[J-Sek]

Sounds like we should just be using ISO rules for week of year unicode-org.atlassian.net/browse/CLDR-18275

We could, but I can only see this being rolled out in Vuetify if we also let users opt-out with first-day-of-year prop or some other non-hacky way.

[J-Sek]

One last fix.. hopefully. I just realized when clicking on the playground - after choosing non-us locale, selecting startOfWeek: Sun was ignored.