本文仔細介紹了中繼器製作手機版日曆的步驟與註意要點，希望對你有所啟發。
今天和大家分享怎麼用中繼器製作手機版的日曆。該原型使用方便，可直接使用，而且交互齊全完善，所以推薦給大家使用。這期的內容，數學公式比較多，可能有些小伙伴會不明白，喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。
原型預覽地址：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協議