vue 实现日期多选

实现日期多选的方法

使用 v-model 绑定数组

在 Vue 中，可以通过 v-model 绑定一个数组来实现多选。日期选择器组件（如 el-date-picker）需设置 type="dates" 或支持多选的属性。

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

<script>
export default {
  data() {
    return {
      selectedDates: [] // 存储选中的日期数组
    };
  }
};
</script>

使用第三方库（如 vue-datepicker）

若需更灵活的日期多选功能，可集成第三方库如 vue-datepicker，配置 multi-select 属性。

<template>
  <datepicker
    v-model="selectedDates"
    :multi-select="true"
    :inline="true"
  />
</template>

<script>
import Datepicker from 'vue-datepicker';
export default {
  components: { Datepicker },
  data() {
    return {
      selectedDates: []
    };
  }
};
</script>

自定义日期选择逻辑

通过监听日期选择事件，手动管理选中日期数组。例如，使用原生 input[type="date"] 结合 Vue 逻辑。

<template>
  <input 
    type="date" 
    @change="handleDateSelect"
  />
  <div>已选日期: {{ selectedDates.join(', ') }}</div>
</template>

<script>
export default {
  data() {
    return {
      selectedDates: []
    };
  },
  methods: {
    handleDateSelect(event) {
      const date = event.target.value;
      if (!this.selectedDates.includes(date)) {
        this.selectedDates.push(date);
      }
      event.target.value = '';
    }
  }
};
</script>

使用 Element UI 的日期范围扩展

通过 el-date-picker 的 type="daterange" 结合自定义逻辑实现多选。需额外处理用户交互。

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    @change="handleRangeChange"
  />
</template>

<script>
export default {
  data() {
    return {
      dateRange: [],
      selectedDates: []
    };
  },
  methods: {
    handleRangeChange(range) {
      if (range && range.length === 2) {
        const [start, end] = range;
        // 生成区间内所有日期并合并到 selectedDates
      }
    }
  }
};
</script>

注意事项

• 日期格式一致性：确保绑定的日期格式与组件输出的格式一致，避免解析错误。
• 去重处理：手动管理数组时需检查重复日期。
• 禁用日期：可通过组件的 disabledDate 属性限制可选范围。

以上方法可根据项目需求选择，推荐优先使用支持多选的成熟组件（如 Element UI 的 type="dates"）。