docs(VDatePicker): example with week selection

packages/docs/src/examples/v-date-picker/misc-week-selection.vue

@@ -0,0 +1,95 @@
+<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>
+
+<script>
+  import { useDate } from 'vuetify'
+
+  export default {
+    setup () {
+      const adapter = useDate()
+      return { adapter }
+    },
+    data: () => ({
+      dates: [],
+    }),
+    computed: {
+      headerText () {
+        if (this.dates.length < 2) return 'Select week'
+
+        const firstWeekDay = this.adapter.startOfWeek(this.dates[0])
+        const firstYearDay = this.adapter.startOfYear(this.dates[0])
+
+        const firstDayDiff = this.adapter.getDiff(
+          firstWeekDay,
+          firstYearDay,
+          'days'
+        )
+        const weekOffset = firstYearDay.getDay() === 0 ? 1 : 0
+
+        return `${firstWeekDay.getFullYear()} Week ${
+          weekOffset + Math.ceil(firstDayDiff / 7)
+        }`
+      },
+    },
+    mounted () {
+      this.adapter = useDate()
+    },
+    methods: {
+      selectWeek (date) {
+        const firstDay = this.adapter.startOfWeek(date)
+        this.dates = Array.from({ length: 7 }).map((_, i) =>
+          this.adapter.addDays(firstDay, i)
+        )
+      },
+    },
+  }
+</script>

packages/docs/src/pages/en/components/date-pickers.md

@@ -94,6 +94,12 @@ Specify allowed dates using objects or functions. When using objects, accepts a
 
 <ExamplesExample file="v-date-picker/prop-allowed-dates" />
 
+### Week selection
+
+You can capture date selection event to select entire week.
+
+<ExamplesExample file="v-date-picker/misc-week-selection" />
+
 ### Internationalization
 
 Vuetify components can localize date formats by utilizing the [i18n](/features/internationalization) feature. This determines the appropriate locale for date display. When the default date adapter is in use, localization is managed automatically.