element日期组件时间范围选择限制

前言

element中的日期组件在管理系统中用的非常多，在一些必要的场景下，我们可能会对用户所选的时间范围做区间限制，下面介绍几个常用限制时间范围的方法，其实主要是通过 picker-options 属性来限制可选择的时间区间。

1.只能选择今天及今天之后的日期

<template>
  <div>
    <el-date-picker v-model="timeDate" type="daterange" range-separator="至" start-placeholder="开始日期"
      end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timeDate: "",
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7; //只能选择今天及今天之后的日期
            //return time.getTime() < Date.now() - 8.64e6; //只能选择今天之后的日期，今天的日期也不能选
          }
        },
      }
    },
  }
</script>

2.只能选择今天及今天之前的日期

<template>
  <div>
    <el-date-picker v-model="timeDate" type="daterange" range-separator="至" start-placeholder="开始日期"
      end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timeDate: "",
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6; //只能选择今天及今天之前的日期
            // return time.getTime() > Date.now() - 8.64e7; //只能选择今天之前的日期，连今天的日期也不能选
          }
        },
      }
    },
  }
</script>

3.只能选择三个月之前到今天的日期

<template>
  <div>
    <el-date-picker v-model="timeDate" type="daterange" range-separator="至" start-placeholder="开始日期"
      end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timeDate: "",
        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;
          }
        }, //只能选择三个月之前至今天的日期
      }
    },
  }
</script>

同理，如果想要调整为60天前、30天前或者7天前时间只需要将 “let three = 90 * 24 * 3600 * 1000” 中的90修改为需要的时间节点即可。

4.快捷选择日期区间

<template>
  <div>
    <el-date-picker v-model="timeDate" type="daterange" range-separator="至" start-placeholder="开始日期"
      end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        timeDate: "",
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
  }
</script>