el_elementUI中DatePicker 日期选择器使用时间限制

限制一年和一年之前

因为业务要求，是按照月份导历史，所以我的查询条件是从 2020-05-18一直追到2019年五月一号

<template>
    <!--vue 时间选择控件测试-->
    <div class="hello">
        <div>
            选中的日期：{{startDate}}到{{endDate}}
        </div>
        <div>
            时间范围：
            <el-radio
                    v-model="historyFlag"
                    @change="changeHistory"
                    label="D"
            >
                近一年</el-radio
            >
            <el-radio
                    v-model="historyFlag"
                    @change="changeHistory"
                    label="H"
            >
                历史</el-radio
            >
        </div>
        <div
        >
            <div >
                操作时间：<el-date-picker
                    v-model="dataPickerData.datePickerSpace"
                    type="daterange"
                    unlink-panels
                    :default-value="dataPickerData.limitDatePickerSpace"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="
               开始日期
              "
                    end-placeholder="结束日期"
                    :picker-options="
                historyFlag === 'D'
                  ? dataPickerData.limitCurrentTime
                  : dataPickerData.limitHistoryTime
              "
            >
            </el-date-picker>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'DatePickerDemo',
  data () {
    return {
      startDate: "",
      endDate: "",
      // 历史选择变量
      historyFlag: "D",
      // 为了区分点击时候没有查询就导出，导致导出历史记录混乱的三方变量
      isSearchHistory: "D",
      dataPickerData: {
        // 日期时间选择数组【开始时间，结束时间】
        datePickerSpace: null,
        // 日期选择数组空间可选范围控制
        limitDatePickerSpace: null,
        limitCurrentTime: {
          /**
           * 限制选择近1年的日期（去年的本月1日到今天）
           * @param time
           * @returns {boolean}
           */
          disabledDate: function(time) {
            // 不能超过当前时间
            if (new Date(time).getTime() > new Date().getTime()) {
              return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
            } else {
              // 因为项目要求是查找2019-04-01 到 2020-04-25（2020四月的一天）
              // 需要找出现在 2020-04-25 到 2019-04-01有多少天
              // 1.判断年，平年还是闰年
              let y = new Date().getFullYear() - 1;
              // 用年份除以4，如果没有余数就是闰年，如果有余数就是平年。
              let isLeap = (0 === y % 4 && 0 === y % 100) || 0 === y % 400;
              // 平年的2月是28天，闰年是的2月是29天 因此闰年比平年多一天
              // 2019 是 365天
              let days = isLeap ? 366 : 365;
              // getDate 获取现在月份的天数，因为是从0开始，所以，实际日期要比获取到的多一
              // 现在2020-04-25 所以这个月已经过了25天
              let monthDayNum = new Date().getDate() + 1;
              // 计算天数 一天又多少毫秒 8.64e7
              // 不可以选择的日期 < 现在的日期-（365+25）天  即：2019-04-01之前的日期不可以选
              return time.getTime() < Date.now() - (days + monthDayNum) * 8.64e7;
            }
          }
        },
        limitHistoryTime: {
          /**
           * 限制选择查询历史1年前数据
           * @param time
           * @returns {boolean}
           */
          disabledDate: function(time) {
            if (new Date(time).getTime() > new Date().getTime()) {
              return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
            } else {
              // 因为项目要求是查找一年之之前的数据 前如 2019-03-30 之前的数据
              // 需要找出现在 2020-04-25 到 2019-04-01有多少天
              // 1.判断年，平年还是闰年
              let y = new Date().getFullYear() - 1;
              // 用年份除以4，如果没有余数就是闰年，如果有余数就是平年。
              let isLeap = (0 === y % 4 && 0 === y % 100) || 0 === y % 400;
              // 平年的2月是28天，闰年是的2月是29天 因此闰年比平年多一天
              // 2019 是 365天
              let days = isLeap ? 366 : 365;
              // getDate 获取现在月份的天数，因为是从0开始，所以，实际日期要比获取到的多一
              // 现在2020-04-25 所以这个月已经过了25天
              let monthDayNum = new Date().getDate() + 1;
              // 可以选择的日期 < 现在的日期-（365+25）天  即：2019-04-01之前的日期不可以选
              return time.getTime() > Date.now() - (days + monthDayNum) * 8.64e7;
            }
          }
        }
      },
    }
  },
  methods: {
    /*当前历史的切换方法： 切换默认可选时间范围
     * 例如： 1个月前
     * */
    changeHistory() {
      this.dataPickerData.datePickerSpace = null;
      this.dataPickerData.limitDatePickerSpace = null;
      let end = null;
      let start = null;
      if (this.historyFlag === "H") {
        end = formatUtil.transformationDate(new Date(), "year", 1);
        start = formatUtil.transformationDate(end, "year", 1);
      } else {
        end = formatUtil.transformationDate(
          formatUtil.dateFormat(new Date(), "yyyy-MM-dd")
        );
        start = formatUtil.transformationDate(new Date(), "year", 1);
      }
      this.dataPickerData.limitDatePickerSpace = [start, end];
    }
  },
  watch: {
    // 查询条件时间处理：将时间数组拆分并放入查询条件中
    "dataPickerData.datePickerSpace": function(val) {
      if (val && val.length > 0) {
        this.startDate = val[0];
        this.endDate = val[1];
      } else {
        this.startDate = null;
        this.endDate = null;
      }
    }
  }
}
</script>

