feat(VDatePicker): pass through slots for day, week, month to sub components

[luukvnes]

Description

This change adds a new dateClass prop to the VDatePicker and VDateInput components, allowing for custom styling of individual dates in the calendar. The dateClass prop takes a function that takes a date and returns an array of classes. These classes are added to the dates in the calender.

My particular usecase is that i want to add a red border around particular days to signify an error happening on that day. Currently the easiest way is to use document.queryselector, this is particularly a nuisance, because you have to reapply the styling anytime the component switches to the view with single dates (not months/years).

Markup:

<template>
  <v-app>
    <v-container>
      <v-date-picker :date-class="d => d.getDay() % 2 == 0 ? ['custom-class'] : []" />
      <v-date-input :date-class="d => d.getDay() % 2 == 0 ? ['custom-class'] : []" />
    </v-container>
  </v-app>
</template>
<script>
  export default {
    name: 'Playground',
    setup () {
      return {
        //
      }
    },
  }
</script>

<style>
  .custom-class button {
    border: 1px red solid;
  }
</style>

[KaelWD]

There's already a slot for this:

<template #day="{ item, props }">
  <v-btn
    v-bind="props"
    :class="{ 'custom-class': item.date.getDay() % 2 == 0 }"
  />
</template>

[luukvnes]

@KaelWD Ah, i missed that. Currently though the VDatePicker does not pass slots through to the VDatePickerMonth. Would a pull request including a change like the following (where slots are passed through) be accepted? https://github.com/luukvnes/vuetify/commit/d09c303f36cc6dc6aba99a655795dd8945296e0f#diff-e52a094feb57d0b046a8b9c49e5b4870078f419377cccff97ad7bac766cd09ab

Obviously this is missing type declarations and documentions, but as an idea

[KaelWD]

Ok yeah that should definitely be forwarded.

[luukvnes]

<template>
  <v-app>
    <v-container>
      <v-date-picker>
        <template #day="{ item, props }">
          <v-btn
            v-bind="props"
            :class="{ 'custom-class': item.date.getDay() % 2 == 0 }"
          />
        </template>
        <template #month="{ month, props }">
          <v-btn
            v-bind="props"
            :class="{ 'custom-class': month.text == 'Jan' }"
          >
            {{ month.text }}
          </v-btn>
        </template>
        <template #year="{ year, props }">
          <v-btn
            v-bind="props"
            :class="{ 'custom-class': year.text == '2022' }"
          />
        </template>
      </v-date-picker>
    </v-container>
  </v-app>
</template>
<script>
  export default {
    name: 'Playground',
    setup () {
      return {
        //
      }
    },
  }
</script>

<style>
  .custom-class {
    border: 1px red solid;
  }
</style>

[luukvnes]

Description This change passes through the slots for VDatePicker sub components, allowing for custom styling of individual dates in the calendar. The dateClass prop takes a function that takes a date and returns an array of classes. These classes are added to the dates in the calender.