昨天看了大神RAEDME大鹏的中继器日历原型讲解，平时很少用到这些高级的，跃跃欲试。利用昨天的女神假期，原理+实践，尝试做出了这个日历，将详细的实践步骤分享给大家~

相信很多和我一样的，看了大神的原理，却苦于难实现的，捂脸jpg。大神的实践讲解总是很少。。。

准备工作，打开你电脑的axure，拉出两个控件（表格和中继器），表格保留一行，左右填充“上月”和“下月”，中间命名为“当前”；再拉出一个表格，保留一行7列，分别填充“日 一 二 三 四 五 六”，设置单元格40*40（这个大小随意设置）；中继器命名为“日历”，双击中继器，进入详细页面，设置矩形为40*40（宽度与星期的单元格保持一致，美观），命名为“日历详情”，给方格添加交互状态（选中控件，右键，添加鼠标划入，选中，禁用的状态），中继器属性区添加42行空白内容，中继器样式选择水平布局，每行7个（对应周日-周六）。

以上，准备部件放置完成，请看下图实践：

接下来详细说明下实践原理，看过大神的原理介绍并能吃透的，自动下滑页面看实践，如果连实践也会的，那你就关了此页面吧（不要看妹纸献丑了，捂脸.jpg）

原理篇

原型分成上下两部分，上面控制月份变化，下面控制对应月份的详细日期显示。

页面加载完成后，日历显示当前月份日期，当前时间（举栗子：2017/3/9），当天时间被选中高亮，非当月时间置灰（实现的是显示当前月份内容）。点击”上月“和”下月“，”当前“单元格的时间与下方日历随之变化。

实现上会用到几个日期函数：Now，getDate（），getDay（），getMonth（），addMonths（months），addDays（days），toLocalDateString（），index。

Now：返回当前时间详细值，栗子：Thu Mar 09 2017 10:51:59 GMT+0800 (中国标准时间)

getDate（）：返回月的日期，栗子：9，今天是9号

getDay（）：返回日期是一周中的第几天（返回值为0-1，对应日-六），栗子：4，今天是周四

getMonth（）：返回日期所在月份，栗子：3，这个月是3月份

addMonths（months）：对月份进行加减，前一个月后一个月的变化，括号内的months数值可正可负，正代表月份向未来变化，负代表月份向过去变化

addDays（days）：对日期进行加减，前一天后一天的变化，括号内的days数值可正可负，正代表日期向未来变化，负代表日期向过去变化

toLocalDateString（）：将时间详细值转化为可读的”年月日“字符串，栗子：Now的时间”Thu Mar 09 2017 10:51:59 GMT+0800“，变成”2017/3/9“

index：位置排序的索引数值，栗子：42个方格，当前选中是第16个放个，则返回16

PS：日期函数示例http://share.yuanxingku.com/tutorial/datefunctions/#p=date_functions

页面添加3个全局变量，表示当前日期的变量”Date_Now“，表示当前日期所在月份的1号日期的变量”Date_Now_1“，表示1号日期的索引序值的变量”Date_Now_1_Index“

Date_Now_1的日期=Date_Now的日期+/-相差的天数，Date_Now的日期=Now获得的数值，相差天数=1-Date_Now的日期，栗子：今天9号，与1号相差8天，即8=9-1

函数表达：Date_Now_1=[[Date_Now.addDays（1-Date_Now.getDate（））]]

getDay（）的”日-六“对应返回”0-6“，首行的索引数值为”1-7“，即索引数值=”0-6“+1（假定了每月的1号出现在第一行或者第二行），Date_Now_1_Index的数值=Date_Now_1的索引值

函数表达：Date_Now_1_Index=[[Date_Now_1.getDay（）+1]]

其他日期=日期+/-与1号日期的差值天数，与1号日期的差值天数=其他日期的索引值-Date_Now_1_Index

函数表达：其他日期=[[其他日期.addDays（Item.index-Date_Now_1_Index）.getDate（）]]

原理绕了一圈，估计你可能有点”黑人问号脸“（我自己都有点绕蒙B了。。。）

下面进行实践，实践与原理对应起来了，就会豁然开朗了~

实践篇

开始给准备好的部件添加用例咯~

分成三部分来说，上面的控制月份的部件，下面中继器的部件，然后是月份与中继器的结合。

在页面载入时，先把3个全局变量赋值，并填充”当前“单元格的内容：

Date_Now=[[Now]]，获取当前日期

Date_Now_1=[[Date_Now.addDays（1-Date_Now.getDate（））]]，获取当前日期月份1号日期

Date_Now_1_Index=[[Date_Now_1.getDay（）+1]]，获取1号日期的索引值

当前=[[Date_Now.toLocaleDateString()]]，当前日期转化为”年月日“格式显示

设置上月，下月点击用例，以上月点击为例：

Date_Now=[[Date_Now_1.addMonths(-1)]]，当前日期为向过去移动一个月的1号日期

Date_Now_1=[[Date_Now_1.addMonths(-1)]]，当前日期月份的1号向过去移动一个月

Date_Now_1_Index=[[Date_Now_1.getDay()+1]]，移动一个月后的1号索引位置

当前=[[Date_Now.toLocaleDateString()]]

下月点击用例同理，将addMonths（-1）修改为addMonths（1）即可。

浏览器预览一下吧，看看点击上月，点击下月，当前的时间显示是否有变化呢？

接着对中继器添加用例。对当前日期高亮选中，非当月日期置灰禁用。点击中继器，右侧属性”每项加载时“添加用例。

添加用例1，高亮当前日期：

用例条件：[[Date_Now_1.addDays(Item.index-Date_Now_1_Index)]]==[[Date_Now]]，当前中继器的选项正好是当前日期，有点绕口，慢慢理解。。。

满足条件的进行操作：

日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]]，获得当前日期

日历详细，启用，鼠标划入有状态变化

日历详细，选中状态=true，设置被选中

添加用例2，显示当月的日期：

用例条件：[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getMonth()]]==[[Date_Now_1.getMonth()]]，当前日期所在月份与1号日期月份相同

满足条件的进行操作：

日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]]，获得当前日期

日历详细，选中状态=false，设置未选中

日历详细，启用，鼠标划入有状态变化

添加用例3，非当月的日期置灰：

用例条件直接为非以上两种情况，无需添加特殊说明

满足条件的进行操作：

日历详细=[[Date_Now_1.addDays(Item.index-Date_Now_1_Index).getDate()]]，获得当前日期

日历详细，禁用，鼠标划入无效果

中继器的用例添加完了，预览下，看看是不是已经能够显示全部日期了呢？

接下来，把月份切换与中继器日期显示结合啦~

以点击上月为例，点击时，更新中继器的内容，且切换到上一个月时，日期定为到1号且高亮（看下电脑的日期，月份切换时，选中高亮每月1号日期）。

选择中继器的”更新行“，添加用例，满足条件[[TargetItem.index>0]]更新内容。

点击下月同理操作。

日历操作就完成了，快去浏览器里预览下吧~

原型预览：http://59lgso.axshare.com

作者：Lprecious，成长中的产品汪

本文由 @Lprecious 原创发布于人人都是产品经理。未经许可，禁止转载。