最近工作当中遇到一个小问题，就是使用Element日期控件DatePicker的时候，当一个查询条件为日期区间，我要查两个月之间的数据，分别选择开始月和结束月，会出现一个问题，那就是结束月选的日期可以比开始月小，开始月选的日期可以比结束月大
就像这样

此时代码是这样写的

<li class="option-item">
	<span class="label">开始月</span>
	<el-date-picker v-model="smonthdateVal" type="month" class="datePickerClass" format="yyyy-MM" value-format="yyyy-MM">
	</el-date-picker>
</li>
<li class="option-item">
	<span class="label">结束月</span>
	<el-date-picker v-model="emonthdateVal" type="month" class="datePickerClass" format="yyyy-MM" value-format="yyyy-MM">
	</el-date-picker>
</li>

要想选中开始月之后，选择结束月不能比开始月小，选中结束月之后，选择开始月不能比结束月大，只需加一个picker-options属性就可以了，在picker-options中加上disabledDate属性用于限制日期选择的范围
代码如下

<li class="option-item">
	<span class="label">开始月</span>
	<el-date-picker v-model="smonthdateVal" type="month" class="datePickerClass" format="yyyy-MM" :picker-options="startMonthOption" @change="selectStartMonth">
	</el-date-picker>
</li>
<li class="option-item">
	<span class="label">结束月</span>
	<el-date-picker v-model="emonthdateVal" type="month" class="datePickerClass" format="yyyy-MM" :picker-options="endMonthOption" @change="selectEndMonth">
	</el-date-picker>
</li>

data中定义全局变量startMonthOption和endMonthOption

两个change方法如下

//开始月日期控件点击时触发此方法
selectStartMonth() {
	this.endMonthOption = {
		disabledDate: (time) => {
			if(this.smonthdateVal != '') {
				return time.getTime() < this.smonthdateVal;
			}
		}
	};
},
//结束月日期控件点击时触发此方法
selectEndMonth() {
	this.startMonthOption = {
		disabledDate: (time) => {
			if(this.emonthdateVal != '') {
				return time.getTime() > this.emonthdateVal;
			}
		}
	};
},

效果如下图


注：加picker-options属性之后日期控件的数据格式必须是日期格式，也就是不能加value-format=“yyyy-MM”，要想转换成字符串格式，只能后期通过方法转换，并且要保证每次执行change方法时，日期数据的格式都是日期格式，否则disabledDate属性不起作用