仿携程机票查询日历

咸豆腐脑儿

于 2023-05-18 13:41:15 发布

阅读量118

点赞数

文章标签： javascript vue.js css

本文链接：https://blog.csdn.net/weixin_44735941/article/details/130744982

版权

例如: 在这里插入图片描述
这里因为时间太急所以只会粘贴核心代码代码也还没来得及优化希望给大家留一个思路不忙了在贴完整代码

思路:
1.首先这个观察日历可以发现共六行42天 (也可以35天) 但是为了显示全部天数 也为了美观就使用42天
2.首先要知道当前月一号的毫秒数
let currentTimes = new Date(y+'-'+m+'-'+1).getTime()
3.算出当前月一号是周几 
let week = new Date(y+'-'+m+'-'+1).getDay()
4.当前月一号日期 减去 比如今天周三那就是前面是两天上个月的日期 获得开始日期
let startTime = currentTimes - (week-1)*1000*60*60*24 
5.获取需要渲染的数组 let canendarArr
let canendarArr = []
for(let i=0;i<42;i++){
	canendarArr.push({
		date:new Date(startTime+i*1000*60*60*24),
		year:new Date(startTime+i*1000*60*60*24).getFullYear(),
		montn:new Date(startTime+i*1000*60*60*24).getMonth()+1,
		day:new Date(startTime+i*1000*60*60*24).getDate()
	})
}

最后将数组渲染到页面就行了