element日期插件datePick限制日期限制简单案例

1、需求描述

本案例采用的是两个日期框，具体需求如下，由于考虑到数据性能的问题，实际要求只能够查询三个月的数据，并且只能去搜索当前日期和之后一年内的数据(本案例只是单存的显示两个日期框的样式，不包含其他逻辑)
参考：https://www.cnblogs.com/belongs-to-qinghua/p/11752392.html

2、全部代码如下

<template>
  <div class="user">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-date-picker type="date"
                    placeholder="选择日期"
                    v-model="startTime"
                    value-format="yyyy-MM-dd"
                    :picker-options="startDateDisabled"
                    @change="getStartTime"
                    :editable="false"></el-date-picker>
    <el-date-picker type="date"
                    placeholder="选择日期"
                    v-model="endTime"
                    value-format="yyyy-MM-dd"
                    :picker-options="endDateDisabled"
                    @change="getEndTime"
                    :editable="false"></el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'user',
  data() {
    return {
      startTime: "",
      endTime: "",
      startDateDisabled: this.getStartTime(),
      endDateDisabled: this.getEndTime()
    }
  },
  methods: {
    /**
       * 开始时间限制
       */
    getStartTime() {
      const self = this;
      return {
        disabledDate: (time) => {
          if (self.endTime) {//结束时间不为空时
            let endDate = new Date(self.endTime).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = endDate - three;
            if (new Date().getTime() - threeMonths > 0) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() > endDate;
            } else {
              return time.getTime() < threeMonths - 8.64e7 || time.getTime() > endDate;
            }
          } else {//结束时间为空
            let curDate = (new Date()).toString() // 当前时间戳转为字符串
            let curDateYear = (new Date()).getFullYear() // 当前时间的年份
            let oneYearAgoDate = curDate.replace(curDateYear, curDateYear + 1)// 字符串年份替换为一年后
            let three = 90 * 24 * 3600 * 1000;
            let oneYear = new Date(oneYearAgoDate).getTime() - three //一年后字符串转为时间戳并且减去三个月
            return time.getTime() < Date.now() - 8.64e7 || time.getTime() > oneYear;
          }
        }
      }
    },
    /**
     * 结束时间限制
     */
    getEndTime() {
      const self = this;
      return {
        disabledDate: (time) => {
          if (self.startTime) {//开始日期不为空
            let startDate = new Date(self.startTime).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = startDate + three;
            return time.getTime() < startDate - 8.64e7 || time.getTime() > threeMonths;
          } else {//开始时间为空
            let curDate = (new Date()).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = curDate + three;

            let curStr = (new Date()).toString() // 当前时间戳转为字符串
            let curDateYear = (new Date()).getFullYear() // 当前时间的年份
            let oneYearAgoDate = curStr.replace(curDateYear, curDateYear + 1)// 字符串年份替换为一年后
            let oneYear = new Date(oneYearAgoDate).getTime();//转换成毫秒数
            return time.getTime() < threeMonths - 8.64e7 || time.getTime() > oneYear;
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

3、代码说明

1. 需要添加:editable=“false”，禁用手动编辑,目的是出现超过范围日期可以被输入的情况

<el-date-picker type="date"
                    placeholder="选择日期"
                    v-model="startTime"
                    value-format="yyyy-MM-dd"
                    :picker-options="startDateDisabled"
                    @change="getStartTime"
                    :editable="false"></el-date-picker>

2. 开始时间限制思路，开始时间限制有三种情况：

• [1] 结束日期为空时，开始日期的限制范围为当前日期到当前日期一年后日期减去三个月的日期范围

	let curDate = (new Date()).toString() // 当前时间戳转为字符串
    let curDateYear = (new Date()).getFullYear() // 当前时间的年份
    let oneYearAgoDate = curDate.replace(curDateYear, curDateYear + 1)// 字符串年份替换为一年后
    let three = 90 * 24 * 3600 * 1000;
    let oneYear = new Date(oneYearAgoDate).getTime() - three //一年后字符串转为时间戳并且减去三个月
    return time.getTime() < Date.now() - 8.64e7 || time.getTime() > oneYear;

• [2] 结束日期不为空并且，当前日期之前-结束日期减三个月的日期大于0，那么这个时候开始日期的限制范围就是:当前日期到结束日期

	let endDate = new Date(self.endTime).getTime();
    let three = 90 * 24 * 3600 * 1000;
    let threeMonths = endDate - three;
    if (new Date().getTime() - threeMonths > 0) {//当前日期到结束日期
       return time.getTime() < Date.now() - 8.64e7 || time.getTime() > endDate;
    } else {
       return time.getTime() < threeMonths - 8.64e7 || time.getTime() > endDate;
    }

• [3] 结束日期不为空并且，当前日期之前-结束日期减三个月的日期小于等于0，那么这个时候开始日期的限制范围就是:结束日期减三个月的日期到结束日期

	let endDate = new Date(self.endTime).getTime();
    let three = 90 * 24 * 3600 * 1000;
    let threeMonths = endDate - three;
    if (new Date().getTime() - threeMonths > 0) {
        return time.getTime() < Date.now() - 8.64e7 || time.getTime() > endDate;
    } else {//结束日期减三个月的日期到结束日期
       return time.getTime() < threeMonths - 8.64e7 || time.getTime() > endDate;
    }

3. 结束日期限制思路，结束日期分为两种情况

• [1] 开始日期为空时，结束日期限制范围:当前日期+三个月日期到当前日期一年后日期

	let curDate = (new Date()).getTime();
    let three = 90 * 24 * 3600 * 1000;
    let threeMonths = curDate + three;

    let curStr = (new Date()).toString() // 当前时间戳转为字符串
    let curDateYear = (new Date()).getFullYear() // 当前时间的年份
    let oneYearAgoDate = curStr.replace(curDateYear, curDateYear + 1)// 字符串年份替换为一年后
    let oneYear = new Date(oneYearAgoDate).getTime();//转换成毫秒数
    return time.getTime() < threeMonths - 8.64e7 || time.getTime() > oneYear;

• [2] 开始日期不为空时，结束日期限制范围：开始日期到开始日期+三个月日期

	let startDate = new Date(self.startTime).getTime();
    let three = 90 * 24 * 3600 * 1000;
    let threeMonths = startDate + three;
    return time.getTime() < startDate - 8.64e7 || time.getTime() > threeMonths;

4、结语

至此该案例完成，希望对于其他同学能提供些思路。