一款js实现的周日历

日历功能在我们的网页中很常见,比如一个活动发布页面,查看历史数据列表,条件搜索,订票,旅游等这些场景就少不了它。

开源的日历插件也是一搜一大把,功能多样,基本上能满足需求。

说到周日历应用,在我过往的大量项目中,没有它的身影。但在这需求爆炸的年代,再奇葩或者是再蹩脚的需求都会有,只有你做不到,没有需求想不到。相比以月为单位显示的日历,以周为单位显示的日历也更简洁明了。等不及了吗,那就一睹为快吧。你可以狠狠点击:手写js周日历控件,不依赖jQuery

图1,以月为单位的日历(laydate)


图2,以周为单位的日历


某天,某部门的前端同事问我有没有见过周日历的插件,他们有一个后台管理项目需要用到周日历。我用度娘搜索了很久,然而并没有找到。于是乎,我只好自己开撸了。

实现这个周日历,首先我们要了解下这个需求包含的一些关键点。即视图以周形式展现,交互包含了当天日期高亮,支持左右点击查看前一周后一周。

清楚需求之后,那就开始组织代码结构了。

1、基础准备。我封装了简化获取dom操作的方法,缓存元素,获取当天的年月月。

2、创建星期。也就是周日到周一。

3、创建一周7天日期。这个要分两步走。第一步是要计算过去或者是未来的某一天,第二步是根据得到的某一天来推导出一周的日期。

4、前面三步骤都ok了,那么就是初始化一个周日历视图了。

5、然后就到点击前一周和后一周新周日历视图了。

6、最后是点击当天日期的回调。这个就方便做一些数据交互了。

最终实现的效果如图2。视图以周形式展现,包含了当天日期高亮,支持左右点击查看前一周后一周日期,点击的时候有高亮效果以及提供了一个回调方法,参数是一个包含点击时候拿到的年月日对象。

本周日历控件没有依赖jQuery,注释也很详细。代码已经托管到github上了。点击 :手写js周历控件,不依赖jQuery进入download或者clone。

原来的需求实际上还有一个显示第几周的,计算第几周的方法来源于js 获取某年的某天是第几周,但貌似有点点问题,我也就没有在视图上显示出来了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容