简陋至极：微信小程序日历组件（思路）

最近在做微信小程序项目，其中涉及到日历。一直以来，遇到日历，就是网上随便找个插件，这次心血来潮，想着自己去实现一下。这次不是封装功能强大，健硕完美的组件，只是记录一下，主体思路。更多功能还得根据项目需要，自己去挖掘、实现。（大佬轻喷）

思路分析

• 首先最主要的一点，就是要计算出某年某月有多少天，其中涉及到大小月，闰、平年二月。

• 其次，弄清楚每月一号对应的是周几。

• 然后，有时为填充完整，还需显示上月残余天数以及下月开始几天，这些又该如何展示。

• 最后，根据自己项目需求实现其它细枝末节。

计算每月天数

• 按照一般思路，[1,3,5,7,8,10,12]这几个月是31天，[2,6,9,11]这几个月是30天，闰年2月29天，平年2月28天。每次需要计算天数时，都得如此判断一番。方案可行，而且也是大多数人的做法。但是，这个方法，我却觉得有些繁琐。

• 其实换一种思路，也未尝不可。时间戳就是一个很好的载体。当前月一号零时的时间戳，与下一月一号零时的时间戳之差，不就是当前月天数的毫秒数嘛。

  // 获取某年某月总共多少天
  getDateLen(year,month) { 
      let actualMonth = month - 1;
      let timeDistance = +new Date(year,month) - +return timeDistance / (1000 * 60 * 24);
  },复制代码

• 看到上述代码，你可能会问，是不是还缺少当月为12月时的特殊判断，毕竟涉及到跨年问题。当然，你无需担心,根据MDN中关于Date的表述，js已经为我们考虑好了这一点

  当Date作为构造函数调用并传入多个参数时，如果数值大于合理范围时（如月份为13或者分钟数为70），相邻的数值会被调整。比如 new Date(2013,13,1)等于new Date(2014,1,1)，它们都表示日期2014-02-01（注意月份是从0开始的）。其他数值也是类似，new Date(2013,2,70)等于new Date(2013,10)，都表示时间2013-03-01T01:10:00。

计算每月一号是周几

• 呃，这个就不需要说了吧，getDay()你值得拥有

  每个月的数据如何展示
  
  
  如果只是简单展示当月数据，那还是很简单的，获取当月天数，依次遍历，就可以拿到当月所有数据。
  ,// 只是为了增加标识，区分上下月
                  date: i
              })
          }
      }
      this.setData({
      	currentMonthDateLen
      })
      return currentMonthDateArr
  },复制代码
  
  
  很多时候，为了显示完整，需要显示上下月的残余数据。一般来说，日历展示时，最大是7 X 6 = 42位，为啥是42位，呃，自己去想想吧。当月天数已知，上月残余天数，我们可以用当月1号是周几来推断出来，下月残余天数，正好用42 - 当月天数 -上月残余。
  // 获取当月中，上月多余数据，返回数组
  getPreArr(){ 
      let preMonthDateLen = this.getFirstDateWeek(// 当月1号是周几 == 上月残余天数）
          let preMonthDateArr = [] if (preMonthDateLen > 0) {
  	let { year,month } = this.preMonth(// 获取上月 年、月
  	let date = this.getDateLen(year,month) // 获取上月天数
  	0; i < preMonthDateLen; i++) {
  		preMonthDateArr.unshift({ // 尾部追加
                          month: 'pre',136);">// 只是为了增加标识，区分当、下月
  		    date: date
                  })
  		date--
  	}
      }
      this.setData({
  	preMonthDateLen
      })
      return preMonthDateArr
  },复制代码
  ,136);">// 只是为了增加标识，区分当、上月
                  date: i
              })
          }
      }
      return nextMonthDateArr
  },复制代码
  
  
  整合三组数据，就得到了完整的当月数据，格式如下
  [
      {month: "pre",date: 30},{31},0);">"current",0);">1},0);">2},...
      {"next",0);">2}
  ]
  复制代码
  
  至于上下月切换，选择某年某月等功能，无非就是参数变化而已，自己琢磨琢磨即可。
  骨架都有了，你想创造什么样的功能还不是手到擒来。
                          
  （编辑：李大同）
  【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!