vue elementui时间控件，（单框同时选）范围选择周，季，年。

一、效果图

因官网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",
      newDate: [],
      pickerOptions: {
        firstDayOfWeek: 1
      },
    };
  },
  computed: {
   date: {
      get() {
        let newDate = this.newDate;
        if (newDate && newDate.length <= 0) {
          let endDate = common.addDays(new Date(), -1);
          let beginDate = endDate;
          newDate = [beginDate, endDate];
        }
        return newDate;
      },
      set(newDate) {
        if (newDate && newDate.length > 0) {
           let weekStart = common.getWeekStartAndEnd(0, new Date(newDate[0]));
           let weekEnd = common.getWeekStartAndEnd(0, new Date(newDate[1]));
           this.newDate = [weekStart[0], weekEnd[1]];
        }
      }
    },
    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：

Date.prototype.format = function() {
  let s = "";
  let mouth =
    this.getMonth() + 1 >= 10
      ? this.getMonth() + 1
      : "0" + (this.getMonth() + 1);
  let day = this.getDate() >= 10 ? this.getDate() : "0" + this.getDate();
  s += this.getFullYear() + "-"; // 获取年份。
  s += mouth + "-"; // 获取月份。
  s += day; // 获取日。
  return s; // 返回日期。
};

/**
 * @param date 传入的日期
 * @param num 加减的天数，加为正，减为负
 * @returns 格式化后的日期
 */
export function addDays(date, num) {
  date.setDate(date.getDate() + num);
  return date.format();
}

//将日期转换成一年中的第几周
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;
}

//获取当前count个周的起止日期，如：count=0 ,就是当前周，-1就是上周，以此类推
export function getWeekStartAndEnd(count, currentDate) {
  //起止日期数组
  let resultArr = new Array();
  let millisecond = 1000 * 60 * 60 * 24;
  currentDate = new Date(currentDate.getTime() + millisecond * 7 * count);
  let week = currentDate.getDay();

  //减去的天数
  let minusDay = week != 0 ? week - 1 : 6;
  //获得当前周的第一天
  let currentWeekFirstDay = new Date(
    currentDate.getTime() - millisecond * minusDay
  );
  //获得当前周的最后一天
  let currentWeekLastDay = new Date(
    currentWeekFirstDay.getTime() + millisecond * 6
  );

  resultArr.push(currentWeekFirstDay.format());
  resultArr.push(currentWeekLastDay.format());
  return resultArr;
}

//返回格式 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>