element组件 日期选择器 el-date-picker 日期范围控制

---

前言

最近在项目上使用element组件做前端的开发，但是在日期选择器的可选范围控制方面遇到的小麻烦，特此记录一下。

---

一、外部传入日期可选范围

1、需求描述

通过下拉框选择一个执行时间年份，使得区间配置中日期选择器的可选的时间范围，在选择年度之内，超出本年度的时间日期不可选。

2、实现步骤

1) 日期选择器组件

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

2） 实现脚本

<script>
  export default {
    data() {
      //日期范围控制
      let effDateDisabledDate = (time) =>{
        //判断执行时间 是否为空 
        // this.model.year:外部参数
      	if(this.model.year==''){
      		// false 说明没有日期限制
      		return false;
		}
		//每年的开始时间
		var startStr = this.model.year + '-01-01 00:00:00'
		//每年的结束时间
		var endStr = this.model.year + '-12-31 23:59:59'
		//转 时间戳
		var startTime = new Date(startStr).getTime()
		var endTime = new Date(endStr).getTime()
		//判断日期在什么范围可选
		return time.getTime() < startTime || time.getTime() > endTime 
	  }
      return {
        pickerOptions: {
        	disabledDate:effDateDisabledDate
        }
      }
   }
 }
 </script>

3、 实现效果

选择年份：2024；2023年的日期置灰不可选。

2024年的日期便可以正常选择：

2025年日期也是置灰，不可选择的状态：

---

二、两个日期选择组件间的可选范围控制

1、需求描述

有两个日期组件，生效时间日期组件，失效时间日期组件。要求生效/失效日期组件在未选择时，可随意选择。一旦选择了生效时间，则失效时间的选择范围只能是在生效时间之后。同理，一旦选择了失效时间，则生效时间的选择范围只能是在失效时间之前（有点绕口，大家见谅）。

2、实现步骤

1) 日期选择器组件

...
<el-row :gutter="20">
  <el-col :span="8">
	<el-from-item
		prop='effDate'
		label='生效日期'
	>
	  <el-date-picker
	  	v-model='ruleInfo.effDate'
	  	type='date'
	  	placeholder='选择日期'
	  	:picker-options='effDatePickerOptions'
	  >
	  </el-date-picker>
	</el-from-item>
  </el-col>
  <el-col :span="8">
	<el-from-item
		prop='expDate'
		label='失效日期'
	>
	  <el-date-picker
	  	v-model='ruleInfo.expDate'
	  	type='date'
	  	placeholder='选择日期'
	  	:picker-options='expDatePickerOptions'
	  >
	  </el-date-picker>
	</el-from-item>
  </el-col>
 ...
 </el-row>
 ...

2） 实现脚本

export default {
    data() {
      //生效日期范围控制
      let effDateDisabledDate = (time) =>{
      	//判断 失效日期是否存在
        if(this.ruleInfo.expDate == null || this.ruleInfo.expDate == ''){
        	return false
        }
        return time.getTime() >= new Date(this.ruleInfo.expDate).getTime()
	  }
	  //失效日期范围控制
      let expDateDisabledDate = (time) =>{
        //判断 生效日期是否存在
        if(this.ruleInfo.effDate == null || this.ruleInfo.effDate == ''){
        	return false
        }
        return time.getTime() >= new Date(this.ruleInfo.effDate).getTime()
	  }
      return {
      ...
      	ruleInfo:{
      		effDate:'',
      		expDate:''
		},
        effDatePickerOptions: {
        	//生效日期
        	disabledDate:effDateDisabledDate
        },
        expDatePickerOptions: {
        	//失效日期
        	disabledDate:expDateDisabledDate
        }
      }
   }
 }
 </script>

3、 实现效果

生效、失效均未选日期时，日期则都可以选择

选中生效日期：失效时间不能选生效之前的日期

选中失效，生效日期不能选失效之后的日期: 失效日期选中01-15，则生效日期可选的范围在01-14之前的日期。

---

总结

日期选中器的日期可选范围的控制大致就是这样子。小白上路，很多不足之处，请大神多多指教。