[vue] element 周数选择器(区间)

HTML：

<el-date-picker
  ref="getStartWeek"
  @change="startWeekChange"
  v-model="startWeek"
  type="week"
  format="yyyy年-WW周"
  :picker-options="startPickerOptions"
  :placeholder="开始周"
  :clearable="false"
></el-date-picker>
<span>&nbsp;-&nbsp;</span>
<el-date-picker
  ref="getEndWeek"
  @change="endWeekChange"
  v-model="endWeek"
  type="week"
  format="yyyy年-WW周"
  :picker-options="pickerOptions"
  :placeholder="结束周"
  :clearable="false"
></el-date-picker>

js:

data() {
  return{
    startWeek: "",
    endWeek: "",
    startPickerOptions: {},
    pickerOptions: {},
    searchForm: {
      beginWeekIndex: 0, // 开始周   (int)
      endWeekIndex: 0, // 结束周   (int)
      beginDate: "", // 开始时间 (str)
      endDate: "", // 结束时间 (str)
    },
  }
},
watch: {
    // 开始时间   2019-01-01 之前的日期禁用 || 两周前的今天，往后的日期禁用
  endWeek(newV, oldV) {
    const _this = this;
    const weekDay = this.$moment(new Date()).weekday();
    this.startPickerOptions = {
      disabledDate(time) {
        return (
          time.getTime() < _this.$moment('Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)') ||
          time.getTime() > _this.$moment(new Date()).add(-7 - weekDay, "d")
        );
      },
      firstDayOfWeek: 1,
    };
  },
    // 结束时间   已选中的开始日期之前的日期禁用 || 两周前的今天，往后的日期禁用
  startWeek(newV, oldV) {
    const _this = this;
    const weekDay = this.$moment(new Date()).weekday();
    this.pickerOptions = {
      disabledDate(time) {
        return (
          time.getTime() < _this.$moment(newV) ||
          time.getTime() > _this.$moment(new Date()).add(-7 - weekDay, "d")
        );
      },
      firstDayOfWeek: 1,
    };
  },
},
methods: {
    // 开始周
  startWeekChange() {
    var d =this.disposeWeek(new Date(this.startWeek));
    this.searchForm.beginWeekIndex = this.$refs.getStartWeek.displayValue.slice(6, 8) * 1;
    this.searchForm.beginDate = 
        d.getFullYear() + '-' + 
        (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1);
    // console.log(beginWeekIndex)   ====>   选中的当前周(今年的第几周 int 类型)
    // console.log(beginDate)        ====>   当前选中的周是哪年哪月的(如：2022-06)    
  },
    // 结束周
  endWeekChange() {
    var d = this.disposeWeek(new Date(this.endWeek));
    this.searchForm.endWeekIndex = this.$refs.getEndWeek.displayValue.slice(6, 8) * 1;
    this.searchForm.endDate = 
        d.getFullYear() + '-' + 
        (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1);
    },

    // element的选择器是将当日的周数（周几）进行的取值
    //（比如今天周三，选中的那一周是根据周三来定的年月日)
    // 每周一为 年份/月份的起始
  disposeWeek(date){
        // 这里的判断是因为2019-01-01是在周二，周一为 2018-12-31
        // 但库里没有 19年1月之前的数据所以 这里检测到为19年第一周时，不继续接下来的方法
    if(date.getFullYear() === 2019 && date.getMonth() + 1 === 1){
      return new Date('2019-01-01');    
    };
    var Time = date.getTime();
    var day = date.getDay();
    var oneDayTime = 24*60*60*1000;
    var MondayTime = Time - (day - 1) * oneDayTime;
    return new Date(MondayTime);
  },
}

这里展示效果 

 这里是有默认值的。默认值的函数如下

created() {
  //当前周几
  const weekDay = this.$moment(new Date()).weekday();
  //冻结截止的日期
  const endDay = this.$moment(new Date())
    .add(-7 - weekDay, "d")
    .format("YYYY-MM-DD");
  //选择开始时间的日期
  const startDay = this.$moment(new Date())
    .add(-3, "M")
    .format("YYYY-MM-DD");
  //冻结截止的日期的时间戳
  const endLongTime = this.$moment(new Date()).add(-7 - weekDay, "d");
  //用于绑定截止日期datePicker
  this.endWeek = this.$moment(new Date()).add(-7 - weekDay, "d");
  //默认选择3个月的数据
  this.startWeek = this.$moment(new Date()).add(-3, "M");
  //开始时间的周
  this.searchForm.beginWeekIndex = this.getWeek(startDay);
  //结束时间的周
  this.searchForm.endWeekIndex = this.getWeek(endDay);
  //结束时间的年月
  this.searchForm.endDate = this.$moment(endDay).format("YYYY-MM");
  //开始时间的年月
  this.searchForm.beginDate = this.$moment(startDay).format("YYYY-MM");
},
methods: {
  /**
   * @function
   * @description
   * 获取默认周数
  */
  getWeek(endDate) {
    endDate = new Date(endDate);
    //本年的第一天
    var beginDate = new Date(endDate.getFullYear(), 0, 1);
    //星期从0-6,0代表星期天，6代表星期六
    var endWeek = endDate.getDay();
    if (endWeek == 0) endWeek = 7;
    var beginWeek = beginDate.getDay();
    if (beginWeek == 0) beginWeek = 7;
    //计算两个日期的天数差
    var millisDiff = endDate.getTime() - beginDate.getTime();
    var dayDiff = Math.floor(
      (millisDiff + (beginWeek - endWeek) * (24 * 60 * 60 * 1000)) / 86400000
    );
    return Math.ceil(dayDiff / 7);
  },
}