一、效果图

因官网elementui仅有日和月的范围选择控件。所以下面开发了周季年，并放出周次。

二、版本及下载

1.实现需要修改源码，目前修改的版本为2.15.3，所以想要实现该方法，请先将elementui升级或者降到2.15.3.

2.将lib包替换到node_module/element-ui下的lib

lib包下载地址：（没有积分的私聊我获取包）
https://download.csdn.net/download/qq_39019765/44321511

三、代码中的使用

1.范围周：

这里周报同样用到的是日组件，用日组件进行修改。其中type=“daterange”

     <el-date-picker
        v-model="date"
        @change="changeDate()"
        type="daterange"
        align="center"
        unlink-panels
        range-separator="~"
        start-placeholder="Start date"
        end-placeholder="End date"
        show-week-number="true"
        size="small"
        class="date-class"
        :format="format"
        :picker-options="pickerOptionsType"
        value-format="yyyy-MM-dd"
        prefix-icon="calendar-icon"
      >
      </el-date-picker>

common为 import * as common from “…/assets/js/common”; 内容在下面

data() {
    return {
      time: "week",
      date: "",
      pickerOptions: {
        firstDayOfWeek: 1
      },
    };
  },
  computed: {
    format: {
      get() {
        let timeType = this.time;
        let date = this.date;
        if ("week" == timeType && date && date.length > 0) {
          let beginYearWeek = common.getYearAndWeek(date[0], date[1]);
          let endYearWeek = common.getYearAndWeek(date[1], date[0]);
          return beginYearWeek + endYearWeek;
        } else {
          return "";
        }
      }
    },

    dateType: {
      get() {
        return this.dateType;
      }
    },

    pickerOptionsType: {
      get() {
        let timeType = this.time;
        return this.pickerOptions;
      }
    }
  }

common.js：

//将日期转换成一年中的第几周
export function getYearWeek(date) {
  //按照国际标准
  let time,
    week,
    checkDate = new Date(date);
  checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
  time = checkDate.getTime();
  checkDate.setMonth(0);
  checkDate.setDate(1);
  week = Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
  return week;
}

//返回格式 2019年第23周，特别注意跨年一周的问题
export function getYearAndWeek(date, anotherDate) {
  let week = getYearWeek(date);
  let year = date.substring(0, 4);
  let anotherYear = anotherDate.substring(0, 4);
  //处理跨年特殊日期
  if (anotherDate > date) {
    let betweenDay = getBetweenDay(new Date(date), new Date(anotherDate));
    if (betweenDay == 7 && anotherYear != year) {
      if (week == 1) {
        year = parseInt(year) + 1;
      }
    }
  } else {
    let betweenDay = getBetweenDay(new Date(anotherDate), new Date(date));
    if (betweenDay == 7 && anotherYear != year) {
      if (week != 1) {
        year = parseInt(year) - 1;
      }
    }
  }
  return `${year}年第${week}周`;
}
export function getBetweenDay(beginDate, endDate) {
  let dateSpan = endDate - beginDate;
  dateSpan = Math.abs(dateSpan);
  let days = Math.floor(dateSpan / (24 * 3600 * 1000));
  return days + 1;
}

2.范围季：

      <el-date-picker
              v-model="date"
              type="quarterrange"
              align="center"
              unlink-panels
              range-separator="~"
              start-placeholder="Start date"
              end-placeholder="End date"
              size="small"
              class="date-class"
              prefix-icon="calendar-icon"
      >
      </el-date-picker>

3.范围年

        <el-date-picker
                v-model="date"
                type="yearrange"
                class="date-class"
                range-separator="~"
                size="small"
                value-format="yyyy"
                prefix-icon="calendar-icon"
                align="center"
                unlink-panels
        >
        </el-date-picker>

如果有帮助到你，感谢打赏一下