1.封装组件
<template>
<div>
<el-date-picker
:size="sizeA"
class="w125"
type="date"
placeholder="选择开始日期"
v-model="activityInfo.start_time"
:picker-options="pickerBeginDateBefore"
value-format="yyyy-MM-dd 00:00:00"
></el-date-picker>
~
<el-date-picker
:size="sizeA"
class="w125"
type="date"
v-model="activityInfo.end_time"
:picker-options="pickerBeginDateAfter"
placeholder="选择结束日期"
value-format="yyyy-MM-dd 23:59:59"
:disabled="activityInfo.is_long"
></el-date-picker>
</div>
</template>
<script>
export default {
name: "WTimer",
props: {
activityInfo: {
type: Object,
},
sizeA: {
type: String,
default: 'mini',
},
},
data() {
return {
startDate: "",
endDate: "",
pickerBeginDateBefore: {
disabledDate: (time) => {
if (this.activityInfo.end_time) {
return (
time.getTime() > new Date(this.activityInfo.end_time).getTime()
);
} else {
return false;
}
},
},
pickerBeginDateAfter: {
disabledDate: (time) => {
if (this.activityInfo.start_time) {
return (
time.getTime() <
new Date(this.activityInfo.start_time).getTime() -
(1 * 24 * 60 * 60 - 1) * 1000
);
} else {
return false;
}
},
},
};
},
mounted() {
},
methods: {
},
};
</script>
<style lang="scss" scoped>
@import "../../style/variable.scss";
/deep/.el-input--mini {
width: $el-input-mini;
}
</style>
2.引用组件
<datePicker
:activityInfo="activityInfo"
:sizeA="sizeA"
></datePicker>
import datePicker from "@/components/DateField/date-picker";
export default {
components: {
datePicker},
data() {
return {
sizeA:'mini',
activityInfo: {
start_time: "",
end_time: "",
is_long: false,
},
},
created() {
consol.log(this.activityInfo.start_time)
consol.log(this.activityInfo.end_time)
},
}