需求:
选择下单开始日期后,结束日期只能选择大于或等于当前下单日期,然后当前选择的结束日期之前的日期都不能再选择了,然后更改选择好的下单日期时,是不能大于当前选中的结束日期的
效果图:


代码:
<el-form :inline="true" :model="formUser" class="form_input">
<el-form-item label="下单时间">
<el-date-picker
v-model="formUser.orderStart_Date"
value-format="yyyy-MM-dd" // 把组件里默认的中国标准时间格式化为 年-月-日
type="date"
placeholder="选择开始日期"
:picker-options="orderStartDate"
size="medium">
</el-date-picker>
<span> - </span>
<el-date-picker
v-model="formUser.orderEnd_Date"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择结束日期"
:picker-options="orderEndDate"
size="medium">
</el-date-picker>
</el-form-item>
</el-form>
export default{
data(){
return{
formUser: {
orderStart_Date: '', // 下单开始时间
orderEnd_Date: '', // 下单结束时间
},
// 下单开始日期小于结束日期
orderStartDate: {
disabledDate: (time) => {
if (this.formUser.orderEnd_Date) {
return time.getTime() > new Date(this.formUser.orderEnd_Date).getTime();
}
},
},
orderEndDate: {
disabledDate: (time) => {
if (this.formUser.orderStart_Date) {
// 减掉86400000秒(一天)目的是把当前选中的下单日期包含在内可以选择,也就是说在选择结束日期时,可以选择当前下单日期
return time.getTime() < new Date(this.formUser.orderStart_Date).getTime() - 86400000;
}
},
},
}
}
}
网友评论