element选择周日期不跨月

选择任意一天，自动返回所在周的起始日期，起始日期不跨月
1.使用element日期选择器组件
2.需要安装依赖 - moment

<template>
  <div class="app-container" style=" height: 100% " ref="appContainer">
    <el-date-picker :firstDayOfWeek='1' v-model="weekInfo.data" type="date" :format="yyyy-MM-dd" placeholder="选择周" style="width:250px" size="samll"
      @change='changeWeek' :clearable='false' :editable='false' :picker-options="pickerOptionsOfWeek">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "weeklyPlanQuery",
  data() {
    return {
      weekInfo: {
        data: "",
        weekStartDay: "",
        weekEndDay: "",
        showInfo: null,
        dataList: [],
      },
      pickerOptionsOfWeek: {
        // 自定义周选择器配置
        firstDayOfWeek: 1,
        cellClassName: (time) => {
          let timeDate = this.$moment(time.getTime()).format("yyyy-MM-DD");
          let list = this.weekInfo.dataList;
          if (list.includes(timeDate)) {
            if (timeDate == list[0]) {
              return "in-range start-date"; // 开始日期
            } else if (timeDate == list[list.length - 1]) {
              return "in-range end-date"; // 结束日期
            } else {
              return "in-range"; // 中间日期
            }
          }
        },
      },
    };
  },
  created() {
    this.changeWeek(nextWeek);
  },
  methods: {
    // 选择日期
    changeWeek(e) {
      this.changeWeekOfMonth(e).then((res) => {
        this.weekInfo = res;
        this.queryParams.planDate = res.weekStartDay;
        this.queryParams.planStartDate = res.weekStartDay;
        this.queryParams.planEndDate = res.weekEndDay;
      });
    },
    // 根据所选日期计算所在周起始时间
    changeWeekOfMonth(e) {
      let chooseTime = this.dateFormat(e).split("-");
      let weekOfDay = this.$moment(e).format("E"); // 所选日期是周几
      let day = this.$moment(e).format("DD"); // 所选日期天
      let totalDay = new Date(chooseTime[0], chooseTime[1], 0).getDate(); // 所选日期所在月的总天数
      let mondayNum = weekOfDay - 1;
      let sundayNum = 7 - weekOfDay;
      if (weekOfDay - day > 0) {
        mondayNum = day - 1;
      }
      if (totalDay - day < sundayNum) {
        sundayNum = totalDay - day;
      }
      let chooseFirstDay = this.$moment(e)
        .subtract(mondayNum, "days")
        .format("YYYY-MM-DD");
      let chooseLastDay = this.$moment(e)
        .add(sundayNum, "days")
        .format("YYYY-MM-DD");
      let weekInfo = {
        data: this.dateFormat(e),
        showInfo: chooseFirstDay + " 至 " + chooseLastDay,
        weekStartDay: chooseFirstDay,
        weekEndDay: chooseLastDay,
        dataList: this.formatEveryDay(chooseFirstDay, chooseLastDay),
      };
      return new Promise((resolve, reject) => {
        resolve(weekInfo);
      });
    },
    formatEveryDay(start, end) {
      let dateList = [];
      var startTime = this.getDateFun(start);
      var endTime = this.getDateFun(end);
      while (endTime.getTime() - startTime.getTime() >= 0) {
        var year = startTime.getFullYear();
        var month =
          startTime.getMonth() + 1 < 10
            ? "0" + (startTime.getMonth() + 1)
            : startTime.getMonth() + 1;
        var day =
          startTime.getDate().toString().length == 1
            ? "0" + startTime.getDate()
            : startTime.getDate();
        dateList.push(year + "-" + month + "-" + day);
        startTime.setDate(startTime.getDate() + 1);
      }
      return dateList;
    },
  },
};
</script>