日歷功能在我們的網(wǎng)頁中很常見，比如一個(gè)活動(dòng)發(fā)布頁面，查看歷史數(shù)據(jù)列表，條件搜索，訂票，旅游等這些場景就少不了它。
開源的日歷插件也是一搜一大把，功能多樣，基本上能滿足需求。
說到周日歷應(yīng)用，在我過往的大量項(xiàng)目中，沒有它的身影。但在這需求爆炸的年代，再奇葩或者是再蹩腳的需求都會(huì)有，只有你做不到，沒有需求想不到。相比以月為單位顯示的日歷，以周為單位顯示的日歷也更簡潔明了。等不及了嗎，那就一睹為快吧。你可以狠狠點(diǎn)擊：手寫js周日歷控件，不依賴jQuery。
某天，某部門的前端同事問我有沒有見過周日歷的插件，他們有一個(gè)后臺(tái)管理項(xiàng)目需要用到周日歷。我用度娘搜索了很久，然而并沒有找到。于是乎，我只好自己開擼了。
實(shí)現(xiàn)這個(gè)周日歷，首先我們要了解下這個(gè)需求包含的一些關(guān)鍵點(diǎn)。即視圖以周形式展現(xiàn)，交互包含了當(dāng)天日期高亮，支持左右點(diǎn)擊查看前一周后一周。
清楚需求之后，那就開始組織代碼結(jié)構(gòu)了。
1、基礎(chǔ)準(zhǔn)備。我封裝了簡化獲取dom操作的方法，緩存元素，獲取當(dāng)天的年月月。
2、創(chuàng)建星期。也就是周日到周一。
3、創(chuàng)建一周7天日期。這個(gè)要分兩步走。第一步是要計(jì)算過去或者是未來的某一天，第二步是根據(jù)得到的某一天來推導(dǎo)出一周的日期。
4、前面三步驟都o(jì)k了，那么就是初始化一個(gè)周日歷視圖了。
5、然后就到點(diǎn)擊前一周和后一周新周日歷視圖了。
6、最后是點(diǎn)擊當(dāng)天日期的回調(diào)。這個(gè)就方便做一些數(shù)據(jù)交互了。
最終實(shí)現(xiàn)的效果如圖2。視圖以周形式展現(xiàn)，包含了當(dāng)天日期高亮，支持左右點(diǎn)擊查看前一周后一周日期，點(diǎn)擊的時(shí)候有高亮效果以及提供了一個(gè)回調(diào)方法，參數(shù)是一個(gè)包含點(diǎn)擊時(shí)候拿到的年月日對象。
本周日歷控件沒有依賴jQuery，注釋也很詳細(xì)。代碼已經(jīng)托管到github上了。點(diǎn)擊 ：手寫js周歷控件，不依賴jQuery進(jìn)入download或者clone。
原來的需求實(shí)際上還有一個(gè)顯示第幾周的，計(jì)算第幾周的方法來源于js 獲取某年的某天是第幾周，但貌似有點(diǎn)點(diǎn)問題，我也就沒有在視圖上顯示出來了。
