classification: 实战axure
title: 在axure中使用repeater构建日历组件
tag: axure repeater 动态面板``日历
author: 嘟嘟宝嘟
Date: 2020年12月9日
在axure中使用repeater构建日历组件
这个组件着实废了作者很大的心思，主要是对日期的函数不是特别清楚导致的不断返工，最后参考了不少其他的设计才完成，大概花了两天五六个小时才完成。
1. 原型需求
具体的需求就不详细说了，大概参考一下jeecg框架中日历组件的样式与操作，本来想用中文的年月日格式，但是一直在犯错，最后迫不得已，还是使用了mm/dd/yyyy的日期格式。
2. 组件准备
2.1. 日期展示框
由一个输入框和日历图标组成：
当点击日期展示框的时候弹出日历主体，日期的输入在日历主体上进行。
2.2. 日历主体
日历主体存在于一个动态面板canlenedar中
组件构成：
其中group yr ctr和mon ctr是年份翻页和月份翻页。
其中最重要的是repeaterdays of month，它是日历的核心。
2.3. 参数动态面板
这个动态面板varDays的作用就是提供各类参数，为动态效果传参。
3. 实现步骤
3.1. 从repeaterdays of month开始
3.1.1. repeater的Loaded事件
回顾需求，当开始加载日历组件时，日历显示当前月的月份牌，所以我们首先定义repeater的Loaded事件：
这样初始化了日历月份牌所选月份的参数varThisDate为当前月。
3.1.2. item的loaded事件
- 当加载月份牌的第一条数据时，我们要做几项工作：
- 排序日期（动态日期）设为当前所选月第一天；
- 设定这个月的1日是星期几，在这里用到了[[runningDate.getDay() + 1]]，之所以这样，是因为我们把周日放在了每周的第一天，所以需要+1；
- 设定所选月的最后一天是几号[[startDate.addMonths(1).addDays(-1).getDate()]]，[[addmonths(1)]]得到下一个月的1号（
startdate是1号），[[adddays(-1)]]这是所选月的最后一天，[[getdate()]]得到最后一天的日期；- 给月份牌的月份赋值；
- 给参数当前时间（注意是今天）所属月份赋值[[runningDate.getMonth()]]
- 如果写入的这个日期不属于这个月
[[Item.index < firstDayOfWeek \ Item.index >= lastDayOfStartMonth + firstDayOfWeek ]]
- 显示其他月日期的样式框；
- 隐藏当前月的样式框；
- 在其他月的日期写入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]；
- 如果写入的这个日期属于这个月
[[Item.index >= firstDayOfWeek && Item.index < lastDayOfStartMonth + firstDayOfWeek]]
- 隐藏其他月日期的样式框；
- 显示当前月的样式框；
- 在所选月的日期写入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]；
实际写的时候没有1.2.两个操作，这是因为当前月样式框在其他月样式框之上。
- 对于
今天的处理
判断这个日期
[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getMonth()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getFullYear()]]
是不是今天[[Now.getDate()]]/[[Now.getMonth()]]/[[Now.getFullYear()]]
- 显示
今天的样式框；- 隐藏其他月日期和当前月日期的样式框；
- 在
今天日期写入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]；
- 选中情况的处理
当该日期被选中后的表现
其中[[day]]变量为样式框（根据情况）的日期。
- 最后
开始写下一条数据。
所有的这些都写完后，日历组件的核心部分就写完了，剩下的就是各种动态交互的工作了。我们可以通过预览看到当前月份牌的效果：
可以看到默认显示当前月的日历月份牌，其中今天被进行了标记。
3.2. 翻动月份牌
3.2.1. 通过点击< >按键按月翻动月份牌
上月按钮< 的click事件
- 更新所选月（varThisDate）参数标签，月份减一。
- 更新repeater，看到语句其实什么也没有做，仅仅是重新更新一遍（因为所选月已经发生了变化）
同理，我们可以设定下月按钮>的click事件。
3.2.2. 通过点击<< >>按键按年翻动月份牌
上年按钮<< 的click事件
下年按钮>>的click事件。
3.3. 点击月份牌上的日期
我们在设计月份牌上的日期时使用了四个shape组件：day of this——代表当月的日期；day of other——代表其他月的日期；today——代表今天当天；day bg作为背景板，实现鼠标mouseover效果。
针对所选月当月的日期和其他月的日期操作有所不同。我们先从当月日期入手。
3.3.1. day of this的click事件
前两个set Text方法向日历组件的两个输入框（其中后边的输入框date show不能输入，仅仅是显示）写入所选日期。
看到非常复杂，这是为了将日期和月份统一显示为dd和mm格式。
然后对参数varSelDay varSelMonth varSelYear设置为当前选择日期的年月日；
设置所选日期选中状态样式；
隐藏月份牌。
3.3.2. day of other的click事件
和day of this的click事件类似，但是增加了判断是上个月的日期还是下个月的日期，针对不同的月份需要分别对varthisDate这个参数标签文字内容进行修改，修改后更新数据。
3.3.3. today的click事件
同理，设置today的click事件。
3.3.4. 今天标签的'click`事件
和today的click事件一样，但是把时间换成now。
3.4. 手工在date input输入日期
当输入日期并按下回车键：
现在，一个基本能够满足原型设计需要的日历组件就设计完成了。
