[JavaScript知识库]element-ui 限制日期范围

• 需求：限制最多选中五天时间
• onPlick事件只有type=daterange 或 datetimerange 才生效
• 根据element-ui el-date-picker 组件的文档，可以通过onPick获取第一次点击跟第二次点击触发的事件

<template>
	<el-date-picker
         v-model="value1"
         type="daterange"
         :picker-options="pickerOptions"
         start-placeholder="开始日期"
         end-placeholder="结束日期">
    </el-date-picker>
</template>

• 定义个全局变量保存开始时间的值
  
• 当开始时间点击过后才会去禁用需要限制的范围
• 可以通过修改let secondNum = 60 * 60 * 24 * 4 * 1000 来改变需要限制范围
• 再通过return 返回满足条件的Boolean
• 

 	
data(){
	return{
	 pickerOptions: {
          disabledDate(time) {
            let timeOptionRange = pickerRange.timeOptionRange
            let secondNum = 60 * 60 * 24 * 4 * 1000
            if (timeOptionRange) {
              return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum
            }
          },
          onPick(time) {
            //第一次点击开始时间触发事件，time.minDate获取到值就说明可以设置禁用的范围
            if (time.minDate && !time.maxDate) {
              pickerRange.timeOptionRange = time.minDate
            }
            if (time.maxDate) {
              pickerRange.timeOptionRange = null
            }
          }
        }
	}
}

• 效果图
  

• 日期选择器在每次点击的时候都通过watch深度监听，当每次点击的时候都会触发onPick事件

• 源码太多，自行研究…