docs(VDatePicker): example with week selection

[J-Sek]

Description

I was asked about it on Discord and initially implemented it without Date Adapter. It was pure luck that I encountered a bug related to time zones and their DST variants. Other developers could benefit from example that utilizes useDate() to showcase clean and bug-free implementation.

Markup:

<template>
  <v-container>
    <v-row justify="space-around">
      <div>
        <v-date-picker
          :model-value="dates"
          title="Week selection"
          show-adjacent-months
          show-week
          @update:model-value="selectWeek($event)"
        >
          <template v-slot:header>
            <v-date-picker-header>
              {{ headerText }}
            </v-date-picker-header>
          </template>
        </v-date-picker>
        <div class="mt-3 d-flex justify-center">
          <v-btn :disabled="!dates.length" @click="dates = []">Clear</v-btn>
        </div>
      </div>
    </v-row>
  </v-container>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import { useDate } from 'vuetify'

  const adapter = useDate()

  const dates = ref([])

  const headerText = computed(() => {
    if (dates.value.length < 2) return 'Select week'

    const firstWeekDay = adapter.startOfWeek(dates.value[0])
    const firstYearDay = adapter.startOfYear(dates.value[0])

    const firstDayDiff = adapter.getDiff(firstWeekDay, firstYearDay, 'days')
    const weekOffset = firstYearDay.getDay() === 0 ? 1 : 0

    return `${firstWeekDay.getFullYear()} Week ${weekOffset + Math.ceil(firstDayDiff / 7)}`
  })

  function selectWeek (date) {
    const firstDay = adapter.startOfWeek(date)
    dates.value = Array.from({ length: 7 })
      .map((_, i) => adapter.addDays(firstDay, i))
  }
</script>

[J-Sek]

Closed in favor of #20867