vuetify
vuetify copied to clipboard
fix(VDatePicker): avoid updating month and year when model array is e…
Description
fixes #20015 Prevents this situation:
const after = adapter.date(undefined)
Markup:
<template>
<v-app>
<v-container>
<v-date-picker
v-model="arr"
hide-header
multiple
elevation="2"
min="2024-05-01"
max="2024-05-31"
next-icon=""
prev-icon=""
color="primary"
:year="2024"
:month="4"
>
</v-date-picker>
</v-container>
</v-app>
</template>
<script setup>
import { ref } from 'vue'
const arr = ref([])
</script>
@TIM56887 May I ask if there should be no problem in this situation
<template>
<v-container fluid>
<v-row class="pt-2">
<v-col v-for="month in 12" :key="month">
<v-date-picker
v-model="state.dates[month - 1].date"
hide-header
multiple
elevation="2"
:min="getFirstDate(month)"
:max="getLastDate(month)"
next-icon=""
prev-icon=""
color="primary"
:year="getFirstDate(month).year()"
:month="getFirstDate(month).month()"
>
</v-date-picker>
</v-col>
</v-row>
</v-container>
</template>
<script setup lang="ts">
import dayjs from "dayjs";
import { reactive, ref } from "vue";
const year = ref(new Date().getFullYear());
const state = reactive({
dates: [
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
{ date: [] },
] as any[],
});
const getFirstDate = (monthIndex: number): dayjs.Dayjs => {
const a = dayjs(new Date(year.value, monthIndex - 1, 1));
return a;
};
const getLastDate = (monthIndex: number): dayjs.Dayjs => {
const b = dayjs(new Date(year.value, monthIndex, 0));
return b;
};
</script>