vue 实现日期多选

实现日期多选的基础方法

使用 v-model 绑定一个数组来存储选中的日期，结合 Vue 的 @change 或 @click 事件实现多选逻辑。以下是基于原生 <input type="date"> 的简单实现：

<template>
  <div>
    <input 
      type="date" 
      v-model="selectedDate" 
      @change="handleDateChange"
    />
    <ul>
      <li v-for="(date, index) in selectedDates" :key="index">
        {{ date }}
        <button @click="removeDate(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      selectedDates: []
    };
  },
  methods: {
    handleDateChange() {
      if (this.selectedDate && !this.selectedDates.includes(this.selectedDate)) {
        this.selectedDates.push(this.selectedDate);
      }
      this.selectedDate = '';
    },
    removeDate(index) {
      this.selectedDates.splice(index, 1);
    }
  }
};
</script>

使用第三方日期组件

对于更复杂的场景，推荐使用成熟的日期选择库如 v-calendar 或 element-ui 的日期组件。

使用 v-calendar 实现多选

安装依赖：

npm install v-calendar

示例代码：

<template>
  <v-date-picker 
    v-model="selectedDates" 
    is-range 
    is-multiple
    :max-date="new Date()"
  />
</template>

<script>
import { DatePicker } from 'v-calendar';
export default {
  components: {
    'v-date-picker': DatePicker
  },
  data() {
    return {
      selectedDates: []
    };
  }
};
</script>

使用 element-ui 的日期范围选择

安装依赖：

npm install element-ui

示例代码：

<template>
  <el-date-picker
    v-model="selectedDates"
    type="dates"
    placeholder="选择多个日期"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
  />
</template>

<script>
export default {
  data() {
    return {
      selectedDates: []
    };
  }
};
</script>

自定义日期多选组件

如果需要完全自定义逻辑，可以封装一个组件：

<template>
  <div class="custom-date-picker">
    <div 
      v-for="day in daysInMonth" 
      :key="day.date"
      :class="{ 'selected': day.selected }"
      @click="toggleDate(day)"
    >
      {{ day.date.getDate() }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['year', 'month'],
  data() {
    return {
      selectedDays: []
    };
  },
  computed: {
    daysInMonth() {
      // 生成当月所有日期的逻辑
    }
  },
  methods: {
    toggleDate(day) {
      const index = this.selectedDays.findIndex(d => 
        d.toDateString() === day.date.toDateString()
      );
      if (index === -1) {
        this.selectedDays.push(day.date);
      } else {
        this.selectedDays.splice(index, 1);
      }
      this.$emit('input', this.selectedDays);
    }
  }
};
</script>

<style>
.selected {
  background-color: #409EFF;
  color: white;
}
</style>

注意事项

• 日期格式处理：建议使用 moment.js 或 date-fns 处理日期格式转换
• 范围限制：通过 min-date 和 max-date 限制可选范围
• 性能优化：大量日期渲染时需使用虚拟滚动
• 移动端适配：考虑触摸事件和响应式布局

以上方法可根据实际需求组合或调整，第三方组件通常提供更完善的交互和样式支持。