feat(VDatePicker): week selection

[J-Sek]

Description

• multiple="week" let's user select week with single click
• highlights row on hover and upon selection
• dedicated header and title in picker header

Markup:

Playground 1

<template>
  <v-app>
    <v-container max-width="500">
      <v-text-field label="native week selector" type="week" />
      <v-date-input
        v-model="dates"
        color="primary"
        label="VDateInput"
        multiple="week"
        placeholder="mm/dd/yyyy - mm/dd/yyyy"
        persistent-placeholder
        show-week
      />

      <v-date-picker
        v-model="dates"
        color="primary"
        multiple="week"
        show-adjacent-months
        show-week
      />
      <v-btn @click="dates = []">Clear</v-btn>
      <pre>{{ dates }}</pre>
    </v-container>
  </v-app>
</template>

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

  const dates = ref([])
</script>

Playground 2

<template>
  <v-app>

    <v-app-bar class="pr-10">
      <v-spacer />
      <v-switch v-model="showWeek" label="show week" hide-details />
    </v-app-bar>
    <v-main scrollable>

      <v-locale-provider locale="en">
        <v-container class="d-flex align-start ga-6 justify-center flex-wrap" width="1600">
          <v-date-picker
            v-model="value"
            :max="new Date()"
            :min="new Date(2000, 9, 15)"
            :show-week="showWeek"
            elevation="24"
            multiple="week"
          />
          <v-date-picker
            v-model="value"
            :max="new Date()"
            :min="new Date(2000, 9, 15)"
            :show-week="showWeek"
            elevation="24"
            multiple="week"
            no-month-picker
          />
          <v-date-picker
            v-model="value"
            :max="new Date()"
            :min="new Date(2000, 9, 15)"
            :show-week="showWeek"
            elevation="24"
            multiple="week"
          />
          <v-date-picker
            v-model="value"
            :max="new Date()"
            :min="new Date(2000, 9, 15)"
            :show-week="showWeek"
            color="primary"
            elevation="24"
            multiple="week"
          />
          <v-date-picker
            v-model="value"
            :max="new Date()"
            :min="new Date(2000, 9, 15)"
            :show-week="showWeek"
            :weekdays="[1,2,3,4,5]"
            class="weekdays-primary"
            elevation="24"
            multiple="week"
            weekday-format="short"
            hide-header
          />
          <v-date-picker
            v-model="value"
            :max="new Date()"
            :min="new Date(2000, 9, 15)"
            :show-week="showWeek"
            elevation="24"
            multiple="week"
            weeks-in-month="dynamic"
            hide-header
            hide-weekdays
            show-adjacent-months
          />
        </v-container>
      </v-locale-provider>
      <!-- verify with RTL: <v-locale-provider locale="ar"> ... </v-locale-provider> -->
    </v-main>
  </v-app>
</template>

<script setup>
  import { shallowRef } from 'vue'
  const value = shallowRef(null)
  const showWeek = shallowRef(false)
</script>

<style>
.weekdays-primary {
  padding-top: 12px;
  .v-date-picker-month__weekday {
    color: rgb(var(--v-theme-primary));
  }

  .v-date-picker-month__days {
    position: relative;

    &:before,
    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background-color: rgb(var(--v-theme-primary));
      top: 4px;
    }

    &:after {
      top: 36px;
    }
  }
}
</style>

[J-Sek]

I think at some point we will need to get rid of grid gap as it makes displaying range highlight very hard. I am compensating with CSS, but this cannot scale beyond week selection.