# 微信小程序日歷組件開(kāi)發(fā)
微信小程序基礎(chǔ)知識(shí)
上述是開(kāi)發(fā)小程序的基本知識(shí)。
今天需要說(shuō)的是根據(jù)小程序提供的基本組件來(lái)開(kāi)發(fā)一個(gè)日歷選擇器組件改衩，主要參考Ant Design的日期選擇器鬼佣。如圖
設(shè)計(jì)思路
日期選擇器,單個(gè)View 一共有42個(gè)元素 當(dāng)月的日期 以及 前后月份的部分日期
月份選擇器 這個(gè)簡(jiǎn)單 一年一共12個(gè)月
年份選擇器 這個(gè)需要根據(jù)當(dāng)前年份 前后生成一系列的年份
日期選擇器大致實(shí)現(xiàn)思路
當(dāng)我們需要選擇日期的時(shí)候壁涎，也就是日期選擇器出現(xiàn)的時(shí)候休弃，我們需要展示當(dāng)前時(shí)間（年月日）的月歷視圖介牙，所以我們可以根據(jù)當(dāng)前時(shí)間來(lái)對(duì)日歷初始化數(shù)據(jù)來(lái)入手。
固定的部分
1. 一周有7天
2. 一年有12個(gè)月
3. 1,3,5,7,8,10,12 每月31天奋岁，2月 28或29(閏年) 其余的30天
變化部分
1. 當(dāng)前日歷卡中的數(shù)據(jù)
2. 當(dāng)前時(shí)間 年份 可選擇范圍
綜上我們可以先設(shè)計(jì)固定部分的實(shí)現(xiàn)
固定部分實(shí)現(xiàn)
//星期數(shù)組
var weeks = ["日", "一", "二", "三", "四", "五", "六",];
//當(dāng)前年份中每個(gè)月的天數(shù)
var dayCountOfMonth = [31, 28 + util.isLeapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//一年中月份組數(shù)
var monthCount = 12;
變化部分實(shí)現(xiàn)*
當(dāng)前日歷卡數(shù)據(jù)實(shí)現(xiàn)思瘟，這里實(shí)現(xiàn)比較簡(jiǎn)單 按照 6行 7列來(lái)設(shè)計(jì)，這樣既能保證當(dāng)前月份 Day的數(shù)量能夠完全顯示出來(lái)闻伶，也方便我們?nèi)ヤ秩緮?shù)據(jù)滨攻，不用費(fèi)力去用空格來(lái)控制。首先我們?nèi)〕雒吭碌牡谝惶鞂?duì)應(yīng)的星期然后記錄下來(lái)
蓝翰，根據(jù)每月第一天的對(duì)應(yīng)的星期光绕，來(lái)填充當(dāng)前月日歷卡的數(shù)據(jù) 例如：當(dāng)前月第一天對(duì)應(yīng)的日期是星期二 ， 那么就需要在當(dāng)前日歷卡數(shù)據(jù)中 填充 1個(gè)上個(gè)月最后一天的數(shù)據(jù) + 當(dāng)前月的總數(shù)據(jù) + 下個(gè)月 (42 - 現(xiàn)有數(shù)據(jù))
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;
}
最終效果圖
總結(jié)
實(shí)現(xiàn)并不困難畜份，難在合理的去分析當(dāng)前的需求诞帐，代碼是幫朋友寫(xiě)的一個(gè)Demo，還沒(méi)優(yōu)化爆雹，純粹為了實(shí)現(xiàn)停蕉。
