【el-date-picker】element-ui中设置日期选择当前及大于当前的日期

最新推荐文章于 2024-08-09 16:49:47 发布

程序媛董董

最新推荐文章于 2024-08-09 16:49:47 发布

阅读量1.8k

点赞数 9

文章标签： elementui 前端 html5 vue.js

本文链接：https://blog.csdn.net/weixin_48240390/article/details/135482440

版权

文章介绍了在Vue项目中使用ElementUI的el-date-picker组件时，如何设置日期选择器的禁选策略，包括只能选择当前及以后的日期、当前及以前的日期，以及限制开始日期不能大于结束日期的示例代码。

摘要由CSDN通过智能技术生成

单个日期选择

<el-date-picker
       v-model="value1"
       type="date"
       :picker-options="pickerOptions">
</el-date-picker>

1.只能选择当前及以后的日期



 data() {
  	return {
	   pickerOptions: {
	       disabledDate(time) {
	           return time.getTime() < Date.now() - 8.64e7;
	           // 或者 return time.getTime() < Date.now();
	       }
	   },
	}
}

2.只能选择当前及当前以前的日期

  data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
            // 或者return time.getTime() > Date.now();
          }
        }, 
   }    
}

3.设置选择三个月之前到今天的日期

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            let curDate = (new Date()).getTime();
            let three = 90 * 24 * 3600 * 1000;
            let threeMonths = curDate - three;
            return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          }
        }, 
   }    
}

限制结束日期不能大于开始日期

<el-date-picker
  v-model="value1"
  type="date"
  placeholder="开始日期"
  :picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
  v-model="value2"
  type="date"
  placeholder="结束日期"
  :picker-options="pickerOptions1">
</el-date-picker>


data(){
    return {
         pickerOptions0: {
               disabledDate: (time) => {
                   if (this.value2 != "") {
                       return time.getTime() > Date.now() || time.getTime() > this.value2;
                   } else {
                       return time.getTime() > Date.now();
                   }

               }
            },
            pickerOptions1: {
                disabledDate: (time) => {
                    return time.getTime() < this.value1 || time.getTime() > Date.now();
                }
            },
    }     
}