elementui日期选择禁用问题(开始日期小于结束日期or选择大于当前日期)

一、选择大于等于当前日期

请添加图片描述

<el-date-picker 
	v-model="searchForm.startDate" 
	:picker-options="pickerOptions"
    value-format="yyyy-MM-dd" 
    placeholder="选择开始日期" />
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
        	//选择的日期大于等于当前日期(包含今天)
          return time.getTime() < Date.now() - 8.64e7;
          //若选择的日期大于当前日期(不包含今天): time.getTime() < Date.now()
          //若选择的日期小于当前日期(不包含今天): time.getTime() > Date.now() - 8.64e7
          //若选择的日期小于等于当前日期(包含今天): time.getTime() > Date.now()
        }
      },
      searchForm:{
      	startDate:"",
      	endDate:""
      }
     }
  },
  methods:{
  
  }  
}
二、 结束日期大于开始日期
<el-date-picker 
	v-model="searchForm.startDate" 
	:picker-options="pickerStartOptions"
    value-format="yyyy-MM-dd" 
    placeholder="选择开始日期" /><el-date-picker 
	v-model="searchForm.endDate" 
	:picker-options="pickerEndOptions"
    value-format="yyyy-MM-dd" 
    placeholder="选择结束日期" />
         
export default {
  data() {
    return {
      // 选择的生效日期时间
      pickerStartOptions: {
          disabledDate: (time) => {
              if (this.searchForm.endDate) {
                  return time.getTime() > new Date(this.searchForm.endDate).getTime();
              }          
          }
      },
      // 选择的失效日期时间
      pickerEndOptions: {
          disabledDate: (time) => {
              if (this.searchForm.startDate) {
                  return time.getTime() < new Date(this.searchForm.startDate).getTime()
              }             
          }
      },
      searchForm:{
      	startDate:"",
      	endDate:""
      }
     }
  },
  methods:{
  
  }  
}
三、开始日期大于等于当前日期and结束日期大于等于开始日期

请添加图片描述

生效时间:<el-date-picker
		    v-model="form.effectiveDate"
		    type="datetime"
		    placeholder="选择日期时间"
		    :picker-options="pickerStartOptions"
		    value-format="yyyy-MM-dd HH:mm:ss"/>
失效时间:<el-date-picker
		    v-model="form.invalidDate"
		    type="datetime"
		    placeholder="选择日期时间"
		    :picker-options="pickerEndOptions"
		    value-format="yyyy-MM-dd HH:mm:ss"/>     
export default {
  data() {
    return {
       // 选择的生效日期时间
        pickerStartOptions: {
            disabledDate: (time) => {
                if (this.form.invalidDate) {
                    return time.getTime() > new Date(this.form.invalidDate).getTime();
                }
                return time.getTime() < Date.now() - 8.64e7;
            }
        },
        // 选择的失效日期时间
        pickerEndOptions: {
            disabledDate: (time) => {
                if (this.form.effectiveDate) {
                    return time.getTime() < new Date(this.form.effectiveDate).getTime()
                }
                //
                return time.getTime() < Date.now() - 8.64e7;
            }
        },
      searchForm:{
      	startDate:"",
      	endDate:""
      }
     }
  },
  methods:{
  
  }  
}
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值