本文仔細(xì)介紹了中繼器制作手機(jī)版日歷的步驟與注意要點(diǎn)，希望對你有所啟發(fā)。

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

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

01 效果演示

1. 手機(jī)日歷

1.1 鼠標(biāo)上下、左右滑動(dòng)效果

這里手機(jī)真實(shí)效果一直哈。而且日歷都是標(biāo)準(zhǔn)的日歷，不會有錯(cuò)哦，還不需要聯(lián)網(wǎng)。

1.2 點(diǎn)擊查看年視圖

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

1.3 點(diǎn)擊月份回到月視圖

1.4 選擇日期

1.4 選擇今日

2. 滑動(dòng)日期選擇器

02 制作教學(xué)

1. 手機(jī)版日歷

首先我們要做這個(gè)頁面

用中繼器做，中繼器內(nèi)只需要兩列column0和xuanzhong

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

中繼器網(wǎng)格分布，每排項(xiàng)目數(shù)為7，列表格什么都不需要填，只是用于邏輯處理。

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

我們先處理簡單的

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

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

上面就是計(jì)算當(dāng)月的，那怎么計(jì)算其他月份的呢，用add.month函數(shù)，計(jì)算年的就用add.year函數(shù)就可。鼠標(biāo)向左拖動(dòng)結(jié)束的時(shí)候，add.month+1，然后重復(fù)上述操作。年視圖也是一樣，左拖動(dòng)時(shí)，add.year+1，重復(fù)上面操作。

那么右滑動(dòng)其實(shí)就是-1。

然后xuanzhong就是，鼠標(biāo)單擊時(shí)，顯示選中的顏色，開始進(jìn)去的時(shí)候我們可以默認(rèn)更新行，讓今天日期被選中。

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

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

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

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

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議