這篇文章主要介紹微信小程序中日歷組件的實(shí)現(xiàn)示例，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

堅(jiān)守“ 做人真誠(chéng) · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專(zhuān)業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都自拌料攪拌車(chē)小微創(chuàng)業(yè)公司專(zhuān)業(yè)提供成都定制網(wǎng)頁(yè)設(shè)計(jì)營(yíng)銷(xiāo)網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺(jué)設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁(yè)布局、功能開(kāi)發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

最近在做微信小程序項(xiàng)目，其中涉及到日歷。一直以來(lái)，遇到日歷，就是網(wǎng)上隨便找個(gè)插件，這次心血來(lái)潮，想著自己去實(shí)現(xiàn)一下。這次不是封裝功能強(qiáng)大，健碩完美的組件，只是記錄一下，主體思路。更多功能還得根據(jù)項(xiàng)目需要，自己去挖掘、實(shí)現(xiàn)。（大佬輕噴）

思路分析

首先最主要的一點(diǎn)，就是要計(jì)算出某年某月有多少天，其中涉及到大小月，閏、平年二月。

其次，弄清楚每月一號(hào)對(duì)應(yīng)的是周幾。

然后，有時(shí)為填充完整，還需顯示上月殘余天數(shù)以及下月開(kāi)始幾天，這些又該如何展示。

最后，根據(jù)自己項(xiàng)目需求實(shí)現(xiàn)其它細(xì)枝末節(jié)。

計(jì)算每月天數(shù)

按照一般思路，[1,3,5,7,8,10,12]這幾個(gè)月是31天，[2,3,6,9,11]這幾個(gè)月是30天，閏年2月29天，平年2月28天。每次需要計(jì)算天數(shù)時(shí)，都得如此判斷一番。方案可行，而且也是大多數(shù)人的做法。但是，這個(gè)方法，我卻覺(jué)得有些繁瑣。

其實(shí)換一種思路，也未嘗不可。時(shí)間戳就是一個(gè)很好的載體。當(dāng)前月一號(hào)零時(shí)的時(shí)間戳，與下月一號(hào)零時(shí)的時(shí)間戳之差，不就是當(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);
    },

看到上述代碼，你可能會(huì)問(wèn)，是不是還缺少當(dāng)月為12月時(shí)的特殊判斷，畢竟涉及到跨年問(wèn)題。當(dāng)然，你無(wú)需擔(dān)心,根據(jù)MDN中關(guān)于Date的表述，js已經(jīng)為我們考慮好了這一點(diǎn)

當(dāng)Date作為構(gòu)造函數(shù)調(diào)用并傳入多個(gè)參數(shù)時(shí)，如果數(shù)值大于合理范圍時(shí)（如月份為13或者分鐘數(shù)為70），相鄰的數(shù)值會(huì)被調(diào)整。比如 new Date(2013, 13, 1)等于new Date(2014, 1, 1)，它們都表示日期2014-02-01（注意月份是從0開(kāi)始的）。其他數(shù)值也是類(lèi)似，new Date(2013, 2, 1, 0, 70)等于new Date(2013, 2, 1, 1, 10)，都表示時(shí)間2013-03-01T01:10:00。

計(jì)算每月一號(hào)是周幾

呃，這個(gè)就不需要說(shuō)了吧，getDay()你值得擁有

// 獲取某月1號(hào)是周幾
    getFirstDateWeek(year, month) { 
        return new Date(year, month - 1, 1).getDay()
    },

每個(gè)月的數(shù)據(jù)如何展示

如果只是簡(jiǎn)單展示當(dāng)月數(shù)據(jù)，那還是很簡(jiǎn)單的，獲取當(dāng)月天數(shù)，依次遍歷，就可以拿到當(dāng)月所有數(shù)據(jù)。

// 獲取當(dāng)月數(shù)據(jù)，返回?cái)?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)識(shí)，區(qū)分上下月
                    date: i
                })
            }
        }
        this.setData({
            currentMonthDateLen
        })
        return currentMonthDateArr
    },

很多時(shí)候，為了顯示完整，需要顯示上下月的殘余數(shù)據(jù)。一般來(lái)說(shuō)，日歷展示時(shí)，較大是7 X 6 = 42位，為啥是42位，呃，自己去想想吧。當(dāng)月天數(shù)已知，上月殘余天數(shù)，我們可以用當(dāng)月1號(hào)是周幾來(lái)推斷出來(lái)，下月殘余天數(shù)，正好用42 - 當(dāng)月天數(shù) -上月殘余。

// 上月 年、月
    preMonth(year, month) { 
        if (month == 1) {
            return {
                year: --year,
                month: 12
            }
        } else {
            return {
                year: year,
                month: --month
            }
        }
    },

// 獲取當(dāng)月中，上月多余數(shù)據(jù)，返回?cái)?shù)組
    getPreArr(){ 
        let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 當(dāng)月1號(hào)是周幾 == 上月殘余天數(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)識(shí)，區(qū)分當(dāng)、下月
                    date: date
                })
                date--
            }
        }
        this.setData({
            preMonthDateLen
        })
        return preMonthDateArr
    },

// 下月 年、月
    nextMonth(year, month) { 
        if (month == 12) {
            return {
                year: ++year,
                month: 1
            }
        } else {
            return {
                year: year,
                month: ++month
            }
        }
    },

// 獲取當(dāng)月中，下月多余數(shù)據(jù)，返回?cái)?shù)組
    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)識(shí)，區(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}
]

以上是“微信小程序中日歷組件的實(shí)現(xiàn)示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱(chēng)：微信小程序中日歷組件的實(shí)現(xiàn)示例-創(chuàng)新互聯(lián)
分享地址：http://chinadenli.net/article28/dgjejp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、定制開(kāi)發(fā)、品牌網(wǎng)站制作、網(wǎng)站改版、軟件開(kāi)發(fā)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)