使用Vuetify实现多日期选择失败求助（Vue.js/Nuxt.js环境）

要让v-date-picker支持多日期选中，你需要调整两个关键部分：

• 修改v-model绑定的变量类型：多选模式下，v-model不能是单个Date对象，必须是数组（可以是Date对象数组或日期字符串数组）
• 显式添加multiple属性：开启组件的多选模式

修改后的完整代码 #

<script setup>
// 用数组存储选中的日期，初始值可以包含默认选中的日期
const selectedDates = ref([new Date(2024, 1, 19)])
</script>

<template>
  <v-date-picker 
    v-model="selectedDates" 
    multiple  <!-- 必须添加这个属性开启多选 -->
    :rows="2" 
    :step="1" 
    class="bg-surface" 
    locale="tr" 
  />
</template>

额外说明 #

• 如果需要限制最多选中的日期数量，可以添加max属性，比如:max="3"表示最多选3天
• 点击日期即可切换选中/取消选中状态，组件会自动维护数组内的选中值
• 若偏好使用日期字符串格式（如['2024-02-19']），只需将ref初始值改为对应格式的数组即可

内容的提问来源于stack exchange，提问作者bsnz