1. The day before and after
<div class="time-box">
<button
class="time-item"
@click="beforeDay(true)"
:style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
:disabled="disnone ? true : false"
>
前一天
</button>
<a-range-picker
:allowClear="false"
v-model="timeForm"
class="range-item"
style="width: 98%"
format="YYYY-MM-DD"
:ranges="{
当天: [moment(), moment()],
}"
:placeholder="['开始时间', '结束时间']"
:disabledDate="disabledDate"
show-time
@ok="confirm"
>
</a-range-picker>
<button
:disabled="disnone ? true : false"
class="time-item"
:style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
@click="beforeDay(false)"
>
后一天
</button>
</div>
js:
data() {
// 初始化时间
this.starTime = moment().format("YYYY-MM-DD");
this.endTime = moment().format("YYYY-MM-DD");
return {
timeForm: [
moment(this.starTime, "YYYY-MM-DD"),
moment(this.endTime, "YYYY-MM-DD"),
],
};
},
methods: {
beforeDay(iBoole) {
this.disnone = false;
if (this.timeForm.length == 0) {
return;
}
let res = {};
// 不是当前时间,选择加一,是不行的
// 计算与现在时间差,在此情况下减一
res = compareTime(
new Date(this.timeForm[0]).getTime(),
new Date().getTime()
);
// 两个时间的差
let response = compareTime(
new Date(this.timeForm[1]).getTime(),
new Date(this.timeForm[0]).getTime()
);
// 计算与现在时间差,在此情况下减一
let day = res.Days;
let secondDay = response.Days;
if (iBoole) {
day += 1;
secondDay = day + secondDay;
this.$nextTick(() => {
this.timeForm = [
moment(moment().add(-day, "day"), "YYYY-MM-DD"),
moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
];
this.getTablePage();
});
} else {
day -= 1;
secondDay = day + secondDay;
if (day == -1 || secondDay == -1) {
this.$message.error("不可选未来时间");
return false;
}
this.$nextTick(() => {
this.timeForm = [
moment(moment().add(-day, "day"), "YYYY-MM-DD"),
moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
];
// 需转成moment格式,不然会报错
this.getTablePage();
});
}
},
}
2. One week before and after
<div class="time-box">
<button
class="time-item"
:style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
:disabled="disnone ? true : false"
@click="beforeDay(true)"
>
前一周
</button>
<a-range-picker
:allowClear="false"
v-model="timeForm"
class="range-item"
style="width: 98%"
format="YYYY-MM-DD"
:ranges="{
当天: [moment(), moment()],
}"
show-time
:placeholder="['开始时间', '结束时间']"
@ok="confirm"
:disabledDate="disabledDate"
>
</a-range-picker>
moment().startOf('isoWeek'), moment().format("YYYY-MM-DD")
<button
class="time-item"
:style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
@click="beforeDay(false)"
>
后一周
</button>
</div>
js:
data() {
// 初始化时间
this.starTime = moment().startOf("isoWeek").format("YYYY-MM-DD");
this.endTime = moment().format("YYYY-MM-DD");
return {
timeForm: [
moment(this.starTime, "YYYY-MM-DD"),
moment(this.endTime, "YYYY-MM-DD"),
],
};
},
methods: {
beforeDay(iBoole) {
if (this.timeForm.length == 0) {
return;
}
let res = null;
let response = null;
let secondDay = undefined;
let day = undefined;
// 不是当前时间,选择加一,是不行的
// 计算与现在时间差,在此情况下减一
res = compareTime(
new Date(this.timeForm[0]).getTime(),
new Date().getTime()
);
// 两个时间的差
response = compareTime(
new Date(this.timeForm[1]).getTime(),
new Date(this.timeForm[0]).getTime()
);
// 计算与现在时间差,在此情况下减一
day = res.Days;
secondDay = response.Days;
if (iBoole) {
day += 7;
secondDay = day + secondDay;
this.$nextTick(() => {
this.timeForm = [
moment(moment().add(-day, "day"), "YYYY-MM-DD"),
moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
];
this.getTablePage(this.timeForm[0], this.timeForm[1]);
});
} else {
day -= 7;
secondDay = day + secondDay;
if (day == -5 || secondDay == -7) {
this.$message.error("不可选择未来数据");
return false;
}
this.$nextTick(() => {
this.timeForm = [
moment(moment().add(-day, "day"), "YYYY-MM-DD"),
moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
];
this.getTablePage(this.timeForm[0], this.timeForm[1]);
});
}
},
}
3. One month before and after
<div class="time-box">
<button
class="time-item"
@click="beforeDay(true)"
:style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
:disabled="disnone ? true : false"
>
前一月
</button>
<a-range-picker
:allowClear="false"
v-model="timeForm"
class="range-item"
style="width: 98%"
format="YYYY-MM-DD"
:ranges="{
当天: [moment(), moment()],
}"
show-time
:placeholder="['开始时间', '结束时间']"
@ok="confirm"
:disabledDate="disabledDate"
>
</a-range-picker>
<button
class="time-item"
:disabled="disnone ? true : false"
:style="disnone ? ' cursor: no-drop;' : ' cursor: pointer;'"
@click="beforeDay(false)"
>
后一月
</button>
</div>
js:
data() {
// 初始化时间
this.starTime = moment().startOf("month").format("YYYY-MM-DD");
this.endTime = moment().format("YYYY-MM-DD");
return {
timeForm: [
moment(this.starTime, "YYYY-MM-DD"),
moment(this.endTime, "YYYY-MM-DD"),
],
};
},
methods: {
beforeDay(iBoole) {
if (this.timeForm.length == 0) {
return;
}
let res = null;
let response = null;
let secondDay = undefined;
let day = undefined;
// 不是当前时间,选择加一,是不行的
// 计算与现在时间差,在此情况下减一
res = compareTime(
new Date(this.timeForm[0]).getTime(),
new Date().getTime()
);
// 两个时间的差
response = compareTime(
new Date(this.timeForm[1]).getTime(),
new Date(this.timeForm[0]).getTime()
);
// 计算与现在时间差,在此情况下减一
secondDay = response.Days;
day = res.Days;
secondDay = day + secondDay;
let timeArr = moment(this.timeForm[0]).format("YYYY-MM-DD").split("-");
console.log(
(timeArr[0] % 4 == 0 && timeArr[0] % 100 != 0) || timeArr[0] % 400 == 0
);
if (iBoole) {
// 上月
if (
//判断是闰年吗?闰年2月29天
(timeArr[0] % 4 == 0 && timeArr[0] % 100 != 0) ||
timeArr[0] % 400 == 0
) {
if (
timeArr[1] == 5 ||
timeArr[1] == 7 ||
timeArr[1] == 10 ||
timeArr[1] == 12
) {
// 如果是31天就减30天
day += 30;
secondDay += 30;
} else if (timeArr[1] == 3) {
// 三月减29天
day += 29;
secondDay += 29;
} else {
// 其余都是31天
day += 31;
secondDay += 31;
}
} else {
// 平年不可以被整除 2月28天
if (
timeArr[1] == 5 ||
timeArr[1] == 7 ||
timeArr[1] == 10 ||
timeArr[1] == 12
) {
day += 30;
secondDay += 30;
} else if (timeArr[1] == 3) {
day += 28;
secondDay += 28;
} else {
day += 31;
secondDay += 31;
}
}
this.$nextTick(() => {
this.timeForm = [
moment(moment().add(-day, "day"), "YYYY-MM-DD"),
moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
];
this.getTablePage();
});
} else {
// 下月
let years = new Date().getFullYear();
let now = new Date().getMonth() + 1;
let timeNow = moment(this.timeForm[1]).format("YYYY-MM-DD").split("-");
if (years == timeNow[0] && (now == timeNow[1] || now == timeArr[1])) {
this.$message.error("不可选未来时间");
return false;
}
if (
(timeArr[0] % 4 == 0 && timeArr[0] % 100 != 0) ||
timeArr[0] % 400 == 0
) {
if (
timeArr[1] == 1 ||
timeArr[1] == 3 ||
timeArr[1] == 5 ||
timeArr[1] == 7 ||
timeArr[1] == 8 ||
timeArr[1] == 10 ||
timeArr[1] == 12
) {
day -= 31;
secondDay -= 31;
} else if (timeArr[1] == 3) {
day -= 29;
secondDay -= 29;
} else {
day -= 30;
secondDay -= 30;
}
} else {
if (
timeArr[1] == 1 ||
timeArr[1] == 3 ||
timeArr[1] == 5 ||
timeArr[1] == 7 ||
timeArr[1] == 8 ||
timeArr[1] == 10 ||
timeArr[1] == 12
) {
day -= 31;
secondDay -= 31;
} else if (timeArr[1] == 2) {
day -= 28;
secondDay -= 28;
} else {
day -= 30;
secondDay -= 30;
}
}
this.$nextTick(() => {
this.timeForm = [
moment(moment().add(-day, "day"), "YYYY-MM-DD"),
moment(moment().add(-secondDay, "day"), "YYYY-MM-DD"),
];
this.getTablePage(this.timeForm[0], this.timeForm[1]);
});
}
},
}
Happy learning, get twice the result with half the effort