最近寫的專案裡面有一個功能是實現選擇周的（如圖 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>

最終效果如下圖所示：