VUE使用ELEMENT中的EL-DATE-PICKER实现每月的第几周

最近写的项目里面有一个功能是实现选择周的（如图 1），第一反应是使用element里面的el-date-picker组件，但是有一个问题，就是el-date-picker的周选择组件是一整年的第几周(如图 2)，而不是每个月的第几周，然后就去查了一下，发现element里面也没有实现选择每个月的第几周的，那么只能自己改了。

图 1：

 

 

 图 2

 

1. 首先我们要把el-date-picker里面显示改为图1所示的样子
2. 结构有了就要实现功能了，简单点想就是点击选择日期的时候根据选中的日期来判断是这个月的第几周，然后修改选择框的内容。
3. 加上默认显示值，需要获取当天的年月日以及对应月的第几周来实现

 

 实现如下代码所示：

<template>
  <div class="test-box">
    <span>每周</span>
    <el-date-picker
      :clearable="false"
      v-model="queryParam.value"
      :format="'yyyy-MM 第' + queryParam.week + '周'"
      @change="weekChange"
      value-format="yyyy-M-d"
      class="inp"
      size="medium"
      type="week"
      placeholder="请选择"
      :picker-options="{'firstDayOfWeek': 1}"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParam: {
        value: '',
        week: ''
      }
    };
  },
  created() {
    this.getDay();
  },
  methods: {
    // 初始化日期
    getDay() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      let nowDay = year + '-' + month + '-' + day;
      this.queryParam.week = this.getWeekInMonth(new Date(nowDay));
      this.queryParam.value = year + '-' + month + '-' + day;
    },
    weekChange(val) {
      if (val) {
        let arr = val.split('-');
        this.queryParam.week = this.getWeekInMonth(new Date(val));
      }
    },
    // 根据日期判断是月的第几周
    getWeekInMonth(t) {
      if (t == undefined || t == '' || t == null) {
        t = new Date();
      } else {
        var _t = new Date();
        _t.setYear(t.getFullYear());
        _t.setMonth(t.getMonth());
        _t.setDate(t.getDate());

        var date = _t.getDate(); //给定的日期是几号

        _t.setDate(1);
        var d = _t.getDay(); //1. 得到当前的1号是星期几。
        var fisrtWeekend = d;
        if (d == 0) {
          fisrtWeekend = 1;
          //1号就是星期天
        } else {
          fisrtWeekend = 7 - d + 1; //第一周的周未是几号
        }
        if (date <= fisrtWeekend) {
          return 1;
        } else {
          return 1 + Math.ceil((date - fisrtWeekend) / 7);
        }
      }
    }
  }
};
</script>

<style lang="less" scoped="scoped">
.test-box {
  background: #ffffff;
  height: 31.25rem;
  padding: 1.875rem 0 0 1.875rem;
  .inp {
    margin: 0 0 0 0.625rem;
  }
}
</style>

最终效果如下图所示：