手把手教你vuejs实现日历功能(日历天数代码不到计算)

文章目录 [+]

win10日历

开始写代码计算本月天数

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的分布状态