FlexoCalendar周日历出错的解决方法

大部分日历控件都是日视图,月视图和年视图。由于项目需要周视图,找到了一位大神写的插件FlexoCalendar,提供了周视图。用得还挺顺手,最后才发现每年12月份会出错。如下图:


上图是默认的(不是用户选择)情况,2017-12-25,2017-12-31正常。



上图是用户选择第二周之后出现了错误,应该是2017-12-10变成了2018-12-10.



接着我又看了2018年12月,依然出现错误。很明显是写这个日历控件的大神把年份多加了一年,我们来看看这段代码在哪里,在FlexoCalendar.js文件我们可以看到:

endYear = startMonth == 12 ? startYear + 1 : startYear ;
原来是当12月份时,大神把每一个周的endYear都加了1,明显不对,那我们稍微修改一下:

endYear = startMonth == 12 ? startYear  : startYear ;
这样貌似对了,但是我们要想象一下大神为什么会有个加一呢,哦,应该是当第五周中如果出现了下一年的日期就要加一,如下图(2016年12月):


很明显第五周中如果出现了下一年的日期,这样也会出错,那怎么改才会完全正确呢,那就是下面的代码了:

endYear = startMonth == 12 && parseInt(endDay)<7? startYear +1  : startYear ;

把原来的一行代码换成上面我提供的,就没问题了,如下:



因时间仓促,资质有限,文中表述仅代表个人观点,如果有更好的想法,欢迎分享。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
之前在网上想找一个简单易用的日历选择插件,发现这种前端日历插件很少,而且很多文章写的的算法都不是统一的,所以自己实现了一个基于jquery的日历插件(还支持跳转到指定年份和哦)。 插件中的算法:每日为起始,第一以每年第一个星期四所在的为第一(网上找的好像这个算法比较正规) 实现的效果是在手机端,也可以在PC端用,毕竟功能才是主要的。如果觉得样式不入眼可以自行随意修改。 //调用日历方法 var weekfn = new jcalendar_week({ element: "#jcalendar_week",//填充日历的dom元素 dayaddclass:function(date){ //添加某天时给添加类名(参数:1.日期)(返回类名字符串,多个以空格分开) return ""; }, dayclick:function(date,obj){ //day点击事件(参数:1.日期,2.所点击DOM元素) $(obj).addClass("calendar_day_act").siblings().removeClass("calendar_day_act"); } }); 点击上方显示当前年份和的DOM部分可选择并跳转到指定年份和。 插件提供的方法: //获取第一天方法weekfirstdate(),传入年份和数 console.log(weekfn.weekfirstdate(2018,36)); //获取传入日期为当年第几getweeknum(),传入年,月,日(注:这里的月份从0开始) console.log(weekfn.getweeknum(2018,0,16)); //跳转到指定confirmweek(),传入年份和数 weekfn.confirmweek(getyear,getweek); //跳转到本nowweek() weekfn.nowweek();
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值