项目场景：
提示：由于项目涉及数据过多，可能造成查询、删除、更新等功能降低效率，为避免这种现象的出现，提前建了两个相同的数据库表，分别是 近6个月 和 6个月前 的数据。
界面默认为“近6个月”的数据，前端需将“近6个月”对应的识别符，从一开始传递给后端。
情况一：
在默认状态下，即扫描时间为“近6个月”时：假定当前日期是2020-12-23，用户可以选择的日期范围是2020-06-24到2020-12-23，其他日期范围不可选。
<!-- 近6个月 -->
<el-date-picker
v-if="queryParams.timeStatus===1" //当前为近6个月的数据
v-model="dateRange" //开始日期和结束日期绑定值，在全局封装过后的
type="daterange"
value-format="yyyy-MM-dd HH:mm:ss" //传给后端的日期形式
format="yyyy-MM-dd" //前端界面显示的日期形式
:default-time="['00:00:00', '23:59:59']"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
style="width: 240px"
:default-value="DefaultShow" //选择器打开时默认显示的时间，后面详细介绍
:picker-options="pickerOptions" //当前时间日期选择器
></el-date-picker>JS代码
export default{
data() {
return {
dateRange: [],
DefaultShow:'',
minDate: "",
maxDate: "",
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.minDate = minDate;//选中的时间较小的一个
this.maxDate = maxDate;//选中的时间较大的一个
},
disabledDate: (time) => {// 设置禁用状态，参数为当前日期，要求返回 Boolean 返回为true禁用
// 当前时间的时间戳
let curDate = new Date().getTime();
// 获取动态天数sum
let curYear = new Date().getFullYear();
let curMonth = new Date().getMonth()+1;
let sum=0
for(let i=0;i<6;i++){
// 获取某年某月的天数
function mGetDate(year, month){
var d = new Date(year, month, 0);
return d.getDate();
}
var day = mGetDate(`${curYear}`,`${curMonth}`);
curMonth--;
if (curMonth < 1){
curYear--;
curMonth = 12 - curMonth;
}
sum = sum + day
}
// 能查看6月前的时间 单位是月 （当前是近6个月）
let cutTime = `${sum-1}`* 24 * 3600 * 1000;
// let cutTime = 180* 24 * 3600 * 1000;
// 最小时间的时间戳
let minTime = curDate - cutTime;
// 时间跨度 当前是6个月
let month = `${sum-1}` * 24 * 3600 * 1000;
// 当前的23点59分59秒
let nowLast = new Date(new Date(new Date().getTime()).setHours(23,59,59,999)).getTime();
if (this.minDate) {
// 判断
// 1.遍历时间大于今天（23:59:59）会返回true
// 2.遍历时间小于最小时间会返回true
// 3.遍历时间大于 选中的时间较小的一个 加上 时间跨度 会返回true
// 4.遍历时间小于 选中的时间较小的一个 减去 时间跨度 会返回true
return (
time.getTime() > nowLast ||
time.getTime() < minTime ||
time > new Date(this.minDate.getTime() + month) ||
time < new Date(this.minDate.getTime() - month)
);
}
return time.getTime() > Date.now() || time.getTime() < minTime;
},
},
}
}
}
情况二：
在扫描时间为“6个月前”时：假定当前日期是2020-12-23，用户可以选择2020-06-23之前并且包含2020-06-23的任何一段日期范围，2020-06-23之后的日期不可选。
<!-- 6个月前 -->
<el-date-picker
v-else
v-model="dateRange"
type="daterange"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd"
:default-time="['00:00:00', '23:59:59']"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
style="width: 240px"
:default-value="timeDefaultShow"
:picker-options="timepickerOptions"
></el-date-picker>JS代码
data() {
return{
dateRange: [],
timeDefaultShow:"",
timepickerOptions:{
disabledDate: (time) => {// 设置禁用状态，参数为当前日期，要求返回 Boolean 返回为true禁用
// 获取动态天数sum
let curYear = new Date().getFullYear();
let curMonth = new Date().getMonth()+1;
let sum=0
for(let i=0;i<6;i++){
// 获取某年某月的天数
function mGetDate(year, month){
var d = new Date(year, month, 0);
return d.getDate();
}
var day = mGetDate(`${curYear}`,`${curMonth}`);
curMonth--;
if (curMonth < 1){
curYear--;
curMonth = 12 - curMonth;
}
sum = sum + day
}
return time.getTime()> Date.now() -`${sum-1}`* 24 * 3600 * 1000;
},
}
}
}
附加说明：
目前官方的日期默认是当前日期，打开之后长这样子：现在是2020-12-23，但是有的需求是当前日期在后面。
为了更好的选择可选日期范围，改成就像这样的：
【注】default-value是设置当前日期默认值的，其绑定的值"DefaultShow"是在data里面的值，而不是方法。
代码如下：
//在created或mounted（也就是页面第一次加载时）更新DefaultShow
created() {
// 近6个月：上个月的当前日期为默认值
this.DefaultShow = new Date();
this.DefaultShow.setMonth(new Date().getMonth() - 1);
// 6个月前的默认值
this.timeDefaultShow = new Date();
this.timeDefaultShow.setMonth(new Date().getMonth() - 7);
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
