在系統(tǒng)中，我們經(jīng)常會用到日期時(shí)間選擇器，它同時(shí)包含了日歷日期和時(shí)間的選擇，一般是下拉列表的形式進(jìn)行選擇。本文作者分享了如何在Axure中用中繼器制作真實(shí)日期時(shí)間效果的下拉列表的方法，一起來學(xué)習(xí)一下吧。

在系統(tǒng)中，我們經(jīng)常會用到日期時(shí)間選擇器，它同時(shí)包含了日歷日期的選擇和時(shí)間的選擇，一般是下拉列表的形式進(jìn)行選擇。

今天作者就教大家如何在Axure中用中繼器制作真實(shí)日期時(shí)間效果的下拉列表。

一、效果展示

1、點(diǎn)擊控件，可以彈出時(shí)間日期選擇的下拉列表，在里面可以選擇對應(yīng)的日期和時(shí)間；

2、選擇的日期是真實(shí)日期，即日期能一一對應(yīng)真實(shí)的日期，哪一天是星期幾都是真實(shí)對應(yīng)的；

3、點(diǎn)擊左箭頭切換上月，右箭頭切換到下月；雙左箭頭切換到上年，雙右箭頭切換至下一年；

4、可以點(diǎn)擊年份或月份，快速選擇置頂?shù)哪暝拢?/p>

5、選擇后自動回顯選擇的日期和時(shí)間。

二、制作分析

一般而言會有三種方式來制作：

第一種是寫死，寫死在動態(tài)面板里面寫幾個月的日期，然后通過動態(tài)面板切換制作出對應(yīng)的效果，這種的缺點(diǎn)是復(fù)用性差，而且只能顯示寫好的幾個月，如果要查幾十年的數(shù)據(jù)，就要做幾百頁，相當(dāng)浪費(fèi)時(shí)間，所以我們不用這種方式。

第二種是通過js調(diào)用，js調(diào)用的好處的簡單快捷，通過幾行js代碼就可以調(diào)用瀏覽器的日期時(shí)間下拉列表，但是缺點(diǎn)也很明顯：第一，不同瀏覽器不同版本自帶的時(shí)間日期下拉列表不一樣，你看到的是這個效果，別人看到的就是另一個效果；第二，后續(xù)的交互不好做，我們做選擇器，后續(xù)可能會對中繼器表格進(jìn)行篩選或者其他交互，如果是用js調(diào)用的話，對于不懂代碼的小白就無法進(jìn)行后續(xù)的交互。

第三種是通過中繼器和日期時(shí)間函數(shù)，制作一個日期時(shí)間模板，這種方式雖然做起來比較困難，但是制作之后復(fù)用性很高，因?yàn)橛迷谱?，所以對后續(xù)添加對應(yīng)交互比較友好，可以隨心所欲的添加后續(xù)效果，所以我們會用第三種方式來制作。

三、制作教程

這個原型可以主要分成4個部分：

1. 提示框

提示框包括提示文字，矩形，圖標(biāo)這幾部分組成，大家可以根據(jù)自身需要設(shè)置樣式，也可以增加移入變色，選中變色等效果來美化。

鼠標(biāo)單擊提示框的時(shí)候，我們用顯示的交互，將隱藏的下拉組合顯示出來即可。

2. 日期部分

日期部分我們主要是用中繼器、文本標(biāo)簽、箭頭等內(nèi)容制作。

中間的日期我們是用中繼器來制作，里面增加圓形，去除邊線，矩形設(shè)置選中樣式為填充顏色為藍(lán)色，文字顏色為白色。中繼器里共兩列，一列是自帶的Column0，一列是xuanzhong列，默認(rèn)都為空就可以了。默認(rèn)我們增加42行空行。

下面我們簡單說一下邏輯，我們主要用到下面幾個函數(shù)：

• now函數(shù)：可以獲取現(xiàn)在的詳細(xì)的日期
• get.date：可以獲取今天是幾號
• addDays：可以加減日期天數(shù)
• get.day：獲取今天是星期幾

我們要找到某年某月的第一天是星期幾，原理是先獲取今天的日期和周幾，然后在通過計(jì)算出選中日期和今天日期的差值，從而獲取到指定日期是中繼器里的第幾格。

上面這是同一個月的情況下，如果不同月不同年的話，我們還要用add.month和add.year來計(jì)算。

我們做的時(shí)候還要分4種情況，分別是一個月有30天、31天、28天和29天這三種情況。

根據(jù)不同條件的月份要增加不同的天數(shù)。

那點(diǎn)擊做雙左箭頭其實(shí)就是把年份值-1，點(diǎn)擊右箭頭就是把年份值+1。

如果點(diǎn)擊單左箭頭就要分兩種情況來分析了，一種是月份不等于1，那只要把記錄月份的值減一就可以了，如果月份值等于1，相當(dāng)于去到上年底了，所以月份值要變成12，年份值-1。

單右箭頭也是同理，如果月份等于12，就去到下一年一月了，所以年費(fèi)要加一，月份值變成1。

關(guān)于年份和月份的下拉列表，點(diǎn)擊后設(shè)置對應(yīng)年月記錄值為選擇內(nèi)容即可，因?yàn)樵路菔枪潭?2個月的，所以用多個文字標(biāo)簽制作即可，年份比較多，建議用中繼器來制作，年份太多的話還可以轉(zhuǎn)為動態(tài)面板調(diào)出滾動條來處理。

那我們在鼠標(biāo)單擊中繼器里日期的時(shí)候，就用把中繼器內(nèi)文字和圓設(shè)置為真，因?yàn)橹霸O(shè)置了選中樣式所以會變白，然后用設(shè)置文本的交互，記錄選中的日期，并且具體日期和時(shí)間回顯到選擇框。

這里要說一點(diǎn)的是，如果切換到其他年份或者月份的操作，我們要要通過更新行的交互，更新一下選中列的值，這樣其他年份的同一天才不會選中變色。

3. 時(shí)間部分

時(shí)間部分我們用兩個中繼器來制作。

小時(shí)的中繼器填寫00-23，分鐘的中繼器里填寫00-59，轉(zhuǎn)為動態(tài)面板，增加滾動條。

同樣的里面的矩形要設(shè)置選中樣式。

中繼器內(nèi)部我們增加一個true列用于記錄那個值未選中，如果true的值等于1，我們就選中該行內(nèi)容。

鼠標(biāo)單擊時(shí)，我們用先更新所有行把true列的值更新為0，相當(dāng)于全部取消選中，然后在用更新行的交互，將當(dāng)前行的值更新為1。最后我們用設(shè)置文本的交互，把年月日時(shí)分選中的記錄值回顯到選擇框即可。

這樣我們就制作完成了日期時(shí)間下拉列表的原型模板了，下次使用時(shí)復(fù)制粘貼就能使用，需要增加后續(xù)交互也可以自行添加，是不是很方便呢？

那以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。