<template>
<div>
<div class="block">
<h2>日期 365 天</h2>
<el-date-picker
:picker-options="pickerOptions1"
v-model="value1"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</div>
<div class="block">
<h2>月份 12 个月</h2>
<el-date-picker
:picker-options="pickerOptions2"
v-model="value2"
type="monthrange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pickerMinDate1: "",//第一次选中的时间
value1: "",
pickerOptions1: {
onPick: obj => {
this.pickerMinDate1 = new Date(obj.minDate).getTime();
},
disabledDate: time => {
if (this.pickerMinDate1) {
const day1 = 365 * 24 * 3600 * 1000;
let maxTime = this.pickerMinDate1 + day1;
let minTime = this.pickerMinDate1 - day1;
return time.getTime() > maxTime || time.getTime() < minTime;
}
}
},
pickerMinDate2: "",//第一次选中的时间
value2: "",
pickerOptions2: {
onPick: obj => {
this.pickerMinDate2 = new Date(obj.minDate).getTime();
},
disabledDate: time => {
if (this.pickerMinDate2) {
const day2 = 365 * 24 * 3600 * 1000;
let maxTime = this.pickerMinDate2 + day2;
let minTime = this.pickerMinDate2 - day2;
return time.getTime() > maxTime || time.getTime() < minTime;
}
}
},
};
},
mounted() {
},
methods: {
dateChange() {
console.log(this.value1[0], '-----', this.value1[1]);
}
},
};
</script>
<style scoped>
</style>
el-date-picker 的时间范围跨度设置
最新推荐文章于 2025-03-04 10:13:23 发布