vue 控制日期范围选择的后一个日期不能小于前一个日期

我就是我 2022-12-07 15:10 238阅读 0赞

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70_pic_center]

日期选择：

<el-form-item label="颁布时间" class="el-form-cell billDataAll">
    	<div class="el-form-cellcon">
    		<el-date-picker v-model="searchValue.enactDateBegin" format="yyyy - MM - dd" value-format="yyyy-MM-dd" type="date" @change="dateChange()" placeholder="起始日期" ></el-date-picker>
    		<span class="block_span">-</span>
    		<el-date-picker v-model="searchValue.enactDateEnd" format="yyyy - MM - dd" value-format="yyyy-MM-dd" type="date" placeholder="结束日期" :picker-options="pickerOptions" ></el-date-picker>
    	</div>
    </el-form-item>

不可选控制：

data(){ 
    	return{ 
    		pickerOptions:{ },
    	};
    },
    methods: { 
    	//日期修改
    	dateChange(){ 
    		let _this=this;
    		this.pickerOptions={  //日期禁用
    			disabledDate(date) { 
    			return date.getTime() < new Date(_this.searchValue.enactDateBegin).getTime() - 86400000;
    			}
    		}
    		if(this.searchValue.enactDateEnd){ 
    			let enactDateBeginText=new Date(this.searchValue.enactDateBegin).getTime();
    			let enactDateEndText=new Date(this.searchValue.enactDateEnd).getTime();
    			if(enactDateBeginText>enactDateEndText){ 
    			this.searchValue.enactDateEnd='';
    			}
    		}
    	},
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI0OTc1NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/eb97eb9f694249f28dfb667a8abbab76.png