日历功能在我们的网页中很常见,比如一个活动发布页面,查看历史数据列表,条件搜索,订票,旅游等这些场景就少不了它。
开源的日历插件也是一搜一大把,功能多样,基本上能满足需求。
说到周日历应用,在我过往的大量项目中,没有它的身影。但在这需求爆炸的年代,再奇葩或者是再蹩脚的需求都会有,只有你做不到,没有需求想不到。相比以月为单位显示的日历,以周为单位显示的日历也更简洁明了。等不及了吗,那就一睹为快吧。你可以狠狠点击:手写js周日历控件,不依赖jQuery。
某天,某部门的前端同事问我有没有见过周日历的插件,他们有一个后台管理项目需要用到周日历。我用度娘搜索了很久,然而并没有找到。于是乎,我只好自己开撸了。
实现这个周日历,首先我们要了解下这个需求包含的一些关键点。即视图以周形式展现,交互包含了当天日期高亮,支持左右点击查看前一周后一周。
清楚需求之后,那就开始组织代码结构了。
1、基础准备。我封装了简化获取dom操作的方法,缓存元素,获取当天的年月月。
2、创建星期。也就是周日到周一。
3、创建一周7天日期。这个要分两步走。第一步是要计算过去或者是未来的某一天,第二步是根据得到的某一天来推导出一周的日期。
4、前面三步骤都ok了,那么就是初始化一个周日历视图了。
5、然后就到点击前一周和后一周新周日历视图了。
6、最后是点击当天日期的回调。这个就方便做一些数据交互了。
最终实现的效果如图2。视图以周形式展现,包含了当天日期高亮,支持左右点击查看前一周后一周日期,点击的时候有高亮效果以及提供了一个回调方法,参数是一个包含点击时候拿到的年月日对象。
本周日历控件没有依赖jQuery,注释也很详细。代码已经托管到github上了。点击 :手写js周历控件,不依赖jQuery进入download或者clone。
原来的需求实际上还有一个显示第几周的,计算第几周的方法来源于js 获取某年的某天是第几周,但貌似有点点问题,我也就没有在视图上显示出来了。