浅析日历控件的实现

浅析日历控件的实现

日历控件是在开发中常用的控件之一，在没有定制需求的情况下，使用第三方足以解决问题，那么就不需要自己开发；目前一个项目需要个性化定制，因此就梳理下开发一个日历控件的核心部分；

日历数据的生成

日历数据包含3部分，上个月的数据、本月的数据以及下个月的数据，主要运用Date的API进行计算；

几个关键点

• 定义数据结构存储日历数据：var list = []
• 怎么样获取上个月的数据？
  

通过new Date()可以获取当前日期，那么通过下面代码可以获取上月数据：

var date = new Date(), 
    y = date.getFullYear(), //获取当前年份，如：2018
    m = date.getMonth(); //获取当前月份，0-11之间的数
var lastDayOfPreMonth = new Date(y, m, 0); //获取上月的最后一天
var date = lastDayOfPreMonth.getDate(); //获取上月的最后一天是几号
var day = lastDayOfPreMonth.getDay(); //获取上月的最后一天是星期几 （0-6）
for(var i = day;i >=0;i--){
    list.unshift(date --)
}

通过上述代码就可以获取上个月的数据。

• 怎么样获取本月数据？
  

获取本月数据是最简单的，只要知道本月的最后一天即可var lastDay = new Date(y, m + 1, 0);然后通过以下代码填充数据：

for(var i = 1;i <=lastDay.getDate();i++){
  list.push(i);
}

通过上述代码就可以获取本月的数据。

• 怎么样获取下个月数据？
  

获取下个月的数据首先需要计算上个月和本月总共多少天，然后对7进行取余计算，具体如下：

var leftDays = totalDays % 7 === 0 ? 0 : 7 - totalDays % 7;  //leftDays 为日历控件中剩余的位置

日历数据填充

for(var i = 1; i <= leftDays; i ++){
  list.push(i);
}

经过以上三个步骤，list中就是存储了一页完成的数据，通过遍历显示即可。

当滑动到上/下个月的时候，重新进行计算，赋值；