[Bug Report][3.6.9] VDatePicker multiple for v-date-picker Display error

[liu-yuren]

Environment

Vuetify Version: 3.6.9 Last working version: 3.6.9 Vue Version: 3.3.4 Browsers: Chrome 125.0.0.0, Google Chrome OS: Windows

Steps to reproduce

Select calendar date, all controls will change synchronously

Expected Behavior

Looking forward to the same V-date ticker as in Vuetify2

Actual Behavior

Select date, all controls will change

Reproduction Link

https://play.vuetifyjs.com/#...

[liu-yuren]

@johnleider Look at this question? Urgent and urgent

[TIM56887]

You need to use different v-model values for each date picker

[liu-yuren]

@TIM56887 but，in vuetify2，no need to use different v-model values for each date picker

[jacekkarczmarczyk]

Yes, you need separate models in v2 as well

[liu-yuren]

@jacekkarczmarczyk OK。Next question。 #20015 Can this problem be solved

[liu-yuren]

@jacekkarczmarczyk

you no need separate models in v2 as well。Here is an example。

"dependencies": {
    "core-js": "^3.8.3",
    "dayjs": "^1.11.4",
    "vue": "^2.7.8",
    "vuetify": "^2.6.0"
  }
"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "babel-loader": "^9.1.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "~4.5.5",
    "vue-cli-plugin-vuetify": "~2.5.1",
    "vuetify-loader": "^1.7.0"
  }

<template>
  <v-container fluid>
    {{ state.dates }}
    <v-row class="pt-2">
      <v-col v-for="month in 12" :key="month">
        <v-date-picker
          v-model="state.dates"
          no-title
          multiple
          elevation="2"
          :day-format="dayFormat"
          :min="getFirstDate(month)"
          :max="getLastDate(month)"
          :picker-date="getFirstDate(month)"
          next-icon=""
          prev-icon=""
          color="primary"
        ></v-date-picker>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import { reactive, Ref, ref } from 'vue';

const state = reactive({
  dates: ['2021-01-01', '2021-02-11', '2022-01-10', '2023-02-11', '2023-10-09'],
});
const year: Ref<number> = ref(2022);

const dayFormat = (date: string): number => {
  return new Date(date).getDate();
};

// yyyy-mm-dd
const formatDate = (dt: Date): string => {
  var y = dt.getFullYear();
  var m = ('00' + (dt.getMonth() + 1)).slice(-2);
  var d = ('00' + dt.getDate()).slice(-2);
  return y + '-' + m + '-' + d;
};

const getFirstDate = (monthIndex: number): string => {
  console.log(formatDate(new Date(year.value, monthIndex - 1, 1)), '====');

  return formatDate(new Date(year.value, monthIndex - 1, 1));
};

const getLastDate = (monthIndex: number): string => {
  return formatDate(new Date(year.value, monthIndex, 0));
};
</script>

[jacekkarczmarczyk]

Ah, I see, I misunderstood the issue

[liu-yuren]

Okay, in the near future, do the team have plans to solve these two problems。#20015、#20016 。Because this component is useful in the project。@jacekkarczmarczyk @johnleider

[johnleider]

I don't entirely understand what you're trying to do. From your playground, it's behavior exactly as I would expect given the provided code.

[liu-yuren]

<v-row>
      <v-col cols="6" v-for="month in 12" :key="month">
        <v-date-picker
          v-model="dates"
          hide-header
          multiple
          elevation="2"
          :min="getFirstDate(month)"
          :max="getLastDate(month)"
          next-icon=""
          prev-icon=""
          color="primary"
          :year="year"
          :month="month - 1"
        >
        </v-date-picker>
      </v-col>
    </v-row>

in vuetify2, Choosing a certain month date does not affect other v-date picker components. Why is the same code two behaviors in vuetify2 and vuetify3