Vue2+ElementUI，日期选择器el-date-picker选择多个日期type=‘dates‘改造成可选择多段范围，选中范围内的某个日期则取消该日期的选择的组件

需求

        选择多段日期范围，但有些工作时间为单休，有些工作时间为双休，有需要取消的时间点。

效果图

打印结果：选中的日期；多段日期范围

 

插件

        引入dayjs插件

html

<template>
  <div>
    <el-date-picker
      type="dates"
      v-model="dateValue"
      placeholder="选择日期"
      value-format="yyyy-MM-dd"
      @change="handleChangeDate">
    </el-date-picker>
  </div>
</template>

 JS