Element UI 日期选择器时间选择范围限制

本篇文章于 2019-04-10 初次写在我的个人小站，链接：liuxianyu.cn/article/ele…

  最近后台管理系统中的项目遇到了选择时间时需要加以限制的问题，记录一下。

  DatePicker 组件代码：

<el-date-picker
    v-model="time"
    type="date"
    placeholder="选择日期"
    :picker-options="pickerOptions">
</el-date-picker>

一、选择今天及今天以后的日期

data() {
  return {
    time: '',
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
      }
    }
  }
}

二、选择今天及今天以前的日期

data() {
  return {
    time: '',
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() > Date.now() - 8.64e6
      }
    }
  }
}

三、选择今天以后的日期（不含今天）

data() {
  return {
    time: '',
    pickerOptions: {
      disabledDate(time) {
        return time.getTime() < Date.now();
      }
    }
  }
}

四、选择三个月之前到今天的日期

data() {
  return {
    time: '',
    pickerOptions: {
      disabledDate(time) {
        let curDate = (new Date()).getTime();
        let three = 90 * 24 * 3600 * 1000;
        let threeMonths = curDate - three;
        return time.getTime() > Date.now() || time.getTime() < threeMonths;
      }
    }
  }
}