簡陋至極：微信小程序日歷組件（思路）
最近在做微信小程序項目，其中涉及到日歷。一直以來，遇到日歷，就是網(wǎng)上隨便找個插件，這次心血來潮，想著自己去實現(xiàn)一下。這次不是封裝功能強大，健碩完美的組件，只是記錄一下，主體思路。更多功能還得根據(jù)項目需要，自己去挖掘、實現(xiàn)。（大佬輕噴）
思路分析
-
首先最主要的一點，就是要計算出某年某月有多少天，其中涉及到大小月，閏、平年二月。
-
其次，弄清楚每月一號對應(yīng)的是周幾。
-
然后，有時為填充完整，還需顯示上月殘余天數(shù)以及下月開始幾天，這些又該如何展示。
-
最后，根據(jù)自己項目需求實現(xiàn)其它細(xì)枝末節(jié)。
計算每月天數(shù)
-
按照一般思路，[1,3,5,7,8,10,12]這幾個月是31天，[2,3,6,9,11]這幾個月是30天，閏年2月29天，平年2月28天。每次需要計算天數(shù)時，都得如此判斷一番。方案可行，而且也是大多數(shù)人的做法。但是，這個方法，我卻覺得有些繁瑣。
-
其實換一種思路，也未嘗不可。時間戳就是一個很好的載體。當(dāng)前月一號零時的時間戳，與下一月一號零時的時間戳之差，不就是當(dāng)前月天數(shù)的毫秒數(shù)嘛。
// 獲取某年某月總共多少天 getDateLen(year, month) { let actualMonth = month - 1; let timeDistance = +new Date(year, month) - +new Date(year, actualMonth); return timeDistance / (1000 * 60 * 60 * 24); }, 復(fù)制代碼 -
看到上述代碼，你可能會問，是不是還缺少當(dāng)月為12月時的特殊判斷，畢竟涉及到跨年問題。當(dāng)然，你無需擔(dān)心,根據(jù)MDN中關(guān)于Date的表述，js已經(jīng)為我們考慮好了這一點
當(dāng)Date作為構(gòu)造函數(shù)調(diào)用并傳入多個參數(shù)時，如果數(shù)值大于合理范圍時（如月份為13或者分鐘數(shù)為70），相鄰的數(shù)值會被調(diào)整。比如 new Date(2013, 13, 1)等于new Date(2014, 1, 1)，它們都表示日期2014-02-01（注意月份是從0開始的）。其他數(shù)值也是類似，new Date(2013, 2, 1, 0, 70)等于new Date(2013, 2, 1, 1, 10)，都表示時間2013-03-01T01:10:00。
計算每月一號是周幾
-
呃，這個就不需要說了吧，getDay()你值得擁有
// 獲取某月1號是周幾 getFirstDateWeek(year, month) { return new Date(year, month - 1, 1).getDay() }, 復(fù)制代碼
每個月的數(shù)據(jù)如何展示
-
如果只是簡單展示當(dāng)月數(shù)據(jù)，那還是很簡單的，獲取當(dāng)月天數(shù)，依次遍歷，就可以拿到當(dāng)月所有數(shù)據(jù)。
// 獲取當(dāng)月數(shù)據(jù)，返回數(shù)組 getCurrentArr(){ let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 獲取當(dāng)月天數(shù) let currentMonthDateArr = [] // 定義空數(shù)組 if (currentMonthDateLen > 0) { for (let i = 1; i <= currentMonthDateLen; i++) { currentMonthDateArr.push({ month: 'current', // 只是為了增加標(biāo)識，區(qū)分上下月 date: i }) } } this.setData({ currentMonthDateLen }) return currentMonthDateArr }, 復(fù)制代碼 很多時候，為了顯示完整，需要顯示上下月的殘余數(shù)據(jù)。一般來說，日歷展示時，最大是7 X 6 = 42位，為啥是42位，呃，自己去想想吧。當(dāng)月天數(shù)已知，上月殘余天數(shù)，我們可以用當(dāng)月1號是周幾來推斷出來，下月殘余天數(shù)，正好用42 - 當(dāng)月天數(shù) -上月殘余。 // 上月 年、月 preMonth(year, month) { if (month == 1) { return { year: --year, month: 12 } } else { return { year: year, month: --month } } }, -
復(fù)制代碼
// 獲取當(dāng)月中，上月多余數(shù)據(jù)，返回數(shù)組 getPreArr(){ let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 當(dāng)月1號是周幾 == 上月殘余天數(shù)） let preMonthDateArr = [] // 定義空數(shù)組 if (preMonthDateLen > 0) { let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 獲取上月 年、月 let date = this.getDateLen(year, month) // 獲取上月天數(shù) for (let i = 0; i < preMonthDateLen; i++) { preMonthDateArr.unshift({ // 尾部追加 month: 'pre', // 只是為了增加標(biāo)識，區(qū)分當(dāng)、下月 date: date }) date-- } } this.setData({ preMonthDateLen }) return preMonthDateArr }, 復(fù)制代碼// 下月 年、月 nextMonth(year, month) { if (month == 12) { return { year: ++year, month: 1 } } else { return { year: year, month: ++month } } }, 復(fù)制代碼// 獲取當(dāng)月中，下月多余數(shù)據(jù)，返回數(shù)組 復(fù)制代碼 getNextArr() { let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天數(shù) let nextMonthDateArr = [] // 定義空數(shù)組 if (nextMonthDateLen > 0) { for (let i = 1; i <= nextMonthDateLen; i++) { nextMonthDateArr.push({ month: 'next',// 只是為了增加標(biāo)識，區(qū)分當(dāng)、上月 date: i }) } } return nextMonthDateArr }, -
整合三組數(shù)據(jù)，就得到了完整的當(dāng)月數(shù)據(jù)，格式如下
[ {month: "pre", date: 30}, {month: "pre", date: 31}, {month: "current", date: 1}, {month: "current", date: 2}, ... {month: "current", date: 31}, {month: "next", date: 1}, {month: "next", date: 2} ] 復(fù)制代碼
