用vue来写一个日历组件

项目要用到一个日历,但是css和功能比较奇怪,就需要自己撸一个了

原理
一个日历当前月页面会显示3部分的日期天数
上月的,本月的,下月的
计算到这3部分组合起来的数组就是完整的当月日历
所以重点在于计算这三部分就完成了

用vue来写一个日历组件_第1张图片

1.上月的
new Date('2021-09-01').getDay()
2021年9月1号是星期3,这时候就得到上月的3天
2.本月的
new Date(year, month, 0).getDate()
3.下月的
7 - (preAndCenter.length % 7)

最后得到当前页所以日期数组后就可以随意扩展自己要的功能了





你可能感兴趣的:(用vue来写一个日历组件)