一般
<el-date-picker />使用会出现起始日期和结束日期，结束日期不能早与起始日期，选择了其实日期后，结束日期大于起始日期的不可选，置灰，同理先选结束日期后再选起始日期，那么起始日期不能选截止日期后面的。
代码如下：
1，起始日期：
<el-form-item
label="有效起始日期"
prop="title"
>
<el-date-picker
v-model="info.startDate"
type="date"
placeholder="选择日期"
:picker-options="pickerIssueOptions"
size="mini"
style="width:100%;height:30px"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
/>
2，截止日期：
<el-form-item
label="有效截止日期"
prop="title"
>
<el-date-picker
v-model="info.endDate"
type="date"
placeholder="选择日期"
:picker-options="pickerExpireOptions"
size="mini"
style="width:100%;height:30px"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
/>
然后主要是针对picker-options的操作：
在data中写上
pickerIssueOptions: {
disabledDate: (time) => {
if (!this.info.endDate) { return false }
return time.getTime() > new Date(this.info.endDate.replace(/-/g, '/')).getTime()
}
},
pickerExpireOptions: {
disabledDate: (time) => {
if (!this.info.startDate) { return false }
return time.getTime() < new Date(this.info.startDate.replace(/-/g, '/')).getTime()
}
},
即可，注意if里面的判断。