classification: 实战axure
title: 在axure中使用repeater构建日历组件
tag: axure repeater 动态面板``日历
author: 嘟嘟宝嘟
Date: 2020年12月9日

在axure中使用repeater构建日历组件

这个组件着实废了作者很大的心思，主要是对日期的函数不是特别清楚导致的不断返工，最后参考了不少其他的设计才完成，大概花了两天五六个小时才完成。

1. 原型需求

具体的需求就不详细说了，大概参考一下jeecg框架中日历组件的样式与操作，本来想用中文的年月日格式，但是一直在犯错，最后迫不得已，还是使用了mm/dd/yyyy的日期格式。

原型需求参照的jeecg框架下的日历组件

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事件：

repeater的Loaded事件

这样初始化了日历月份牌所选月份的参数varThisDate为当前月。

3.1.2. item的loaded事件

1. 当加载月份牌的第一条数据时，我们要做几项工作：

Item Loaded事件步骤一

1. 排序日期（动态日期）设为当前所选月第一天；
2. 设定这个月的1日是星期几，在这里用到了[[runningDate.getDay() + 1]]，之所以这样，是因为我们把周日放在了每周的第一天，所以需要+1；
3. 设定所选月的最后一天是几号[[startDate.addMonths(1).addDays(-1).getDate()]]，[[addmonths(1)]]得到下一个月的1号（startdate是1号），[[adddays(-1)]]这是所选月的最后一天，[[getdate()]]得到最后一天的日期；
4. 给月份牌的月份赋值；
5. 给参数当前时间（注意是今天）所属月份赋值[[runningDate.getMonth()]]

2. 如果写入的这个日期不属于这个月

[[Item.index < firstDayOfWeek \ Item.index >= lastDayOfStartMonth + firstDayOfWeek ]]

Item Loaded事件步骤二

1. 显示其他月日期的样式框；
2. 隐藏当前月的样式框；
3. 在其他月的日期写入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]；

3. 如果写入的这个日期属于这个月

[[Item.index >= firstDayOfWeek && Item.index < lastDayOfStartMonth + firstDayOfWeek]]

Item Loaded事件步骤三

1. 隐藏其他月日期的样式框；
2. 显示当前月的样式框；
3. 在所选月的日期写入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]；

实际写的时候没有1.2.两个操作，这是因为当前月样式框在其他月样式框之上。

4. 对于今天的处理

判断这个日期
[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getMonth()]]/[[runningDate.addDays(-firstDayOfWeek + 1).getFullYear()]]
是不是今天[[Now.getDate()]]/[[Now.getMonth()]]/[[Now.getFullYear()]]

Item Loaded事件步骤四

1. 显示今天的样式框；
2. 隐藏其他月日期和当前月日期的样式框；
3. 在今天日期写入日期[[runningDate.addDays(-firstDayOfWeek + 1).getDate()]]；

5. 选中情况的处理

当该日期被选中后的表现

Item Loaded事件步骤五

其中[[day]]变量为样式框（根据情况）的日期。

6. 最后

Item Loaded事件步骤六

开始写下一条数据。

所有的这些都写完后，日历组件的核心部分就写完了，剩下的就是各种动态交互的工作了。我们可以通过预览看到当前月份牌的效果：

月份牌预览

可以看到默认显示当前月的日历月份牌，其中今天被进行了标记。

3.2. 翻动月份牌

3.2.1. 通过点击< >按键按月翻动月份牌

上月按钮< 的click事件

1. 更新所选月（varThisDate）参数标签，月份减一。
2. 更新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输入日期

当输入日期并按下回车键：

手工输入日期

现在，一个基本能够满足原型设计需要的日历组件就设计完成了。

最终展示效果（可以动态操作）