简陋至极：微信小程序日历组件（思路）

import. 发布于2019-08-23 11:40 / 2573人阅读

摘要：最近在做微信小程序项目，其中涉及到日历。其次，弄清楚每月一号对应的是周几。当月天数已知，上月残余天数，我们可以用当月号是周几来推断出来，下月残余天数，正好用当月天数上月残余。

最近在做微信小程序项目，其中涉及到日历。一直以来，遇到日历，就是网上随便找个插件，这次心血来潮，想着自己去实现一下。这次不是封装功能强大，健硕完美的组件，只是记录一下，主体思路。更多功能还得根据项目需要，自己去挖掘、实现。（大佬轻喷）

思路分析

首先最主要的一点，就是要计算出某年某月有多少天，其中涉及到大小月，闰、平年二月。

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

然后，有时为填充完整，还需显示上月残余天数以及下月开始几天，这些又该如何展示。

最后，根据自己项目需求实现其它细枝末节。

计算每月天数

按照一般思路，[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://www.ucloud.cn/yun/97289.html

微信小程序：手写日历组件

摘要：一前言最近公司要做一个酒店入住的小程序，不可避免的一定会使用到日历，而小程序没有内置的日历组件。二代码原理分析写一个日历只需要知道两件事情一个月有多少天每个月的第一天是星期几。一、前言最近公司要做一个酒店入住的小程序，不可避免的一定会使用到日历，而小程序没有内置的日历组件。在网上看了一下也没有非常适合需求的日历，于是自己写了一个。二、代码 1. 原理分析写一个日历只需要知道两件...

genefy 2019-08-22 15:01 评论0 收藏0
如何开发一个微信小程序日历插件

摘要：最近做小程序开发，出于练手，也是工作需要，就做了个微信小程序的类似于酒店预订的日历插件。计算每月第一天是星期几日一二三四五六利用构造函数生成数据，一会用。最近做小程序开发，出于练手，也是工作需要，就做了个微信小程序的类似于酒店预订的日历插件。先上图；showImg(https://segmentfault.com/img/bV9qoI?w=374&h=640); 这个插件分为上下两部...

DandJ 2019-08-22 16:44 评论0 收藏0
如何开发一个微信小程序日历插件

摘要：最近做小程序开发，出于练手，也是工作需要，就做了个微信小程序的类似于酒店预订的日历插件。计算每月第一天是星期几日一二三四五六利用构造函数生成数据，一会用。最近做小程序开发，出于练手，也是工作需要，就做了个微信小程序的类似于酒店预订的日历插件。先上图；showImg(https://segmentfault.com/img/bV9qoI?w=374&h=640); 这个插件分为上下两部...

Brenner 2019-08-05 13:41 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
如何写一个微信小程序组件

摘要：组件三要素组件的三要素就是小程序定义的三种文件因为本身就是模块化开发，所以这天然有利于组件化。日历组件所以利用和就可以打造一款组件了。这样就完成了一个组件编写，任何需要用到的地方都可以引入了。背景先谈下背景，在做一款产品的时候需要用到日期选择器，但是官方的却不太满足需求，因为无法选择农历啊。所以自己来造一个轮子好了，造轮子之前先想想啊，万一以后多个地方要用到，多个项目要用，怎么办呢...

lijinke666 2019-08-21 12:02 评论0 收藏0