设计思路
- 日期选择器,单个View 一共有42个元素 当月的日期 以及 前后月份的部分日期
- 月份选择器 这个简单 一年一共12个月
- 年份选择器 这个需要根据当前年份 前后生成一系列的年份
日期选择器大致实现思路
当我们需要选择日期的时候，也就是日期选择器出现的时候，我们需要展示当前时间（年月日）的月历视图，所以我们可以根据当前时间来对日历初始化数据来入手。
固定的部分
1. 一周有7天
2. 一年有12个月
3. 1,3,5,7,8,10,12 每月31天，2月 28或29(闰年) 其余的30天
变化部分
1. 当前日历卡中的数据
2. 当前时间 年份 可选择范围
综上我们可以先设计固定部分的实现
固定部分实现
var weeks = ["日", "一", "二", "三", "四", "五", "六",];
var dayCountOfMonth = [31, 28 + util.isLeapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var monthCount = 12;
变化部分实现*
当前日历卡数据实现，这里实现比较简单 按照 6行 7列来设计，这样既能保证当前月份 Day的数量能够完全显示出来，也方便我们去渲染数据，不用费力去用空格来控制。首先我们取出每月的第一天对应的星期然后记录下来
，根据每月第一天的对应的星期，来填充当前月日历卡的数据 例如：当前月第一天对应的日期是星期二 ， 那么就需要在当前日历卡数据中 填充 1个上个月最后一天的数据 + 当前月的总数据 + 下个月 (42 – 现有数据)
initMontData: function (dayCountOfMounth, weeksOfTheFirstDayOfEachMonth) {
var currentYearMonthData = [];
const cdate = this.data.calenderData.date;
const lastYearDate = new Date();
lastYearDate.setFullYear(this.data.calenderData.year - 1);
var lastYearData = this.initData(lastYearDate);
var nextYearDate = new Date();
nextYearDate.setFullYear(this.data.calenderData.year + 1);
var nextYearData = this.initData(nextYearDate);
for (var i = 0; i < 12; i++) {
var currentMonthDayCount = dayCountOfMounth[i];
var firstDayWeek = weeksOfTheFirstDayOfEachMonth[i];
var startIndex = firstDayWeek;
var endIndex = firstDayWeek + dayCountOfMounth[i] - 1;
var startArray = [];
var endArray = [];
var ddd = new Date();
var cdaycount = dayCountOfMounth[i - 1];
if (i === 0) {
ddd.setFullYear(this.data.calenderData.year - 1);;
ddd.setMonth(11);
cdaycount = lastYearData.dayCountOfMonth[11];
} else {
ddd.setMonth(i - 1);
cdaycount = dayCountOfMounth[i - 1];
}
for (var x = startIndex; x > 0; x--) {
var temd = new Date();
temd.setFullYear(ddd.getFullYear());
temd.setMonth(ddd.getMonth());
temd.setDate(cdaycount - x + 1)
var str = util.simpleFormatTime(temd);
var itemh = {
date: temd,
day: temd.getDate(),
gray: true,
str: str
};
startArray.push(itemh);
}
for (var x = 0; x < (42 - endIndex) - 1; x++) {
var temd = new Date();
if (i === 11) {
temd.setFullYear(this.data.calenderData.year + 1);
temd.setMonth(0);
} else {
temd.setFullYear(this.data.calenderData.year);
temd.setMonth(i + 1);
}
temd.setDate(x + 1);
var str = util.simpleFormatTime(temd);
var itemh = {
date: temd,
day: temd.getDate(),
gray: true,
str: str
};
endArray.push(itemh);
}
var earchMontData = [];
for (var j = 0; j < startArray.length; j++) {
earchMontData.push(startArray[j]);
}
for (var j = 0; j < currentMonthDayCount; j++) {
let temd = new Date();
temd.setFullYear(this.data.calenderData.year);
temd.setMonth(i);
temd.setDate(j + 1);
var str = util.simpleFormatTime(temd);
var itemh = {
date: temd,
day: temd.getDate(),
gray: false,
str: str
};
earchMontData.push(itemh);
}
for (var j = 0; j < endArray.length; j++) {
earchMontData.push(endArray[j]);
}
currentYearMonthData.push(earchMontData);
}
return currentYearMonthData;
}