工作中要求实现一个类似日历的功能,引入 极点日历 发现好像不是我想要的功能,正好时间充足就自己写了一个微信小程序组件,方便以后使用

功能描述:实现日期切换,月视图和周视图切换

效果图大概就是这样了

布局用的flex,实现起来很快,然后就是日期和星期的对应显示

根据用户选择的日期确定当月有多少天,将所有的天放在一个数组中,然后将所有的天通过一个月中的每个人星期天切割组成一个二维数组

那么怎么拿到每个月的天数呢?网上查到一个简单的方式

new Date(year, month, 0).getDate()

通过给的年月,直接拿当月的最后一号,这样就可以确定当月有多少天

拿到的多后一天进行for循环,拿到这个月的所有天数据,通过getDay() 方法拿到这个月中的所有星期天的日子,number-1后就是对应的索引,有索引之后就可以去切割数组了

这里切割数组有个小技巧,push()方法我们拿到的数据是[1,2,3,4,....,30],所有的星期天数据是[3,10,17,24,31],这样在切割周数据的时候会很棘手,但是用unshift()方法拿到的数据是[31,24,,10,3],遍历[31,24,10,3],用splice方法去依次从第30,24,10,3位切割七位数据,基本就可以拿到每个月的每一周的二维数组了,然后检查首位周的数据,进行空位补足,完整方法↓

getMonthData(year, month) {
      let that = this;
      let dayData = [];
      let weekData = [];
      let sundayDays = [];
      let dateObj = null;
      //拿到当月有多少天
      let lastDay = new Date(year, month, 0).getDate();
      console.log(year + '年' + month + '月有' + lastDay + '天');
      //找到每个月的星期天,切割数组
      for (let i = 1; i <= lastDay; i++) {
        dayData.push(i);
        dateObj = new Date(`${year}/${month}/${i}`);
        if (dateObj.getDay() == 0) {
          sundayDays.unshift(i);
        }
      }
      for (let i = 0; i < sundayDays.length; i++) {
        weekData.unshift(dayData.splice(sundayDays[i] - 1, 7))
      }
      if (dayData.length !== 0) {
        weekData.unshift(dayData);
      }

      //检查首周是否有七天
      if (weekData[0].length < 7) {
        let i = 0;
        let firstWeek = weekData[0].reverse();
        let item = null;
        let newWeekData = [];
        for (i = 0; i < 7; i++) {
          item = firstWeek[i] || -1;
          newWeekData.unshift(item)
        }
        weekData[0] = newWeekData;
      }
      //检查最后一周是否有七天
      if (weekData[weekData.length - 1].length < 7) {
        let i = 0;
        let lastWeek = weekData[weekData.length - 1]
        let item = null;
        let newWeekData = [];
        for (i = 0; i < 7; i++) {
          item = lastWeek[i] || -1;
          newWeekData.push(item)
        }
        weekData[weekData.length - 1] = newWeekData;
      }
      //拿到当前日期的本周数据
      let nowWeekData = weekData.filter((weekItem) => {
        if (weekItem.indexOf(new Date().getDate()) !== -1) {
          return weekItem
        }
      })
      that.setData({
        weekData,
        nowWeekData: nowWeekData[0]
      })
    },

我觉得比较有价值的东西就在这个方法里面了,自己写的时候还是感觉代码写的有些low,感觉日历应该是有更好的方法去实现,有简单方便的实现方式希望大家也能一起分享

代码上传至码云仓库:https://gitee.com/wzr0363/calendarComponent.git