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. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 22:52:02       100 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 22:52:02       107 阅读
  3. 在Django里面运行非项目文件

    2024-07-10 22:52:02       90 阅读
  4. Python语言-面向对象

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

热门阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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