最近工作当中遇到一个小问题，就是使用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属性不起作用
