基于element-ui实现日期组件的多选、全选、清空

一、效果图(全选效果）

二、代码

            <el-date-picker
              style="width: 80%"
              size="small"
              :picker-options="pickerOptions"
              v-model="formInline.statDate"
              type="dates"
              value-format="yyyy-MM-dd"
              placeholder="请选择日期"
              :clearable="false"
            >
            </el-date-picker>

  data() {
    let _this = this
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 24*60*60*1000;
        },
        shortcuts: [{
            text: '清空',
            onClick() {
              _this.formInline.statDate = null
            }
          }, {
            text: '多选',
            onClick() {
              _this.formInline.statDate = null
            }
          }, {
            text: '全选',
            onClick(picker) {
              _this.formInline.statDate = null
              let year = new Date(picker.date).getFullYear()
              let month =(new Date(picker.date).getMonth() + 1) < 10 ? String('0' + (new Date(picker.date).getMonth() + 1)) : new Date(picker.date).getMonth() + 1
              let nowDate = getYearMonthDay(new Date(new Date().getTime() - 24*60*60*1000))
              let dateList = []
              if (getMonthList(year, month).indexOf(nowDate) !== -1) {
                dateList = getMonthList(year, month).splice(0, getMonthList(year, month).indexOf(nowDate) + 1)
              } else {
                dateList = getMonthList(year, month)
              }
              _this.formInline.statDate = dateList
            }
          }]
      },
      formInline: {
        statDate: [],
      },
    };
  },

三、用到的日期封装方法

/**
 * 输入年月返回一个月所有天数的数组
 */
export const getMonthList = (year, month) => {
  let d = new Date(year, month, 0).getDate(); // 获取某一个月的天数
  let list = [];
  for (let  i= 0; i < d; i++) {
    if( i + 1 < 10) {
      list.push(year + "-" + month + "-" + `0${(i + 1)}`);
    } else {
      list.push(year + "-" + month + "-" + (i + 1));
    }
  }
  return list;
};