<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
v-model="form.startDate"
:picker-options="pickerOptions"
style="width: 100%;"
@change="changeData(true)"
></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-date-picker
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
v-model="form.endDate"
:picker-options="pickerOptions"
style="width: 100%;"
@change="changeData(false)"
></el-date-picker>
</el-col>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
startDate: "", // 开始时间
endDate: "" // 结束时间
},
pickerOptions: {
disableDate: time => {
return time.getTime() > Date.now();
}
}
};
},
methods: {
changeData(flag) {
if (flag) {
if (this.form.endDate) {
if (this.form.startDate > this.form.endDate) {
this.form.startDate = null;
this.$message.error("开始时间不能大于结束时间！");
}
}
} else {
if (this.form.startDate) {
if (this.form.startDate > this.form.endDate) {
this.form.endDate = null;
this.$message.error("结束时间不能小于开始时间！");
}
}
}
}
}
};
</script>
<style lang="scss" scoped></style>
