日期选择框如何提交_Axure8制作日期选择器(日历控件)

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-29 20:53   11   0

dbd24fa8e71bd8e63dfa71d7953c9628.png

日历控件为常用控件,但Axure自带的元件库里是没有,我们需要手动制作,今天给大家讲一下如何制作,如果需要源文件的朋友可以留言。

先看效果:

1、单选日历控件

c50cf6cae94ecced6a9d2f2fd9b563b5.gif

2、双选日历控件

73e12e135f28e1c71666a482c030377a.gif

一、实现原理:

1、界面部分:

c24e8be47fcbca03529a216a23148dbe.png

2、事件部分:

①日期框中增加鼠标点击事件,弹出动态面板(日期选择框)

②日期选择弹窗中,日历数据是一个中继器,鼠标选择中继器的某个单元后值赋给日期框。

二、实现过程:


1、添加一个矩形命名为Input Message,一个动态面板命名为Calendar,设定一个全局变量Day(用于存储选择的日期),为input Message添加事件:显示 Calendar。

7308b2136129d8f448d853f6e27a1c6e.png

2、打开动态面板Calendar,为state1添加一个中继器,中继器中记录总数为35条,空的日期为空,其余从1~30,如下图

1642dd7046d6978404480b76bd24f338.png

3、设定中继器的展示样式,排列格式为水平,网格排布,每排7个

f33b083091ec891cf9b4e56048976fbd.png

4、双击中继器进入单元编辑,修改为透明的正方形(下图左侧 中继器单元)

①设定样式:选择形状为圆形,鼠标悬停颜色与鼠标按下颜色

②添加事件:

· 用户选择一个日期后,记录当前日期到全局变量Day中。

· 设定日期框 = 当前选择日期

· 隐藏日期弹出窗

14c52ec8408d26caf594fc99d0424542.png

运行一下,即可看到效果,点击【日期框】弹出弹窗【Calendar】,选择某个日期,会自动填写日期。

有问题,需要源文件的请留言,支持请点赞哈~~


20200414补充双日历选择实现办法:

Repeater Cell(中继器单元)中增加如下事件:

66cbdb609fef22d4c14a9bf82846de61.png

说一下原理:

创建两个变量StartDay,EndDay,分别是起始日期。

StartDay为空时,选择的数据存入StartDay,StartDay不为空时,选择的数据存入EndDay。

剩下的都是一些控制样式动作。

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP