Vue3日期选择器：选中日期间日期高亮异常问题求助

核心错误点 #

• between数组未填充中间日期：你仅定义了between数组，但选中两个日期后，完全没有把它们之间的日期添加到这个数组里，导致数组始终为空。
• 类绑定判断逻辑错误：between.indexOf(date)在日期不在数组中时返回-1，而Vue的类绑定对象语法里，-1属于“真值”，会被判定为true，所以所有日期都被加上了between类。正确的判断应该是between.indexOf(date) !== -1。
• 未处理日期选择顺序问题：如果用户先选大日期再选小日期，后续计算中间日期会出错，需要先统一日期的先后顺序。

修复后的代码示例 #

模板部分 #

<div
  v-for="date in daysInMonth(currentYear, currentMonthInNumber, firstDay, lastDay)"
  :key="date"
  class="day"
  :class="{ 
    active: date === firstDay || date === lastDay, 
    between: between.indexOf(date) !== -1 
  }"
  @click="choosingDates(date)"
> 
  {{ date }} 
</div>

脚本部分 #

export default {
  data() {
    return {
      firstDay: false,
      between: [],
      lastDay: false,
      firstDaySelected: false,
    };
  },
  methods: {
    choosingDates(date) {
      if (!this.firstDay) {
        // 重置状态，开始选择第一个日期
        this.firstDay = date;
        this.lastDay = false;
        this.between = [];
      } else if (!this.lastDay) {
        // 确定第二个日期并计算中间日期
        this.lastDay = date;
        this.calculateBetweenDates();
      } else {
        // 已选两个日期，点击后重置选择状态
        this.firstDay = date;
        this.lastDay = false;
        this.between = [];
      }
    },
    calculateBetweenDates() {
      // 统一日期顺序，确保start是较小值，end是较大值
      const start = Math.min(this.firstDay, this.lastDay);
      const end = Math.max(this.firstDay, this.lastDay);
      this.between = [];
      // 填充两个日期之间的所有日期
      for (let i = start + 1; i < end; i++) {
        this.between.push(i);
      }
    },
    // 保留你原本的daysInMonth方法
    daysInMonth(year, month, firstDay, lastDay) {
      // 原逻辑代码...
    }
  }
};

额外说明 #

• 新增了重复点击后的重置逻辑，用户选完两个日期后再点击，会重新开始选择新的日期范围，提升交互流畅度。
• calculateBetweenDates方法通过Math.min和Math.max处理了日期选择顺序的问题，不管用户先选大日期还是小日期，都能正确计算中间的日期。

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