一般
<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里面的判斷。