element周选择器---设置展示周和日期

element周选择器：

粘贴可用

实现效果：

—

代码：

---

npm install dayjs --save

main.js

import dayjs from "dayjs";
Vue.prototype.dayjs = dayjs;

页面

<template>
  <div class="main">
     <el-date-picker
        v-model="value2"
        size="mini"
        type="week"
        :format="'第' + week + '周' + ' ( ' + start + ' 至 ' + end + ' ) '"
        @change="showDate"
        :picker-options="onPicker"
        placeholder="选择周"
      >
      </el-date-picker>
  </div>
</template>

data() {
    return {
      value2: "",
      week: "", //周
      startTimeStamp: "", //起始日期 时间戳
      start: "", //起始日期
      end: "", //截止日期
      onPicker: {
        firstDayOfWeek: 1, //周起始日为星期一
        disabledDate(value) {
          let today = new Date(); //获取今天日期
          let d = today.getDay(); //计算今天是周几。如果是周天，d=0
          let w = 0;
          if (d === 0) {
            w = 7;
          } else {
            w = d;
          }
          // let startTime = today.setDate(today.getDate() - w);
          // return value.getTime() < startTime; //不可选本周一以前的时间
          let endTime = today.setDate(today.getDate() + (7 - w));
          return value.getTime() > endTime; //不可选本周日以后的时间
        },
      },
     }
   }

  methods: {
    splitDate(date) {
      return this.dayjs(date).format("YYYY-MM-DD");
    },
    showDate(val) {
      let firstDay = new Date(val.getFullYear(), 0, 1); // 2020-01-01
      let dayOfWeek = firstDay.getDay(); // 2020-01-01是周三  dayOfWeek==3
      let spendDay = 1;
      if (dayOfWeek != 0) {
        spendDay = 7 - dayOfWeek + 1; // 5 离下周一还有5天
      }
      firstDay = new Date(val.getFullYear(), 0, 1 + spendDay); // 2020-01-06是2020年第一个周一，是2020年第二个周
      let d = Math.ceil((val.valueOf() - firstDay.valueOf()) / 86400000); // 当前时间距离2020-01-06有几天
      let result = Math.ceil(d / 7); // 换算成周为单位 2020-01-06result是0,但其实是第二个周，所以默认加2
      this.week = result + 1; // 本年第一天是周日，与下个周一在同一周
      if (dayOfWeek !== 0) {
        this.week = result + 2; // 如果使用的是默认为加2（如果将自然周设置为周一到周日则是加1）
      }
      // console.log(this.week)
      //当年53周改为显示下一年第一周
      // val.getDate() !== 26 排除最后一周和下年第一周不在同一周的情况，正常显示53
      if (this.week === 53 && val.getDate() !== 26) {
        this.week = 1;
      }
      let startTime = this.dayjs(this.value2).subtract(1, "day").$d;
      let endTime = this.dayjs(startTime).add(6, "day").$d;
      this.start = this.splitDate(startTime);
      this.end = this.splitDate(endTime);
      this.startTimeStamp = new Date(startTime).getTime();
      console.log("当前周开始时间", startTime, this.start, this.startTimeStamp);
    },
  }