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

效果图：日期选择：<el-form-item label="颁布时间"class="el-form-cell billDataAll"><div class="el-form-cellcon"><el-date-pickerv-model="searchValue.enactDateBegin"format="yyyy - MM - dd"value-format="

wode路

1458人浏览 · 2020-09-16 14:52:11

wode路 · 2020-09-16 14:52:11 发布

效果图：
在这里插入图片描述

日期选择：

<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='';
			}
		}
	},
}