對(duì)于萬年歷的概念，大家已經(jīng)非常熟悉了，尤其臨近節(jié)假日的時(shí)候，我們會(huì)習(xí)慣去查看日歷上的放假安排，但是經(jīng)常覺得很坑爹啊有木有，不過這是題外話了。今天這個(gè)案例就和萬年歷有關(guān)，教大家使用“中繼器”和“日期函數(shù)”來實(shí)現(xiàn)一個(gè)萬年歷的原型，不過這原型可不是死的哦，是可以真真正正顯示萬年日期的萬年歷。

原型預(yù)覽：

原型說明：萬年歷原型在初始化的時(shí)候可以自動(dòng)顯示當(dāng)前日期，并鎖定當(dāng)天（Today），通過“上一年”“上一月”“下一月”“下一年”操作，可顯示對(duì)應(yīng)年份及月份的日歷，“返回今天”可返回當(dāng)前月份日歷及鎖定當(dāng)天（Today）。

學(xué)習(xí)重點(diǎn)

通過本案例，我們主要來練習(xí)中繼器和日期函數(shù)的使用，中繼器用于顯示日歷的天，日期函數(shù)則用于處理日歷的顯示邏輯。其中使用到的日期函數(shù)將包括：Now-獲取當(dāng)前日期、getDate（）-獲取天、getDay（）-獲取一周中的第幾天、addDays（）-增加/減少天、addMonths（）-增加/減少月、addYears（）-增加/減少年。

原理說明

首先我用一個(gè)7*6的矩陣（中繼器）來顯示日期，至于為什么是7*6而不是7*5，大家仔細(xì)觀察一下日歷就可以發(fā)現(xiàn)了，7*5有時(shí)候是不能將一整月的日期顯示全的。接下來我就是要把日期顯示到對(duì)應(yīng)的矩陣單元上，下面我用一個(gè)圖來表示：

上圖是一個(gè)日歷的大概的樣子，比如今天是2017年1月17日，那么17應(yīng)該顯示在上圖42個(gè)方格中的哪個(gè)格子里呢？這個(gè)我暫時(shí)是不知道的。

但是如果是2017年1月1日呢？這下我就知道了，2017年1月1日肯定顯示在矩陣格子的第一行（1-7的一個(gè)位置，絕對(duì)不會(huì)顯示到8那個(gè)位置），那么到底是第幾個(gè)位置呢？我也不知道。

但是我可以借助一個(gè)函數(shù)getDay（）來得到2017年1月1日對(duì)應(yīng)的是一周的第幾天（周日是第0天，周六是第6天，以此類推，正如上圖中g(shù)etDay（）后面標(biāo)記的一行數(shù)字），這時(shí)候我就可以發(fā)現(xiàn)一個(gè)規(guī)律，getDay（）那一行數(shù)字正好比42矩陣中的第一行的右下角的數(shù)字（這個(gè)我們會(huì)用中繼器中的Item.Index來獲?。┥?，緊接著2017年1月1日getDay（）+1的位置就是要顯示的位置（比如上圖黃圈1的位置，這里我用start_index來表示）。

接著我就可以用這個(gè)黃圈1以及它所處的位置，計(jì)算出整個(gè)42矩陣中其他位置的日期是多少。我么拿黃圈11來舉例子說明。黃圈11的位置我們是可以得到的（中繼器中的Item.Index），黃圈1的位置我們剛才也知道了是start_index，那么黃圈11的Item.Index-start_index的差值是不是就等于黃圈11的日期-黃圈1的日期呢？答案當(dāng)然是肯定的（用上圖的例子就知道：17-7=11-1=10），然后我們利用這個(gè)差值，在黃圈1代表的日期加上剛才計(jì)算的差值就會(huì)得到黃圈11的日期。其他位置的日期以此類推。

好了，這就是大概的原理，接下來我們看具體是如何實(shí)現(xiàn)的。

實(shí)現(xiàn)步驟

實(shí)現(xiàn)當(dāng)前月份的日歷顯示

前面已經(jīng)講到了，要用到中繼器，所以先從最基本的開始，我們要用中繼器構(gòu)建出整個(gè)日期的框架，這里中繼器只用于顯示對(duì)應(yīng)的日期。

另外在整個(gè)案例中我們還用到2個(gè)全局變量：Date_Now（用來表示當(dāng)前日歷顯示的日期），Date_Now_1（用來表示當(dāng)前日歷顯示的對(duì)應(yīng)月份的1日，比如2017年1月1日），Date_Now_1_Index（用來表示Date_Now_1在中其中所處的位置）。

然后我們給當(dāng)前頁面的“頁面加載時(shí)（OnPageLoad）”添加如下事件：

接著要設(shè)置中繼器中的矩形把日期顯示出來，給中繼器的“（項(xiàng)目加載時(shí)）OnItemLoad”添加如下事件：

其中的Case1、Case2、Case3還實(shí)現(xiàn)了其他效果，比如設(shè)置當(dāng)前日期為選中狀態(tài)、設(shè)置非當(dāng)月日期的顏色為灰色等等。值得一提的是，函數(shù)中的所有涉及日期的，我都使用的之前創(chuàng)建好的3個(gè)全局變量，這樣做是為了為后面的功能實(shí)現(xiàn)做基礎(chǔ)。

好了，到這里就可以實(shí)現(xiàn)當(dāng)月日期的顯示了，接下來我們實(shí)現(xiàn)上月、下月、上年、下年日歷的顯示。

上月、下月、上年、下年日期顯示

實(shí)現(xiàn)上月、下月、上年、下年的基本思路則是改變?nèi)肿兞緿ate_Now，Date_Now_1，Date_Now_1_Index的值。在頁面初始化的時(shí)候，這三個(gè)變量就被根據(jù)當(dāng)前日期賦了值，因此要實(shí)現(xiàn)上月、下月、上年、下年，就只對(duì)Date_Now和Date_Now_1做 addDays（），addMonths（），addYears（）操作即可，然后其他的顯示邏輯一概不變。

我們可以隨意使用部件來達(dá)到切換年度和月度的效果，比如用矩形框，但我的案例中使用的是表格，便于排版而已。

我給“上一月”添加“點(diǎn)擊時(shí)（Onclick）”事件，其實(shí)對(duì)于“下一月”也是完全相同的事件，只是把其中的addMonths(-1)改成了1，因?yàn)樯弦辉乱?1，下一月就要+1嘛。

而對(duì)于“上一年”和“下一年”，也是相似的套路，只不過addMonths()函數(shù)變成了addYears()，其他一點(diǎn)沒變。

好了，到這里真?zhèn)€原型就實(shí)現(xiàn)的差不多了，其他一些個(gè)性化的東西可以根據(jù)你自己的想法去創(chuàng)作。

總結(jié)

其實(shí)這個(gè)案例更多的是掌握日期函數(shù)的用法，這個(gè)原型的靈感并不來源于萬年歷，而是在我學(xué)習(xí)日期函數(shù)的時(shí)候突發(fā)奇想，想如何能把日期函數(shù)通過一個(gè)完整有趣的原型學(xué)習(xí)和應(yīng)用起來，于是就有個(gè)這個(gè)案例。雖然這其中也涉及到了中繼器，但也僅僅用到了中繼器的布局和獲取Index值。

文中的實(shí)現(xiàn)步驟并不十分詳細(xì)，其實(shí)更多的是給小伙伴們提供一種思路，更多的還是需要自己的思考和嘗試。

作者：RAEDME大鵬，微信：urmagic

本文由 @RAEDME大鵬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。