基于element-ui实现的带有跨度限制的日期范围查询
element-ui中的datepicker组件可以用来选择日期。现在需要在选择日期时,日期的跨度范围不能超过30天。以下是对这一场景下的简单实现。
现在的思路为当用户选择了第一个日期之后,开始对第二个选项进行限制,即第二个选项只能为第一个日期前后30天内的日期。所以关键有两点,第一点是获取到所选择的第一个日期,第二点是获取完之后进行限制。这里是使用了组件的picker-options属性的两个参数,onPick负责获取选择的第一个日期,disabledDate负责对第二次选择进行限制。
data里的数据如下:
1 data() { 2 return { 3 standardTime: 0, 4 pickerOptions: { 5 disabledDate: time => { 6 return this.standardTime 7 ? Math.abs(time - this.standardTime) > 30 * 24 * 60 * 60 * 1000 8 : false; 9 }, 10 onPick: ({ minDate }) => { 11 console.log(minDate); 12 this.standardTime = new Date(minDate).getTime(); 13 } 14 }, 15 date: [], 16 }; 17 };
数据中的standardTime用于记录第一次选择得到的日期,默认值为0用于表示不存在。通过尝试发现,选择的第一个日期应该是onpick里的minDate这个参数,所以当选择了之后就将该值赋值给standardTime。disabledDate的time参数(面板中的每一个日期)通过和standardTime对比判断是否需要禁选。minDate得到的值的格式为 “Sun Mar 01 2020 00:00:00 GMT+0800 (中国标准时间)” ,还需要转换为时间戳格式。
watch监听的变量如下:
1 watch: { 2 date(cur) { 3 // 如果date变量为空 4 if (!cur || cur.length === 0) { 5 this.standardTime = 0; 6 } 7 } 8 }
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日之后的都会变为不可选中。
这是目前自己的解决方法,可能中间有冗余的处理步骤或不合理的地方,如果有时间之后会继续进行优化。