因为按照有按年限制的也有要按照几个月份限制的，所以小编将这些封装了一个工具类

let demoFormatUtil = {};

/**
 * 时间日期处理：根据传入日期：返回之前的几年，几月，几日的日期：返回格式：“YY-MM-DD”
 * @param date 时间new Date()或者“2020-03-24”
 * @param dateType Y：年，M：月，D：日
 * @param dateNum 几年，几月，几天
 *
 */
demoFormatUtil.transformationDate = function(date, dateType, dateNum) {
  let retrueDate;
  let dateValue = new Date(Date.parse(date));
  /*返回前几年*/
  if (dateType === "year") {
    dateValue.setFullYear(dateValue.getFullYear() - dateNum);
  }
  /*返回前几月*/
  if (dateType === "month") {
    dateValue.setMonth(dateValue.getMonth() - dateNum);
  }
  /*返回前几天*/
  if (dateType === "day") {
    dateValue.setDate(dateValue.getDate() - dateNum);
  }
  let yy = dateValue.getFullYear();
  let mm = dateValue.getMonth() + 1; //因为getMonth（）返回值是 0（一月） 到 11（十二月） 之间的一个整数。所以要给其加1
  let dd = dateValue.getDate();
  if (mm < 10) {
    mm = "0" + mm;
  }
  if (dd < 10) {
    dd = "0" + dd;
  }
  retrueDate = yy + "-" + mm + "-" + dd;
  return retrueDate;
};
/**
 * 日历控件，配置时间限制
 * @type {{oneDayBefore: (function(*): boolean), todayDayBefore: (function(*): boolean)}}
 */
