如图,这是我的样式。
主要实现思路是:
//全部时间的月份都是按0~11基准,显示月份才+1
1.获取当前月份天数 let dayNums = new Date(year, month, 0).getDate(); //获取目标月有多少天
2.获取当前月份1号对应的星期 startWeek = new Date(year,month,1).getDay(); //目标月1号对应的星期
获取这个参数的作用是判断是否需要补充上个月份的天数。
3.获取当前月份上一个月的天数;
这里需做年份判断
let laseMoth = (month - 1) < 0 ? 11 : month - 1;//上个月份,由当月-1得出,若小于0则为上一年11月
let laseMothdayNums = new Date(laseMothYear, laseMoth, 0).getDate();
if (month - 1 < 0) {//上个月份,由当月-1得出,若小于0则为上一年11月
laseMothYear=year-1;
laseMothdayNums = new Date(laseMothYear, laseMoth, 0).getDate();//上个月份天数
}
4.获取整个日历所有天数的集合长度。
集合长度应为7的倍数。所以如果 当前月份1号对应的星期不为周日,则补上相应数目的上个月份天数,
当前月份天数+补充的上个月份天数 取余7不为0时,则补充7-余数的下个月份天数。
5.创建集合
let listlength=dayNums+startWeek;
let lastandthis=dayNums+startWeek;
let yu = listlength% 7;
if (yu!=0){
listlength= startWeek + dayNums + 7 - yu;
}
for (let i = 0; i < lastandthis; i++) {
if (i >= startWeek) {//是否属于当月天数
num = i - startWeek + 1;
obj = {
isToMonthday: '' + year + (month + 1) + num,
dateNum: num,
}
} else {// 上个月的天数
obj = {
isToday: '' + laseMothYear + (laseMoth + 1) + laseMothdayNums - startWeek + i + 1,
isToMonth:0,
dateNum: laseMothdayNums-startWeek+i+1,//上个月天数数字
};
}
dateArr[i] = obj;
}
if(yu!=0){//下个月天数 因为总是从1开始所以直接循环增加
let daynumber=1;
for (let i = lastandthis; i < listlength;i++) {
obj = {
isToday: '' + laseMothYear + (laseMoth + 1) + laseMothdayNums - startWeek + i + 1,
isToMonth: 0,//该天数是否属于当月
dateNum: daynumber,
};
dateArr[i] = obj;
daynumber++;
}
}
最后就是循环整个列表创建UI了
今天调试发现获取的日期对不上。最后发现时获取当月天数的问题
let dayNums = new Date(year, (month+1), 0).getDate(); //获取目标月有多少天
要+1获取才正确...但是获取1号对应星期却不需要....