本文仔細介紹了中繼器制作手機版日歷的步驟與注意要點，希望對你有所啟發。

今天和大家分享怎么用中繼器制作手機版的日歷。該原型使用方便，可直接使用，而且交互齊全完善，所以推薦給大家使用。這期的內容，數學公式比較多，可能有些小伙伴會不明白，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

原型預覽地址：http://cloud.axureshop.com/i7e23d/#id=0z1y1z&p=%E6%89%8B%E6%9C%BA%E6%97%A5%E5%8E%86&g=1

01 效果演示

1. 手機日歷

1.1 鼠標上下、左右滑動效果

這里手機真實效果一直哈。而且日歷都是標準的日歷，不會有錯哦，還不需要聯網。

1.2 點擊查看年視圖

同樣的年視圖里面也可以上下左右滑動選擇年份哦。

1.3 點擊月份回到月視圖

1.4 選擇日期

1.4 選擇今日

2. 滑動日期選擇器

02 制作教學

1. 手機版日歷

首先我們要做這個頁面

用中繼器做，中繼器內只需要兩列column0和xuanzhong

中繼器新增42行，因為6*7日=42，有的同學可能會問，老師5行不夠嗎，你們看一下下圖就知道為什么要六行了。

中繼器網格分布，每排項目數為7，列表格什么都不需要填，只是用于邏輯處理。

下面我們簡單說一下邏輯，我們要找到某年某月的第一天是星期幾，然后設置中繼器那一格顯示1，之后的按2、3、4……下去即可。這里有一點需要注意的，我們要記住1、3、5、7、8、10、12月有31天，4、6、9、11月有30天，2月有28或29天。

我們先處理簡單的

用now函數可以獲取現在的日期，然后用get.date函數獲取今天是幾號，再計算今天距離1號隔了幾天，例如今天是2019年5月22日，那么距離2019年5月1日就隔了-21日，然后用add函數，[[Now.addDays(days)]]，（days）就是填隔了多少天，上述案例是-21，接著用get.day函數，就可以得到是周幾了，注意，如果是周日get.day的值是0，周一是1……，案例中get.day的值為5.

那如果中繼器的序號小于等于get.day的值，設置文本為空（就是中繼器前5行為空值）；如果序號大于get.day+31,也是設置文本為空，這里需要分情況，如果是1、3、5、7、8、10、12月的話是31，代表已經是下個月的日期了。那如果是4、6、9、11月應該是30天，2月應為28或29天，那怎么判斷是28還是29呢。用年份/4，如果結果包含小數點的就是28天，沒包含的就是29天。其余情況中繼器內文本=序號-get.day的值

上面就是計算當月的，那怎么計算其他月份的呢，用add.month函數，計算年的就用add.year函數就可。鼠標向左拖動結束的時候，add.month+1，然后重復上述操作。年視圖也是一樣，左拖動時，add.year+1，重復上面操作。

那么右滑動其實就是-1。

然后xuanzhong就是，鼠標單擊時，顯示選中的顏色，開始進去的時候我們可以默認更新行，讓今天日期被選中。

上面就是制作手機版日歷的教程了。

然后日期滑動選擇器的制作跟上期我們講的地區選擇器的制作方法基本一致。有興趣的小伙伴可以看回我之前的文章Axure教程：手機版地區選擇器原型

那么我們這期的分享就到這里結束了，

這期的內容，數學公式比較多，可能有些小伙伴會不明白，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議