vue+element 实现时间选择器切换周月选择

vue+element 实现时间选择器切换周月选择

开发过程中遇到需要按周或者按月选择统计的需求，element组件无法满足，所以整合了下，记录一下过程
参考：https://blog.csdn.net/CuiCui_web/article/details/122623423

组件

<el-select
        v-model="selectDateObj.dateSelect"
        placeholder="请选择"
        style="width:100px;"
        @change="changeDateSelect"
      >
        <el-option label="周" value="1" />
        <el-option label="月" value="2" />
      </el-select>
        <el-date-picker
          v-if="'1' === selectDateObj.dateSelect"
          v-model="selectDateObj.week"
          type="week"
          :format="start + '至' + end"
          value-format="yyyy-MM-dd"
          :picker-options="weekDateOption"
          :editable="false"
          placeholder="选择周"
          @change="changeWeek"
        />
        <el-date-picker
          v-if=" '2' === selectDateObj.dateSelect"
          v-model="selectDateObj.month"
          type="month"
          format="yyyy-MM"
          value-format="yyyy-MM"
          :picker-options="monthDateOption"
          :editable="false"
          placeholder="选择月"
          @change="changeMonth"
        />
      </el-form-item>

方法
业务需求，需要取到选择的具体起始时间，使用moment处理

//切换周、月
    changeDateSelect(){
      this.selectDateObj.week = '';
      this.selectDateObj.month = '';
      this.start = '';
      this.end = '';
      this.dateRangeDate = [];
    },
    //选择周
    changeWeek(v){
      //取选择周具体日期范围
      this.start = this.$moment(v).startOf('week').format('YYYY-MM-DD');
      this.end = this.$moment(v).endOf('week').format('YYYY-MM-DD');
      this.dateRangeDate = [this.start, this.end];
      this.handleQuery();
    },
    changeMonth(v){
      //取选择月具体日期范围
      this.start = this.$moment(v).startOf('month').format('YYYY-MM-DD');
      this.end = this.$moment(v).endOf('month').format('YYYY-MM-DD');
      this.dateRangeDate = [this.start, this.end];
      this.handleQuery();
    }

在date内返回筛选限制时间

// 选择周 限制当日之后不可选
      weekDateOption: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 选择月 限制
      monthDateOption: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },

实现效果