案列
需求: 结束日期不能小于开始日期
<template>
<div class="con">
<div class="main">
<Row>
<Col span="12">
<date-picker
type="datetime"
v-model="startTime"
placeholder="请选择开始时间"
:options="startTimeOption"
@on-change="onStartTimeChange"
></date-picker>
</Col>
<Col span="12">
<date-picker
type="datetime"
v-model="endTime"
placeholder="请选择结束时间"
:options="endTimeOption"
@on-change="onEndTimeChange"
></date-picker>
</Col>
</Row>
</div>
</div>
</template>
<script>
export default {
data() {
return {
startTime: "",
endTime: "",
startTimeOption:{ disabledDate (date) {
return date && date.valueOf() > Date.now();
}
},
endTimeOption:{}
};
},
methods: {
onStartTimeChange(startTime, type) {
this.endTimeOption = {
disabledDate(endTime) {
return (
endTime < new Date(startTime)
);
}
};
},
onEndTimeChange(endTime, type) {
this.startTimeOption = {
disabledDate(startTime) {
return (
startTime > new Date(endTime) || startTime > Date.now()
);
}
};
}
},
};
</script>
网友评论