日期控件选择日期范围

日期选择

1. 选择日期：可选择按月还是按周 默认：【按月】
2. 开始日期&结束日期
   1. 若选择按月，则可选择到月，支持选择当月，时间间隔最多不超过7个月
   2. 若选择按周，则可选择到周，支持选择本周，时间间隔最多不超过50个周
   3. 默认为按月展示近7个月（含本月）的数据

---

思路

1. 默认初始化日期
2. 监听日期的变化判断开始日期与结束日期的差值符不符合限制要求
3. 选择后的日期如果不符合标准，弹出错误消息提示，把oldVal重新赋值给变量，如果符合标准，执行

---

 初始化组件 用的element的组件

1. 月的组件
2. 周的组件

---

 设置禁用状态（结束时间大于开始时间，不可选择当前时间以后的时间）

1. 如果没有默认值的情况下，方法写在data里面
2. 有默认值写在computed里面

---

 

代码（控制月的）

<template>
  <div>
    <!-- 月的控件 -->
    <el-date-picker
      v-model="monthList"
      type="monthrange"
      value-format="yyyyMM"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
      key="month"
      :picker-options="pickerOptions"
    >
      <!-- :key 是为了不让下拉数据错位，会跑到页面的右上角 -->
    </el-date-picker>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      monthList: [
        moment().subtract(6, "months").format("YYYYMM"),
        moment().format("YYYYMM"),
      ], //初始化按月近7个月
    };
  },
  computed: {
    // 不能选择当前日期以后的时间
    pickerOptions() {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      };
    },
  },
  watch: {
    monthList: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        let num = moment(newVal[1]).diff(moment(newVal[0]), "months"); //结束日期和开始日期相差多少个月
        // 判断是否符合条件
        if (num >= 7) {
          // 没有满足条件
          this.$message.warning("时间间隔最多不超过7个月");
          // 把原先的值重新赋值给变量
          this.monthList = oldVal;
        } else {
          //调用接口
          this.getData();
        }
      },
      deep: true,
    },
  },
};
</script>

---

代码（控制周的）

<template>
  <div>
    <el-date-picker
      v-model="startWeek"
      type="week"
      format="yyyy 第 WW 周"
      value-format="yyyyMMdd"
      placeholder="选择周"
      key="startWeek"
      :picker-options="startpickerOptions"
    >
    </el-date-picker>
    <el-date-picker
      v-model="endWeek"
      type="week"
      format="yyyy 第 WW 周"
      value-format="yyyyMMdd"
      placeholder="选择周"
      key="endWeek"
      :picker-options="endpickerOptions"
    >
    </el-date-picker>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      startWeek: moment().subtract(7, "weeks").format("YYYYMMDD"),
      endWeek: moment().format("YYYYMMDD"),
    };
  },
  computed: {
    // 不能选择当前日期以后的时间和不能选择大于结束时间的时候
    startpickerOptions() {
      const _this = this;
      return {
        disabledDate(time) {
          let endTime;
          if (_this.endWeek) {
            endTime = moment(_this.endWeek).format("YYYY-MM-DD");
          }
          return (
            time.getTime() > Date.now() ||
            time.getTime() > new Date(endTime).getTime()
          );
        },
      };
    },
    // 不能选择当前日期以后的时间和不能选择小于始时间的时候
    endpickerOptions() {
      const _this = this;
      return {
        disabledDate(time) {
          let startTime;
          if (_this.startWeek) {
            startTime = moment(_this.startWeek).format("YYYY-MM-DD");
          }
          return (
            time.getTime() > Date.now() ||
            time.getTime() < new Date(startTime).getTime()
          );
        },
      };
    },
  },
  watch: {
    startWeek: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
        let num = moment(this.endWeek).diff(moment(newVal), "weeks"); //结束日期和开始日期相差多少个周
        // 判断是否符合条件
        if (num > 50) {
          // 没有满足条件
          this.$message.warning("时间间隔最多不超过50个周");
          // 把原先的值重新赋值给变量
          this.startWeek = oldVal;
        } else {
          //调用接口
          // this.getData();
        }
      },
      deep: true,
    },
    endWeek: {
      handler(newVal, oldVal) {
        let num = moment(newVal).diff(moment(this.startWeek), "weeks"); //结束日期和开始日期相差多少个周
        // 判断是否符合条件
        if (num > 50) {
          // 没有满足条件
          this.$message.warning("时间间隔最多不超过50个周");
          // 把原先的值重新赋值给变量
          this.endWeek = oldVal;
        } else {
          //调用接口
          // this.getData();
        }
      },
      deep: true,
    },
  },
};
</script>