教程详解实践日历中继器

　　昨天看了大神RAEDME大鹏的中继器日历原型讲解，平时很少用到这些高级的，跃跃欲试。利用昨天的女神假期，原理实践，尝试做出了这个日历，将详细的实践步骤分享给大家
　　相信很多和我一样的，看了大神的原理，却苦于难实现的，捂脸jpg。大神的实践讲解总是很少
　　准备工作，打开你电脑的axure，拉出两个控件（表格和中继器），表格保留一行，左右填充上月和下月，中间命名为当前；再拉出一个表格，保留一行7列，分别填充日一二三四五六，设置单元格4040（这个大小随意设置）；中继器命名为日历，双击中继器，进入详细页面，设置矩形为4040（宽度与星期的单元格保持一致，美观），命名为日历详情，给方格添加交互状态（选中控件，右键，添加鼠标划入，选中，禁用的状态），中继器属性区添加42行空白内容，中继器样式选择水平布局，每行7个（对应周日周六）。
　　以上，准备部件放置完成，请看下图实践：
　　接下来详细说明下实践原理，看过大神的原理介绍并能吃透的，自动下滑页面看实践，如果连实践也会的，那你就关了此页面吧（不要看妹纸献丑了，捂脸。jpg）
　　原理篇
　　原型分成上下两部分，上面控制月份变化，下面控制对应月份的详细日期显示。
　　页面加载完成后，日历显示当前月份日期，当前时间（举栗子：201739），当天时间被选中高亮，非当月时间置灰（实现的是显示当前月份内容）。点击上月和下月，当前单元格的时间与下方日历随之变化。
　　实现上会用到几个日期函数：Now，getDate（），getDay（），getMonth（），addMonths（months），addDays（days），toLocalDateString（），index。
　　Now：返回当前时间详细值，栗子：ThuMar09201710：51：59GMT0800（中国标准时间）
　　getDate（）：返回月的日期，栗子：9，今天是9号
　　getDay（）：返回日期是一周中的第几天（返回值为01，对应日六），栗子：4，今天是周四
　　getMonth（）：返回日期所在月份，栗子：3，这个月是3月份
　　addMonths（months）：对月份进行加减，前一个月后一个月的变化，括号内的months数值可正可负，正代表月份向未来变化，负代表月份向过去变化
　　addDays（days）：对日期进行加减，前一天后一天的变化，括号内的days数值可正可负，正代表日期向未来变化，负代表日期向过去变化
　　toLocalDateString（）：将时间详细值转化为可读的年月日字符串，栗子：Now的时间ThuMar09201710：51：59GMT0800，变成201739
　　index：位置排序的索引数值，栗子：42个方格，当前选中是第16个放个，则返回16
　　PS：日期函数示例http：share。yuanxingku。comtutorialdatefunctionspdatefunctions
　　页面添加3个全局变量，表示当前日期的变量DateNow，表示当前日期所在月份的1号日期的变量DateNow1，表示1号日期的索引序值的变量DateNow1Index
　　DateNow1的日期DateNow的日期相差的天数，DateNow的日期Now获得的数值，相差天数1DateNow的日期，栗子：今天9号，与1号相差8天，即891
　　函数表达：DateNow1〔〔DateNow。addDays（1DateNow。getDate（））〕〕
　　getDay（）的日六对应返回06，首行的索引数值为17，即索引数值061（假定了每月的1号出现在第一行或者第二行），DateNow1Index的数值DateNow1的索引值
　　函数表达：DateNow1Index〔〔DateNow1。getDay（）1〕〕
　　其他日期日期与1号日期的差值天数，与1号日期的差值天数其他日期的索引值DateNow1Index
　　函数表达：其他日期〔〔其他日期。addDays（Item。indexDateNow1Index）。getDate（）〕〕
　　原理绕了一圈，估计你可能有点黑人问号脸（我自己都有点绕蒙B了）
　　下面进行实践，实践与原理对应起来了，就会豁然开朗了
　　实践篇
　　开始给准备好的部件添加用例咯
　　分成三部分来说，上面的控制月份的部件，下面中继器的部件，然后是月份与中继器的结合。
　　在页面载入时，先把3个全局变量赋值，并填充当前单元格的内容：
　　DateNow〔〔Now〕〕，获取当前日期
　　DateNow1〔〔DateNow。addDays（1DateNow。getDate（））〕〕，获取当前日期月份1号日期
　　DateNow1Index〔〔DateNow1。getDay（）1〕〕，获取1号日期的索引值
　　当前〔〔DateNow。toLocaleDateString（）〕〕，当前日期转化为年月日格式显示
　　设置上月，下月点击用例，以上月点击为例：
　　DateNow〔〔DateNow1。addMonths（1）〕〕，当前日期为向过去移动一个月的1号日期
　　DateNow1〔〔DateNow1。addMonths（1）〕〕，当前日期月份的1号向过去移动一个月
　　DateNow1Index〔〔DateNow1。getDay（）1〕〕，移动一个月后的1号索引位置
　　当前〔〔DateNow。toLocaleDateString（）〕〕
　　下月点击用例同理，将addMonths（1）修改为addMonths（1）即可。
　　浏览器预览一下吧，看看点击上月，点击下月，当前的时间显示是否有变化呢？
　　接着对中继器添加用例。对当前日期高亮选中，非当月日期置灰禁用。点击中继器，右侧属性每项加载时添加用例。
　　添加用例1，高亮当前日期：
　　用例条件：〔〔DateNow1。addDays（Item。indexDateNow1Index）〕〕〔〔DateNow〕〕，当前中继器的选项正好是当前日期，有点绕口，慢慢理解
　　满足条件的进行操作：
　　日历详细〔〔DateNow1。addDays（Item。indexDateNow1Index）。getDate（）〕〕，获得当前日期
　　日历详细，启用，鼠标划入有状态变化
　　日历详细，选中状态true，设置被选中
　　添加用例2，显示当月的日期：
　　用例条件：〔〔DateNow1。addDays（Item。indexDateNow1Index）。getMonth（）〕〕〔〔DateNow1。getMonth（）〕〕，当前日期所在月份与1号日期月份相同
　　满足条件的进行操作：
　　日历详细〔〔DateNow1。addDays（Item。indexDateNow1Index）。getDate（）〕〕，获得当前日期
　　日历详细，选中状态false，设置未选中
　　日历详细，启用，鼠标划入有状态变化
　　添加用例3，非当月的日期置灰：
　　用例条件直接为非以上两种情况，无需添加特殊说明
　　满足条件的进行操作：
　　日历详细〔〔DateNow1。addDays（Item。indexDateNow1Index）。getDate（）〕〕，获得当前日期
　　日历详细，禁用，鼠标划入无效果
　　中继器的用例添加完了，预览下，看看是不是已经能够显示全部日期了呢？
　　接下来，把月份切换与中继器日期显示结合啦
　　以点击上月为例，点击时，更新中继器的内容，且切换到上一个月时，日期定为到1号且高亮（看下电脑的日期，月份切换时，选中高亮每月1号日期）。
　　选择中继器的更新行，添加用例，满足条件〔〔TargetItem。indexamp；gt；0〕〕更新内容。
　　点击下月同理操作。
　　日历操作就完成了，快去浏览器里预览下吧
　　原型预览：http：59lgso。axshare。com