vue+element设置选择日期最大范围（优秀版）

element的选择日期组件里没有像移动端vant直接设置max-date的api，因此在不能动态设置选择的第二个时间(需要分别选择起止时间和结束时间，但可以加上关联)，

看了很多博客有的效果直接出不来，有的代码格式看不懂要不就是不完全符合自己的需求，自己摸索看前人可取的方法终于实现了（帮后台写的，等写完后台需求已经不需要了，记录下笔记，例子范围是7天）

效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-date-picker
       v-model="value1"
       type="date"
       placeholder="开始日期"
       value-format="timestamp"
       :picker-options="pickerOptions0">
    </el-date-picker>
    <el-date-picker
       v-model="value2"
       type="date"
       placeholder="结束日期"
       value-format="timestamp"
       :picker-options="pickerOptions1">
    </el-date-picker>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
    el: '#app',
    data(){
      return { 
        value1:'',
        value2:'',
        maxLength:7,         //设置两个日期的最大间隔
        pickerOptions0: {
          disabledDate:(time)=>{
            if(this.value2!=''){
              //console.log(this.value2)     //清除结束日期时this.value2的值为null
              if(this.value2===null){
                return time.getTime() < Date.now();
              }else{
                let lastTime = this.value2-this.maxLength*24*3600*1000 + 8.64e7
                return time.getTime() > this.value2 || time.getTime() < lastTime
              }
            }else{
              return time.getTime() < Date.now();                   //将比当前时间还早的时间不可选
            }
          }
        },
        pickerOptions1: {
          disabledDate:(time)=>{
            if(this.value1!=''){
              let nextTime = this.value1+this.maxLength*24*3600*1000 - 8.64e7
              return time.getTime() < this.value1||time.getTime() > nextTime;
            }else{
              return time.getTime() < Date.now()
            }
          }
        },
      }
    },
})
</script>
</html>

vue+element设置选择日期最大范围（优秀版）

相关推荐