element-ui日期选择器的时间范围限制和默认显示界面

项目场景：

提示：由于项目涉及数据过多，可能造成查询、删除、更新等功能降低效率，为避免这种现象的出现，提前建了两个相同的数据库表，分别是 近6个月 和 6个月前 的数据。
界面默认为“近6个月”的数据，前端需将“近6个月”对应的识别符，从一开始传递给后端。

---

情况一：

在默认状态下，即扫描时间为“近6个月”时：假定当前日期是2020-12-23，用户可以选择的日期范围是2020-06-24到2020-12-23，其他日期范围不可选。

DatePicker 日期选择器

<!-- 近6个月  -->
            <el-date-picker
            v-if="queryParams.timeStatus===1"     //当前为近6个月的数据
            v-model="dateRange"			//开始日期和结束日期绑定值，在全局封装过后的
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"		//传给后端的日期形式
            format="yyyy-MM-dd"				//前端界面显示的日期形式
            :default-time="['00:00:00', '23:59:59']"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="width: 240px"
            :default-value="DefaultShow"		//选择器打开时默认显示的时间，后面详细介绍
            :picker-options="pickerOptions"		//当前时间日期选择器		
            ></el-date-picker>

JS代码

export default{
	data() {
		return {
			dateRange: [],
			DefaultShow:'',
			minDate: "",
     		maxDate: "",
     		pickerOptions: {
		        onPick: ({ maxDate, minDate }) => {
		          this.minDate = minDate;//选中的时间较小的一个
		          this.maxDate = maxDate;//选中的时间较大的一个
		        },
		        disabledDate: (time) => {// 设置禁用状态，参数为当前日期，要求返回 Boolean 返回为true禁用
		          // 当前时间的时间戳
		          let curDate = new Date().getTime();

              // 获取动态天数sum
              let curYear = new Date().getFullYear();
              let curMonth = new Date().getMonth()+1;
              let sum=0
              for(let i=0;i<6;i++){
                // 获取某年某月的天数
                function mGetDate(year, month){
                    var d = new Date(year, month, 0);
                    return d.getDate();
                }
                var day = mGetDate(`${curYear}`,`${curMonth}`);

                curMonth--;
                if (curMonth < 1){
                    curYear--;
                    curMonth = 12 - curMonth;
                }
                sum = sum + day
              }
              // 能查看6月前的时间 单位是月 （当前是近6个月）
              let cutTime = `${sum-1}`* 24 * 3600 * 1000;
              // let cutTime = 180* 24 * 3600 * 1000;
		          // 最小时间的时间戳
		          let minTime = curDate - cutTime;
		          // 时间跨度 当前是6个月
		          let month = `${sum-1}` * 24 * 3600 * 1000;
		          // 当前的23点59分59秒
		          let nowLast = new Date(new Date(new Date().getTime()).setHours(23,59,59,999)).getTime();
		          if (this.minDate) {
		            // 判断
		            // 1.遍历时间大于今天（23:59:59）会返回true
		            // 2.遍历时间小于最小时间会返回true
		            // 3.遍历时间大于 选中的时间较小的一个 加上 时间跨度 会返回true
		            // 4.遍历时间小于 选中的时间较小的一个 减去 时间跨度 会返回true
		            return (
		              time.getTime() > nowLast ||
		              time.getTime() < minTime ||
		              time >  new Date(this.minDate.getTime() + month) ||
		              time < new Date(this.minDate.getTime() - month)
		            );
		          }
		          return time.getTime() > Date.now()  || time.getTime() < minTime;
		        },
          },

		}
	}
}

---

情况二：

在扫描时间为“6个月前”时：假定当前日期是2020-12-23，用户可以选择2020-06-23之前并且包含2020-06-23的任何一段日期范围，2020-06-23之后的日期不可选。

DatePicker 日期选择器

<!-- 6个月前 -->
            <el-date-picker
            v-else
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="width: 240px"
            :default-value="timeDefaultShow"
            :picker-options="timepickerOptions"
            ></el-date-picker>

JS代码

data() {
	return{
		dateRange: [],
		timeDefaultShow:"",
		timepickerOptions:{
            disabledDate: (time) => {// 设置禁用状态，参数为当前日期，要求返回 Boolean 返回为true禁用
            // 获取动态天数sum
              let curYear = new Date().getFullYear();
              let curMonth = new Date().getMonth()+1;
              let sum=0
              for(let i=0;i<6;i++){
                // 获取某年某月的天数
                function mGetDate(year, month){
                    var d = new Date(year, month, 0);
                    return d.getDate();
                }
                var day = mGetDate(`${curYear}`,`${curMonth}`);

                curMonth--;
                if (curMonth < 1){
                    curYear--;
                    curMonth = 12 - curMonth;
                }
                sum = sum + day
              }

              return time.getTime()> Date.now() -`${sum-1}`* 24 * 3600 * 1000;
		        },
          }
	}
}

---

附加说明：

目前官方的日期默认是当前日期，打开之后长这样子：现在是2020-12-23，但是有的需求是当前日期在后面。

为了更好的选择可选日期范围，改成就像这样的：

【注】default-value是设置当前日期默认值的，其绑定的值"DefaultShow"是在data里面的值，而不是方法。
代码如下：

//在created或mounted（也就是页面第一次加载时）更新DefaultShow
created() {
    // 近6个月：上个月的当前日期为默认值
    this.DefaultShow = new Date();
    this.DefaultShow.setMonth(new Date().getMonth() - 1);

    // 6个月前的默认值
    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setMonth(new Date().getMonth() - 7);
  },