基于element-ui实现的带有跨度限制的日期范围查询

element-ui中的datepicker组件可以用来选择日期。现在需要在选择日期时，日期的跨度范围不能超过30天。以下是对这一场景下的简单实现。

 

现在的思路为当用户选择了第一个日期之后，开始对第二个选项进行限制，即第二个选项只能为第一个日期前后30天内的日期。所以关键有两点，第一点是获取到所选择的第一个日期，第二点是获取完之后进行限制。这里是使用了组件的picker-options属性的两个参数，onPick负责获取选择的第一个日期，disabledDate负责对第二次选择进行限制。

 

 

 

 

data里的数据如下：

data() {
 return {
  standardTime: 0,
  pickerOptions: {
   disabledDate: time => {
    return this.standardTime
     ? Math.abs(time - this.standardTime) > 30 * 24 * 60 * 60 * 1000
     : false;
    },
    onPick: ({ minDate }) => {
     console.log(minDate);
     this.standardTime = new Date(minDate).getTime();
    }
   },
   date: [],
  };
 };

数据中的standardTime用于记录第一次选择得到的日期，默认值为0用于表示不存在。通过尝试发现，选择的第一个日期应该是onpick里的minDate这个参数，所以当选择了之后就将该值赋值给standardTime。disabledDate的time参数（面板中的每一个日期）通过和standardTime对比判断是否需要禁选。minDate得到的值的格式为 “Sun Mar 01 2020 00:00:00 GMT+0800 (中国标准时间)” ，还需要转换为时间戳格式。

 

watch监听的变量如下：

watch: {
 date(cur) {
  // 如果date变量为空
  if (!cur || cur.length === 0) {
   this.standardTime = 0;
  }
 }
}

watch监听date，如果日期选择组件的内容被清空，则将standardTime也还原为默认值。

 

template里的代码如下：

 1 <el-date-picker
 2  v-model="date"
 3  size="small"
 4  type="daterange"
 5  value-format="timestamp"
 6  align="right"
 7  unlink-panels
 8  range-separator="至"
 9  start-placeholder="开始日期"
10  end-placeholder="结束日期"
11  :picker-options="pickerOptions"
12  @blur="standardTime = 0">
13 </el-date-picker>

 除了一些基本的属性外，还对失去焦点事件进行了监听，失去焦点后，standardTime还原为默认值。

 

最后的效果如下：

 

 选择了3月1日之后，1月31日之前和3月31日之后的都会变为不可选中。

 

这是目前自己的解决方法，可能中间有冗余的处理步骤或不合理的地方，如果有时间之后会继续进行优化。