【elementUI】DatePicker时间选择器范围限定

 首先来看一下官方的DatePicker,接下来就以下面的效果，来逐步实现一下日期范围限定。在这里简单的分两种情况：1、单日期表，单日期选择的日期限定；2、多日期表，时间范围选择的日期限定。

1、 单日期表，单日期选择的日期限定

 首先把界面搭建一下（elementUI），官方地址：https://element.eleme.cn/#/zh-CN/component/date-picker

<div class="block">
	<el-date-picker 
		v-model="startDate" 
		type="date" placeholder="日期选择" 
		style="width:100%;max-width: 300px" 
		format="yyyy-MM-dd"
		:picker-options="pickerOptionsStart"
	 >
</el-date-picker>

element的日期范围限定主要是通过Picker Options的disabledDate ，因此在界面上要先绑定picker-options，然后直接在data里面限定日期，绑定的值可以像函数那样，对日期进行各种各样的操作。

export default {
  return{
     startDate:'',
     pickerOptionsStart:{
       disabledDate:(tiem) =>{
          // console.log(time); // 这里的参数和函数一样可以被打印出来
		  // console.log(time.getTime());
          const month = 30*24*60*60*1000  // 限定一个日期范围，这里是30天
		 return time.getTime() < new Date() || time.getTime() > new Date().getTime() + month // 直接return需要禁止的选择的日期，即当前日期~30天后的日期可选择外，其他的全部禁止
    }
   }
 }
}

2、 多日期表，多日期选择的日期限定

<div class="block">
			<el-date-picker 
				v-model="deskDate" 
				type="daterange" 
				range-separator="至" 
				start-placeholder="开始日期" 
				end-placeholder="结束日期"
				 style="width:100%;max-width: 300px" 
				 value-format="yyyy-MM-dd" 
				 :picker-options="pickeroptions"
				 >
			</el-date-picker>
		</div>

 （1）多日期范围的选择可以和单日选择一样，在disabledDate 中直接return

export default {
  return{
     deskDate:'',
     pickeroptions:{
       disableDate:(tiem) =>{
          // console.log(time); // 这里的参数和函数一样可以被打印出来
		  // console.log(time.getTime());
          const month = 30*24*60*60*1000  // 限定一个日期范围，这里是30天
		 return time.getTime() < new Date() || time.getTime() > new Date().getTime() + month // 直接return需要禁止的选择的日期，即当前日期~30天后的日期可选择外，其他的全部禁止
    }
   }
 }
}

 （2）也可以在选择日期的时候再做日期限定

pickeroptions:{
    // onPick：是选中日期时的回调函数，可以在这里对选中的日期进行处{maxDate：后选中日期；minDate：第一个选中的日期}
	onPick:({maxDate,minDate}) =>{
		this.startDate = minDate && minDate.getTime();
			if (maxDate) {
                // 选中后一个时，要把第一个的赋值清空
				this.startDate = ''
	           }
           },

disabledDate:(time) =>{
	const month = 30*24*60*60*1000 // 设定日期范围
	const minTime = this.startDate - month
	const maxTime = this.startDate + month
	if(this.startDate){
       // 选中第一个时，前后30天[-30,30]共60天可选选择，超出的不可选，这里的天数按自己喜欢设定
		return time.getTime() < minTime || time.getTime() > maxTime
		}
    // 不选任何日期执行下面的代码
	// return time.getTime() > Date.now()
}

【2021-7-28更新以下内容】 

当然，月份和年份的限制也可以用天数的思想来处理 ，比如月份要求是半年，那就用【180】天这样来计算，再比如年份，就用【365】天这样计算，如果想精确计算天数咋办~~~

3、精确计算日期不能超过某范围

 /**
   * 日期不能超出某范围
   *
   * @param start 开始日期 格式为：'2021-01-25'(string)
   * @param end 结束日期 格式为：'2021-01-25'(string)
   * @param range 范围 格式为：3(number)
   */
  function beyondDate(start,end,range) {
    let startArr = start.split('-');
    let endArr = end.split('-');
    let flag = true;

    startArr[1] = parseInt(startArr[1]);
    startArr[2] = parseInt(startArr[2]);
    endArr[1] = parseInt(endArr[1]);
    endArr[2] = parseInt(endArr[2]);

    // 同年
    if (startArr[0]===endArr[0]){
      // 月间隔超出范围，直接返回false
      if (endArr[1]- startArr[1] > range){
        flag = false
      } else if (endArr[1]-startArr[1] === range){
        // 月间隔没超出范围，比较日
        if (endArr[2] > startArr[2]){
           flag = false
        }
      }
      return flag
    }
    // 不同年
    else {
      if (endArr[0] - startArr[0] > 1){
        flag = false
      }else if (endArr[0] - startArr[0] === 1){
        // 开始年分小于10时，不需要跨年
        if (startArr[1] < 10){
          flag = false
        } else if (startArr[1] + range -endArr[1] <12){
          // 月间隔超出范围
          flag = false
        } else if (startArr[1] + range -endArr[1] === 12){
          // 月间隔没超出范围，比较日
          if (endArr[2] > startArr[2]){
             flag = false
          }
        }
      }
      return flag
    }
  }

   let a = beyondDate(start,end,3)
  console.log(a);

以上就是【elementUI】DatePicker时间选择器范围限定的基本思路，不管是单日期，还是多日期的选择，其目的都是为了更好的用户体验。