Vue实现日历

在这里插入图片描述
效果就是这样子,可以切换上一年,上一个月, 下一年,下一个月。

先来捋一下,

  1. 首先得知道本月有多少天
  2. 知道本月的第一天在星期几
  3. 将本月的天数从1号开始排
  4. 上一个月有多少天,将本月1号前的星期补全
  5. 本月的截止是星期几,下一个月1号从星期几遍历

STEP1:
先设置一个星期数组,用来存放星期日-星期一
月份数组来存放基本每月的天数

	week: string[] = ['日', '一', '二', '三', '四', '五', '六']
	monthList: number[] = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

STEP2:
计算本月有多少天,并且1号是星期几

	const date = new Date()
    this.year = date.getFullYear()
    this.month = date.getMonth() + 1
    this.day = date.getDate()

	// 获得本月的1号是周一
    const firstDay = new Date(`${this.year}/${this.month}/1`).getDay()
    // 在1号前面填充多少个上个月的日期
    this.weekDay =
  • 3
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值