feat(VDatePicker): week selection

[J-Sek]

Description

• multiple="week" let's user select week with single click
• highlights row on hover and upon selection
• does not include selection text format (more flexibility for developers)

Markup:

<template>
  <v-app>
    <v-container>
      <v-date-picker
        v-model="dates"
        :first-day-of-week="1"
        color="primary"
        multiple="week"
        title="Week selection"
        show-adjacent-months
        show-week
      >
        <template #header>
          <v-date-picker-header>
            {{ headerText }}
          </v-date-picker-header>
        </template>
      </v-date-picker>
      <v-btn @click="dates = []">Clear</v-btn>
      <pre>{{ dates }}</pre>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { useDate } from 'vuetify'
  const dates = ref<Date[]>([])

  const adapter = useDate()

  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)}`
  })
</script>