vue-calender

1 篇文章 0 订阅

​​vue-calender效果图

实现功能

  1. 生成当月的日历,并且标记当天的日期
  2. 在输入框中输入日期会跳转到对应的月份,并标记输入的日期
  3. 中间两个按钮( < >)控制月份的更改,可以切换月份
  4. 旁边两个按钮( << >>)控制月份的更改,可以切换年份
  5. 点击日期的格子会,弹出当前的日期

日历生成的核心算法

  1. 获取某一日期:计算日期当月的第一天(firstDate)和当月的最后一天(lastDate)
  2. 计算日历开始的位置 startPos:firstDate.getDay()+1
  3. 计算当月的总天数 totalDays:lastDate.getDate()
  4. 计算存放日期的行数 rows :Math.ceil((startPos +totalDay)/7)
    需要的总格子数totalItems :rows*7

月份切换

上一个月 gotolastMonth:将当前日期的月份减一,当month<0 时 let month = 11
下一个月 gotonextMonth:将当前日期的月份加一,当month===12 时 let month = 0

年份切换

直接更改日期的year值就可以了

源码地址:https://github.com/cindyHua901/vue-canlender.
(P.S:欢迎给出建议^ _ ^)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值