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

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

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

一、效果展示

1、點擊控件，可以彈出時間日期選擇的下拉列表，在里面可以選擇對應的日期和時間；

2、選擇的日期是真實日期，即日期能一一對應真實的日期，哪一天是星期幾都是真實對應的；

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

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

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

二、制作分析

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

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

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

第三種是通過中繼器和日期時間函數(shù)，制作一個日期時間模板，這種方式雖然做起來比較困難，但是制作之后復用性很高，因為用原生元件制作，所以對后續(xù)添加對應交互比較友好，可以隨心所欲的添加后續(xù)效果，所以我們會用第三種方式來制作。

三、制作教程

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

1. 提示框

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

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

2. 日期部分

日期部分我們主要是用中繼器、文本標簽、箭頭等內容制作。

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

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

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

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

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

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

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

那點擊做雙左箭頭其實就是把年份值-1，點擊右箭頭就是把年份值+1。

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

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

關于年份和月份的下拉列表，點擊后設置對應年月記錄值為選擇內容即可，因為月份是固定12個月的，所以用多個文字標簽制作即可，年份比較多，建議用中繼器來制作，年份太多的話還可以轉為動態(tài)面板調出滾動條來處理。

那我們在鼠標單擊中繼器里日期的時候，就用把中繼器內文字和圓設置為真，因為之前設置了選中樣式所以會變白，然后用設置文本的交互，記錄選中的日期，并且具體日期和時間回顯到選擇框。

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

3. 時間部分

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

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

同樣的里面的矩形要設置選中樣式。

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

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

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

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