小程序-我的自定义日历

如图,这是我的样式。

主要实现思路是:

//全部时间的月份都是按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号对应星期却不需要.... 

猜你喜欢

转载自blog.csdn.net/zcz475421852/article/details/82494457
今日推荐