vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

fix(VDatePicker): avoid updating month and year when model array is e…

Open TIM56887 opened this issue 1 year ago • 1 comments

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 avatar Jun 17 '24 06:06 TIM56887

@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>

liu-yuren avatar Jun 17 '24 09:06 liu-yuren