el-date-picker 开始时间选定后,结束时间不可选择开始时间之前的日期

<el-date-picker
            v-model="startTime"
            name="startTime"
            value-format="yyyy-MM-dd"
            type="date"
            @change="activityStartTime"
            placeholder="请选择开始日期"
            :picker-options="pickerOptions"
          />
<el-date-picker
            v-model="endTime"
            name="endTime"
            value-format="yyyy-MM-dd"
            type="date"
            @change="activityEndTime"
            placeholder="请选择结束日期"
            :picker-options="pickerOptions1"
          />

data(){
	return{
		startTime:new Date(new Date - 1000*60*60*24*31),toLocaleDateString().split('/').map(item=>{if(item<10){return '0'+item}else{return item}}).join('-'),
		endTime:new Date().toLocaleDateString().split('/').map(item=>{if(item<10){return '0'+item}else{return item}}).join('-'),
		pickerOptions:{},
		pickerOptions1:{}
	}
}

activityStartTime(val){
	this.pickerOptions1 = Object.assign({}, this.pickerOptions,{
		disabledDate: time => {
			return (
				new Date(time).getTime() <= new Date(this.startTime)
			)
		}
	})
}

activityEndTime(val){
	if(!value){
		this.pickerOptions = Object.assign({}, this.pickerOptions1,{
			disabledDate: time => {
				return time.getTime() >= new Date("2999-12-30 23:59:59").getTime();
			}
		})
		return
	}

	this.pickerOptions = Object.assign({}, this.pickerOptions1,{
		disabledDate: time => {
			return (
				time.getTime() >
				new Date(this.endTime).getTime() - 24*3600*1000
			)
		}
	})
}


参考:
1、el-date-picker中日期选择器时间限制,限制选择30天时间范围且不大于当前时间 ; 时间范围只能选择1天;时间范围在某一段时间内
2、el-date-picker日期的限制

最近更新

  1. MATLAB中balance函数用法

    2024-07-10 22:52:02       0 阅读
  2. 栈和队列之间有哪些区别

    2024-07-10 22:52:02       0 阅读
  3. python 爬虫技术 第04节 函数和模块

    2024-07-10 22:52:02       0 阅读
  4. 打造安全堡垒:Xcode应用权限管理全解析

    2024-07-10 22:52:02       0 阅读
  5. MSPM0G3507——K210和M0通信(K210给M0发数据)

    2024-07-10 22:52:02       0 阅读
  6. Vue3替代vue2就好比自动驾驶代替出租网约车

    2024-07-10 22:52:02       0 阅读
  7. 如何学习计算机

    2024-07-10 22:52:02       0 阅读

热门阅读

  1. 记录一些简单的linux运维命令

    2024-07-10 22:52:02       7 阅读
  2. python--del

    2024-07-10 22:52:02       5 阅读
  3. BiLSTM模型实现

    2024-07-10 22:52:02       7 阅读
  4. Vue2.0和Vue3.0的区别?

    2024-07-10 22:52:02       8 阅读
  5. 网络安全应急处理流程

    2024-07-10 22:52:02       6 阅读
  6. 算法·高精度

    2024-07-10 22:52:02       5 阅读
  7. 闲聊C++与面向对象思想

    2024-07-10 22:52:02       6 阅读
  8. 路由器中 RIB 与 FIB 的区别

    2024-07-10 22:52:02       9 阅读
  9. 生成日志系统和监控

    2024-07-10 22:52:02       9 阅读
  10. Apache Spark详解

    2024-07-10 22:52:02       7 阅读
  11. qt opencv 应用举例

    2024-07-10 22:52:02       7 阅读
  12. Pytorch中分类回归常用的损失和优化器

    2024-07-10 22:52:02       6 阅读
  13. 【Rust】Cargo介绍

    2024-07-10 22:52:02       6 阅读