大略至极：微信小顺序日历组件（思绪）

2019年8月22日 255次阅读 来源: 冰扬

近来在做微信小顺序项目，个中涉及到日历。一直以来，碰到日历，就是网上随意找个插件，此次心血来潮，想着本身去完成一下。此次不是封装功用强大，健硕圆满的组件，只是纪录一下，主体思绪。更多功用还得依据项目须要，本身去发掘、完成。（大佬轻喷）

《大略至极：微信小顺序日历组件（思绪）》

思绪剖析

  • 起首最主要的一点，就是要盘算出某年某月有若干天，个中涉及到大小月，闰、闰年二月。

  • 其次，弄清楚每个月一号对应的是周几。

  • 然后，偶然为添补完全，还需显现上月剩余天数以及下月最先几天，这些又该怎样展现。

  • 末了，依据本身项目需求完成别的细枝末节。

盘算每个月天数

  • 根据平常思绪，[1,3,5,7,8,10,12]这几个月是31天，[2,3,6,9,11]这几个月是30天，闰年2月29天，闰年2月28天。每次须要盘算天数时，都得云云揣摸一番。计划可行，而且也是大多数人的做法。然则，这个要领，我却以为有些烦琐。

  • 实在换一种思绪，也未尝不可。时刻戳就是一个很好的载体。当前月一号零时的时刻戳，与下月一号零时的时刻戳之差，不就是当前月天数的毫秒数嘛。

    // 猎取某年某月统共若干天
    getDateLen(year, month) { 
        let actualMonth = month - 1;
        let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);
        return timeDistance / (1000 * 60 * 60 * 24);
    },

  • 看到上述代码，你可能会问，是否是还缺乏当月为12月时的特别揣摸，毕竟涉及到跨年题目。固然，你无需忧郁,依据MDN中关于Date的表述，js已为我们斟酌好了这一点

    当Date作为组织函数挪用并传入多个参数时，假如数值大于合理局限时（如月份为13或许分钟数为70），相邻的数值会被调解。比方 new Date(2013, 13, 1)即是new Date(2014, 1, 1)，它们都示意日期2014-02-01（注重月份是从0最先的）。其他数值也是相似，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()
    },

每个月的数据怎样展现

  • 假如只是简朴展现当月数据，那照样很简朴的，猎取当月天数，顺次遍历，就能够拿到当月一切数据。

    // 猎取当月数据，返回数组
    getCurrentArr(){ 
        let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 猎取当月天数
        let currentMonthDateArr = [] // 定义空数组
        if (currentMonthDateLen > 0) {
            for (let i = 1; i <= currentMonthDateLen; i++) {
                currentMonthDateArr.push({
                    month: 'current', // 只是为了增添标识，辨别上下月
                    date: i
                })
            }
        }
        this.setData({
            currentMonthDateLen
        })
        return currentMonthDateArr
    },

  • 许多时刻，为了显现完全，须要显现上下月的剩余数据。平常来说，日历展现时，最大是7 X 6 = 42位，为啥是42位，呃，本身去想一想吧。当月天数已知，上月剩余天数，我们可以用当月1号是周几来揣摸出来，下月剩余天数，正好用42 – 当月天数 -上月剩余。

    // 上月 年、月
    preMonth(year, month) { 
        if (month == 1) {
            return {
                year: --year,
                month: 12
            }
        } else {
            return {
                year: year,
                month: --month
            }
        }
    },
    // 猎取当月中，上月过剩数据，返回数组
    getPreArr(){ 
        let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 当月1号是周几 == 上月剩余天数）
        let preMonthDateArr = [] // 定义空数组
        if (preMonthDateLen > 0) {
            let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 猎取上月 年、月
            let date = this.getDateLen(year, month) // 猎取上月天数
            for (let i = 0; i < preMonthDateLen; i++) {
                preMonthDateArr.unshift({ // 尾部追加
                    month: 'pre', // 只是为了增添标识，辨别当、下月
                    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
            }
        }
    },
    // 猎取当月中，下月过剩数据，返回数组
    getNextArr() { 
        let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月过剩天数
        let nextMonthDateArr = [] // 定义空数组
        if (nextMonthDateLen > 0) {
            for (let i = 1; i <= nextMonthDateLen; i++) {
                nextMonthDateArr.push({
                    month: 'next',// 只是为了增添标识，辨别当、上月
                    date: i
                })
            }
        }
        return nextMonthDateArr
    },

  • 整合三组数据，就得到了完全的当月数据，花样以下

    [
    {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}
]

  • 至于上下月切换，挑选某年某月等功用，不过就是参数变化罢了，本身揣摩揣摩即可。

  • 骨架都有了，你想制造什么样的功用还不是易如反掌。

完全代码 GitHub

    原文作者：冰扬
    原文地址: https://segmentfault.com/a/1190000016243330
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