如何配置v-calendar DatePicker组件以支持多日期选择？

要实现DatePicker带弹出层、支持多选且可自由取消任意选中日期（包括最后一个），需要调整以下props和事件处理：

关键配置与处理步骤 #

• 开启多选模式：设置 multiple 为 true，让组件支持多选日期。
• 手动维护选中集合：用 v-model 绑定一个数组（而非单个值或null）来管理所有选中的日期，确保选中状态完全由外部控制。
• 自定义日期点击逻辑：监听 @date-click 事件，手动处理选中/取消选中的逻辑，并阻止默认行为，避免组件内部的选中跟踪干扰：
  • 若点击的日期已在选中数组中，移除它；
  • 若未选中，添加到数组中。
• 接管高亮控制：通过 highlighted-dates prop 绑定选中数组，让高亮状态完全跟随我们的选中集合，覆盖组件内部的高亮逻辑。

代码示例 #

<v-date-picker
  v-model="selectedDates"
  multiple
  @date-click="handleDateClick"
  :highlighted-dates="selectedDates"
>
</v-date-picker>

<script>
export default {
  data() {
    return {
      selectedDates: [] // 始终用数组维护选中状态，空数组表示无选中
    };
  },
  methods: {
    handleDateClick({ date, event }) {
      // 阻止组件默认选中逻辑
      event.preventDefault();
      // 统一日期格式，避免时间部分干扰判断
      const targetDateStr = date.toISOString().split('T')[0];
      const targetIndex = this.selectedDates.findIndex(
        d => d.toISOString().split('T')[0] === targetDateStr
      );

      if (targetIndex !== -1) {
        // 取消选中该日期
        this.selectedDates.splice(targetIndex, 1);
      } else {
        // 添加选中该日期
        this.selectedDates.push(new Date(date));
      }
    }
  }
};
</script>

原理说明 #

DatePicker在多选模式下，内部默认会维护一个独立的"最后点击日期"状态，即使清空v-model，该状态仍会保留导致高亮不消失。通过上述配置，我们完全接管了选中状态的维护和高亮的控制，彻底绕过组件内部的跟踪逻辑，就能实现自由取消任意选中日期的需求。

内容的提问来源于stack exchange，提问作者Ricardo van den Broek