写文章
登陆 / 注册
文章 14
专题 1
miku
美食二次元
微服务架构设计 嵌入式开发
关注

自己动手,使用vuejs实现日历功能

2019-10-16 15:01
261
2

效果

image

思路

以window10系统的日历为例,我们可以看出,一个月份的日历组成总共为7列6行,日期有三个部分组成,1为上月由于该月第一天的周几产生的空白部分,2为本月的所有天数,3,为6x7-(上月空白部分 + 本月天数)

image

开始写代码

  • 计算本月天数
            getDates (d, t = 0) {
                var curDate = new Date(d.replace(/-/g, '/'))
                var curMonth = curDate.getMonth()
                curDate.setMonth(curMonth + t + 1)
                curDate.setDate(0)
                var curDates = new Array(curDate.getDate()).fill(0).map((item, key) => {
                    return key + 1
                })
                return curDates
            }

getDates(d)中的参数d为该月的任意一天,方法放回该月有效的所有天数

  • 计算该月第一天是星期几
            getWeek (d) {
                var curDate = new Date(d.replace(/-/g, '/'))
                curDate.setDate(1)
                return curDate.getDay()
            }
  • 计算该月+前后留白天数
            getFullChunkDates (d) {
                var curDates = this.getDates(d)
                var preDates = this.getDates(d, -1)
                var nexDates = this.getDates(d, 1)
                var curWeek = this.getWeek(d)
                curDates = curDates.map((i, k) => {
                        return {
                            num: i,
                            fullDate: /(^\d{4})-(\d{1,2})-/.exec(d)[0] + i,
                            show: 1
                        }
                })
                preDates = preDates.map(i => {
                    return {
                        num: i,
                        show: 0
                    }
                })
                nexDates = nexDates.map(i => {
                    return {
                        num: i,
                        show: 0
                    }
                })
                var preCurDates = preDates.slice(preDates.length - (curWeek === 0 ? 6 : curWeek - 1), preDates.length).concat(curDates)
                return preCurDates.concat(nexDates.slice(0, 42 - preCurDates.length))
            }
  • 获取天数用于图层渲染(计算2019-10-16所在月份的日历)
#js--------------------
data () {
    return {
        days: []
    }
}
created () {
    this.days = this.getFullChunkDates('2019-10-16')
}
#html--------------------
                    <view class="c-day">
                        <view class="d-item"
                              :key="key" v-for="(item, key) in days">
                            <text>{{item.num}}</text>
                        </view>
                    </view>

为了保证渲染不出现胡乱,必须保证.c-day节点下的.d-item为7x6的分布状态

相关推荐
查看更多文章
热门服务

ECS云服务器4折起

实名认证 后新老用户首次购买ECS,均可享受1-3年价格优惠,每人限购1单,限量3台

【HI拼购2折起】拼着买更便宜

新老用户均可开团,爆款产品低至2折,每人限购1台,手慢无!

对这个开源博客感兴趣?那就加入我们吧!

丰富的知识面,企业级的开发规范,拥抱开源,不仅给自己的技能加速,还给自己的职场添砖加瓦!

查看更多