classification: 實戰(zhàn)axure
title: 在axure中使用repeater構(gòu)建日歷組件
tag: axure repeater 動態(tài)面板``日歷
author: 嘟嘟寶嘟
Date: 2020年12月9日

在axure中使用repeater構(gòu)建日歷組件

這個組件著實廢了作者很大的心思，主要是對日期的函數(shù)不是特別清楚導(dǎo)致的不斷返工，最后參考了不少其他的設(shè)計才完成倦青，大概花了兩天五六個小時才完成图毕。

1. 原型需求

具體的需求就不詳細說了，大概參考一下jeecg框架中日歷組件的樣式與操作像樊，本來想用中文的年月日格式尤莺，但是一直在犯錯，最后迫不得已生棍，還是使用了mm/dd/yyyy的日期格式颤霎。

原型需求參照的jeecg框架下的日歷組件

2. 組件準(zhǔn)備

2.1. 日期展示框

由一個輸入框和日歷圖標(biāo)組成：

日歷展示框

當(dāng)點擊日期展示框的時候彈出日歷主體，日期的輸入在日歷主體上進行足绅。

2.2. 日歷主體

日歷主體存在于一個動態(tài)面板canlenedar中

日歷主體的組件擺放

組件構(gòu)成：

日歷主體的組件構(gòu)成

其中g(shù)roup yr ctr和mon ctr是年份翻頁和月份翻頁捷绑。

其中最重要的是repeaterdays of month，它是日歷的核心氢妈。

2.3. 參數(shù)動態(tài)面板

這個動態(tài)面板varDays的作用就是提供各類參數(shù)粹污，為動態(tài)效果傳參。

參數(shù)動態(tài)面板的各個參數(shù)

3. 實現(xiàn)步驟

3.1. 從repeaterdays of month開始

3.1.1. repeater的Loaded事件

回顧需求首量，當(dāng)開始加載日歷組件時壮吩，日歷顯示當(dāng)前月的月份牌进苍，所以我們首先定義repeater的Loaded事件：

repeater的Loaded事件

這樣初始化了日歷月份牌所選月份的參數(shù)varThisDate為當(dāng)前月。

3.1.2. item的loaded事件

1. 當(dāng)加載月份牌的第一條數(shù)據(jù)時鸭叙，我們要做幾項工作：

Item Loaded事件步驟一

1. 排序日期（動態(tài)日期）設(shè)為當(dāng)前所選月第一天觉啊；
2. 設(shè)定這個月的1日是星期幾，在這里用到了[[runningDate.getDay() + 1]]沈贝，之所以這樣杠人，是因為我們把周日放在了每周的第一天，所以需要+1宋下；
3. 設(shè)定所選月的最后一天是幾號[[startDate.addMonths(1).addDays(-1).getDate()]]嗡善，[[addmonths(1)]]得到下一個月的1號（startdate是1號），[[adddays(-1)]]這是所選月的最后一天学歧，[[getdate()]]得到最后一天的日期罩引；
4. 給月份牌的月份賦值；
5. 給參數(shù)當(dāng)前時間（注意是今天）所屬月份賦值[[runningDate.getMonth()]]

2. 如果寫入的這個日期不屬于這個月

[[Item.index < firstDayOfWeek \ Item.index >= lastDayOfStartMonth + firstDayOfWeek ]]

Item Loaded事件步驟二

1. 顯示其他月日期的樣式框枝笨；
2. 隱藏當(dāng)前月的樣式框袁铐；
3. 在其他月的日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]；

3. 如果寫入的這個日期屬于這個月

[[Item.index >= firstDayOfWeek && Item.index < lastDayOfStartMonth + firstDayOfWeek]]

Item Loaded事件步驟三

1. 隱藏其他月日期的樣式框横浑；
2. 顯示當(dāng)前月的樣式框剔桨；
3. 在所選月的日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]；

實際寫的時候沒有1.2.兩個操作伪嫁，這是因為當(dāng)前月樣式框在其他月樣式框之上领炫。

4. 對于今天的處理

判斷這個日期
[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getMonth()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getFullYear()]]
是不是今天[[Now.getDate()]]/[[Now.getMonth()]]/[[Now.getFullYear()]]

Item Loaded事件步驟四

1. 顯示今天的樣式框；
2. 隱藏其他月日期和當(dāng)前月日期的樣式框张咳；
3. 在今天日期寫入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]帝洪；

5. 選中情況的處理

當(dāng)該日期被選中后的表現(xiàn)

Item Loaded事件步驟五

其中[[day]]變量為樣式框（根據(jù)情況）的日期。

6. 最后

Item Loaded事件步驟六

開始寫下一條數(shù)據(jù)脚猾。

所有的這些都寫完后葱峡，日歷組件的核心部分就寫完了，剩下的就是各種動態(tài)交互的工作了龙助。我們可以通過預(yù)覽看到當(dāng)前月份牌的效果：

月份牌預(yù)覽

可以看到默認顯示當(dāng)前月的日歷月份牌砰奕，其中今天被進行了標(biāo)記。

3.2. 翻動月份牌

3.2.1. 通過點擊< >按鍵按月翻動月份牌

上月按鈕< 的click事件

1. 更新所選月（varThisDate）參數(shù)標(biāo)簽提鸟，月份減一军援。
2. 更新repeater，看到語句其實什么也沒有做称勋，僅僅是重新更新一遍（因為所選月已經(jīng)發(fā)生了變化）

同理胸哥，我們可以設(shè)定下月按鈕>的click事件。

3.2.2. 通過點擊<< >>按鍵按年翻動月份牌

上年按鈕<< 的click事件

下年按鈕>>的click事件赡鲜。

3.3. 點擊月份牌上的日期

我們在設(shè)計月份牌上的日期時使用了四個shape組件：day of this——代表當(dāng)月的日期空厌；day of other——代表其他月的日期庐船；today——代表今天當(dāng)天；day bg作為背景板嘲更，實現(xiàn)鼠標(biāo)mouseover效果筐钟。

針對所選月當(dāng)月的日期和其他月的日期操作有所不同。我們先從當(dāng)月日期入手赋朦。

3.3.1. day of this的click事件

當(dāng)前月份日期的點擊事件

前兩個set Text方法向日歷組件的兩個輸入框（其中后邊的輸入框date show不能輸入篓冲，僅僅是顯示）寫入所選日期。

看到非常復(fù)雜北发，這是為了將日期和月份統(tǒng)一顯示為dd和mm格式纹因。

然后對參數(shù)varSelDay varSelMonth varSelYear設(shè)置為當(dāng)前選擇日期的年月日喷屋；

設(shè)置所選日期選中狀態(tài)樣式琳拨；

隱藏月份牌。

3.3.2. day of other的click事件

非本月日期的點擊事件

和day of this的click事件類似屯曹，但是增加了判斷是上個月的日期還是下個月的日期狱庇，針對不同的月份需要分別對varthisDate這個參數(shù)標(biāo)簽文字內(nèi)容進行修改，修改后更新數(shù)據(jù)恶耽。

3.3.3. today的click事件

今天（日期）的點擊事件

同理密任，設(shè)置today的click事件。

3.3.4. 今天標(biāo)簽的'click`事件

和today的click事件一樣偷俭，但是把時間換成now浪讳。

今天（標(biāo)簽）的點擊事件

3.4. 手工在date input輸入日期

當(dāng)輸入日期并按下回車鍵：

手工輸入日期

現(xiàn)在，一個基本能夠滿足原型設(shè)計需要的日歷組件就設(shè)計完成了涌萤。

最終展示效果（可以動態(tài)操作）