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