demoFormatUtil.pickerOptions = {
  /**
   * 限制选择今天之前日期（包括今天）
   * @param time
   * @returns {boolean}
   */
  todayDay: {
    disabledDate: function(time) {
      return time.getTime() > Date.now();
    }
  },
  /**
   * 限制选择今天之前日期（不包括今天）
   * @param time
   * @returns {boolean}
   */
  todayDayBefore: {
    disabledDate: function(time) {
      return time.getTime() > Date.now() - 1 * 8.64e7;
    }
  },
  /**
   * 限制选择近1年的日期（去年的本月1日到今天）
   * @param time
   * @returns {boolean}
   */
  oneYear: {
    disabledDate: function(time) {
      if (new Date(time).getTime() > new Date().getTime()) {
        return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
      } else {
        // 判断年 导历史按月
        let y = new Date().getFullYear() - 1;
        let isLeap = (0 === y % 4 && 0 === y % 100) || 0 === y % 400;
        let days = isLeap ? 366 : 365;
        let monthDayNum = new Date().getDate() + 1;
        return time.getTime() < Date.now() - (days + monthDayNum) * 8.64e7;
      }
    }
  },
  /**
   * 限制选择查询历史1年前数据
   * @param time
   * @returns {boolean}
   */
  oneYearBefore: {
    disabledDate: function(time) {
      if (new Date(time).getTime() > new Date().getTime()) {
        return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
      } else {
        let y = new Date().getFullYear() - 1;
        let isLeap = (0 === y % 4 && 0 === y % 100) || 0 === y % 400;
        let days = isLeap ? 366 : 365;
        let monthDayNum = new Date().getDate() + 1;
        return time.getTime() > Date.now() - (days + monthDayNum) * 8.64e7;
      }
    }
  }
};
export default demoFormatUtil;```
引入工具工具类

```javascript
<template>
    <!--vue 时间选择控件测试-->
    <div class="hello">
        <div>
            选中的日期：{{startDate}}到{{endDate}}
        </div>
        <div>
            时间范围：
            <el-radio
                    v-model="historyFlag"
                    @change="changeHistory"
                    label="D"
            >
                近一年</el-radio
            >
            <el-radio
                    v-model="historyFlag"
                    @change="changeHistory"
                    label="H"
            >
                历史</el-radio
            >
        </div>
        <div
        >
            <div >
                操作时间：<el-date-picker
                    v-model="dataPickerData.datePickerSpace"
                    type="daterange"
                    unlink-panels
                    :default-value="dataPickerData.limitDatePickerSpace"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="
               开始日期
              "
                    end-placeholder="结束日期"
                    :picker-options="
                historyFlag === 'D'
                  ? dataPickerData.limitCurrentTime
                  : dataPickerData.limitHistoryTime
              "
            >
            </el-date-picker>
            </div>
        </div>
    </div>
</template>

<script>
import formatUtil from "./formatUtil";
export default {
  name: 'DatePickerDemo',
  data () {
    return {
      startDate: "",
      endDate: "",
      // 历史选择变量
      historyFlag: "D",
      // 为了区分点击时候没有查询就导出，导致导出历史记录混乱的三方变量
      isSearchHistory: "D",
      dataPickerData: {
        // 日期时间选择数组【开始时间，结束时间】
        datePickerSpace: null,
        // 日期选择数组空间可选范围控制
        limitDatePickerSpace: null,
        limitCurrentTime: formatUtil.pickerOptions.oneYear,
        limitHistoryTime: formatUtil.pickerOptions.oneYearBefore
      },
    }
  },
  methods: {
    /*当前历史的切换方法： 切换默认可选时间范围
     * 例如： 1个月前
     * */
    changeHistory() {
      this.dataPickerData.datePickerSpace = null;
      this.dataPickerData.limitDatePickerSpace = null;
      let end = null;
      let start = null;
      if (this.historyFlag === "H") {
        end = formatUtil.transformationDate(new Date(), "year", 1);
        start = formatUtil.transformationDate(end, "year", 1);
      } else {
        end = formatUtil.transformationDate(
          formatUtil.dateFormat(new Date(), "yyyy-MM-dd")
        );
        start = formatUtil.transformationDate(new Date(), "year", 1);
      }
      this.dataPickerData.limitDatePickerSpace = [start, end];
    }
  },
  watch: {
    // 查询条件时间处理：将时间数组拆分并放入查询条件中
    "dataPickerData.datePickerSpace": function(val) {
      if (val && val.length > 0) {
        this.startDate = val[0];
        this.endDate = val[1];
      } else {
        this.startDate = null;
        this.endDate = null;
      }
    }
  }
}
</script>