当前位置：首页 > VUE

vue实现日历多选

2026-03-10 13:54:16VUE

Vue 日历多选实现方法

基础日历组件选择

使用成熟的第三方日历组件库如v-calendar或element-ui的日历组件，它们支持多选功能且易于集成。安装v-calendar：

npm install v-calendar

配置多选模式

在v-calendar中通过is-double-paned和mode属性设置多选：

vue实现日历多选

<template>
  <v-calendar
    :attributes="attrs"
    :mode="'range'"
    is-double-paned
    v-model="range"
  />
</template>

<script>
export default {
  data() {
    return {
      range: {
        start: null,
        end: null
      },
      attrs: [
        {
          highlight: {
            color: 'blue',
            fillMode: 'light'
          },
          dates: this.range
        }
      ]
    };
  }
};
</script>

自定义多选逻辑

如需完全自定义，可基于原生Date对象实现：

<template>
  <div class="calendar">
    <div 
      v-for="day in days" 
      :key="day.date"
      @click="toggleDate(day)"
      :class="{ 'selected': selectedDates.has(day.date) }"
    >
      {{ day.day }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDates: new Set(),
      days: generateCalendarDays() // 自定义日期生成函数
    };
  },
  methods: {
    toggleDate(day) {
      if (this.selectedDates.has(day.date)) {
        this.selectedDates.delete(day.date);
      } else {
        this.selectedDates.add(day.date);
      }
    }
  }
};
</script>

范围选择增强

对于日期范围选择，需处理开始/结束逻辑：

vue实现日历多选

methods: {
  handleDateClick(date) {
    if (!this.startDate) {
      this.startDate = date;
    } else if (!this.endDate && date > this.startDate) {
      this.endDate = date;
    } else {
      this.startDate = date;
      this.endDate = null;
    }
  }
}

样式与交互优化

添加CSS增强用户体验：

.calendar-day {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
}
.calendar-day.selected {
  background-color: #42b983;
  color: white;
}
.calendar-day.in-range {
  background-color: #e6f7ff;
}

完整组件示例

整合后的组件可能包含：

<template>
  <v-calendar
    :attributes="attributes"
    @dayclick="onDayClick"
    :min-date="new Date()"
    :max-date="getMaxDate()"
  />
</template>

<script>
export default {
  computed: {
    attributes() {
      return [
        {
          dates: this.selectedDates,
          highlight: true
        }
      ];
    }
  },
  methods: {
    onDayClick(day) {
      const date = day.date;
      // 多选逻辑实现
    }
  }
};
</script>