【Axure教程】调用日期选择器并筛选中继器表格

news2025/1/18 8:11:55

今天教大家在Axure里怎么调用代码调用浏览器的日期选择器并对对中继器表格进行日期区间的筛选。调用浏览器日期选择器的好处是,可以选择真实的日期,包括某年某月某日是星期几,哪个二月是29天……都是真实的,那不同的浏览器日期选择器的样式会有所区别,本案例是用谷歌浏览器,而且谷歌也是和Axure标配的,别人浏览器有些插件没有,或者预览Axure时有些不敢,所以建议大家也是使用谷歌。

一、效果展示

1、可以选择真实的日期区间,可以点击上下箭头切换上月或下月,或者点击年月快速选择。

2、根据选择自动调整开始时间和结束时间,例如选择开始时间为2023年8月30日,再选择结束事件为2023年8月1日,这样开始时间小于结束时间,就会自动识别调整为2023年8月1日至2023年8月30日的区间

3、点击查询按钮,可以对中继器表格进行筛选,筛选出在日期区间里面的数据

图片

【原型预览】

https://axhub.im/ax9/2bcd864c6573fb02/#g=1&p=js日期选择器筛选案例

【原型下载】

方式1:加入原型分享群后,可免费分享该原型,请咨询微信522073109

方式2:https://weidian.com/item.html?itemID=3681949369

二、制作教程

1. 通过js调用浏览器的日期选择器

首先我们要新建一个矩形并命名(案例中命名为code1),然后在里面写html代码

我们用<input type=“date”>可以创建一个日期输入框,因为开始和结束有两个日期,所以我们要给他命个名,例如name=“vigo1″,如果需要修改样式的话,也可以直接在里面增加style,例如宽200,高30可以写成:style=”width: 200px; height: 30px;

然后我们用JS调用它,

首先找到 “data-label” 属性为 “code1” 的元素(就是我们上面给矩形的命名)

$(‘[data-label=code1]’).each(function() 

并获取元素内部 <p> 标签的文本内容(就是我们上面调用date的代码)

var paragraphText = $(this).find(‘p’).text();

最后将矩形替换为代码内容就是日期选择器

$(this).html(paragraphText);

这样就在预览时就可以看到一个日期选择器了,然后我们复制一个,需要注意的是第二个的名称和name不能和第一个一致,我们需要修改一下,不然就会冲突了。

2. 选择日期之后将值传回到Axure里

出现日期选择器后,如果选择了日期,我们需要将里面的日期值保存的Axure的全局变量里,不然后续无法对中继器进行筛选,这里我们要先增加一个文本标签,默认隐藏,用于处理逻辑,命名为click1

首先,我们选择name= “vigo1” 的元素,并为其绑定一个 “change” 事件处理函数 $(“input[name=’vigo1′]”).on(“change”, function()

 当日期输入框的值发生变化时,触发click1函数鼠标单击时的交互

$(“[data-label=’click1′]”).trigger(“click”);

鼠标单击click1元件时,我们就讲日期选择器选择的时,

var selectedDate = dateInput.value;

设置为全局变量,这里我们要先增加一个全局变量time1,然后讲选择的日期值赋给它

$axure.setGlobalVariable(“time1”, selectedDate);

这样我们就将日期值保存到全局变量里面了,后面的就回归到axure的原生交互

第二个日期选择器也是同样方式处理,主要名称不能一样,基本就是复制粘贴,改个名就可以了

3. 时间值的处理和比较

接下来我们在增加一个文本标签,命名为时间值1,默认隐藏,只用于事件的比较

我们用设置文本的交互,将全局变量里记录的事件值设置时间值1的文本里。获取到的事件格式是yyyy-mm-dd,但是axure里要比较时间大小需要用date.parse函数,这个函数需要的日期格式为yyyy/mm/dd。

所以在设置文本的时候,我们可以用replace函数将-符号替换成/

图片

然后我们在用date.parse,这个函数可以计算指定时间和1970年1月1日00:00:00之间相差的毫秒数,相当于将日期格式的字符转为纯数字的格式,这样通过比较数字的大小就可以比较时间了。

图片

第二个日期选择器也是同样方式处理,复制粘贴,改个名就可以了

4. 时间值的处理和比较

将两个时间转为数值之后,我们考虑到,会不会有人选择开始时间大于结束时间,例如选择开始时间为2023年8月30日,再选择结束事件为2023年8月1日,实际上他是想选择2023年8月1日至2023年8月30日的区间,所以我们写个交互将他自动调整过来。

我们用几个文本标签先记录两个时间矩形初始的x,y坐标值,如果会发生变化,我们在在载入时用设置文本的交互,设置对应的坐标值

图片

图片

第二个日期选择器也是同样方式处理

选择时间之后根据条件来判断,如果时间值1大于二,就用移动的交互,将日期选择器1移动到记录x1y1的坐标,将日期选择器2移动到记录x2y2的坐标值里

否则,就将日期选择器1移动到记录x2y2的坐标,将日期选择器2移动到记录x1y1的坐标值里

图片

这样就可以自动换位了

5. 中继器表格的制作

中继器里有几列我们就增加几个矩形,案例中分别命名为表1~6,以及操作列。

在中继器表格里增加对应的列,并填写好内容

图片

如果是axure10的话,用链接的交互,将对应列连接到对应元件就可以了,如果是axure89的话,在中继器每项加载时就要用设置文本的交互,将表格对应列的值设置到对应元件上

图片

然后在中继器外面用矩形制作表头,每个矩形和中继器里对应列的矩形宽度一样。

这样表格就出来了。

6. 对中继器表格进行日期区间的筛选

我们增加一个查询按钮,鼠标单击查询按钮时,我们按条件增加交互

第一种情况是,如果时间值1和时间值2的值都不为空,就是都有选时间,并且时间值1小于时间值2,我们就用是筛选的交互,对中继器表格时间列,案例里是第6列进行筛选,这里我们同样要用date.prase函数对第六列的时间值处理,转为标准数字格式,再和时间值1和2比较,这里条件是要大于等于时间1,并且小于时间值2

图片

第2种情况是,如果时间值1和时间值2的值都不为空,就是都有选时间,并且时间值1大于等于时间值2(这里就是时间值1去到右边变成结束时间了),我们就用是筛选的交互,对中继器表格时间列,案例里是第6列进行筛选,这里我们同样要用date.prase函数对第六列的时间值处理,转为标准数字格式,再和时间值1和2比较,这里条件是要大于等于时间2,并且小于时间值1

图片

第3种情况是,如果时间值1和时间值2的值都为空,就是都没有选时间,我们就用移除筛选的交互,将筛选移除即可。

图片

第4种情况是,如果时间值1为空,时间值2不为空,并且时间值1在时间值2的左侧,就是只选择了结束时间。我们就用是筛选的交互,对中继器表格时间列,案例里是第6列进行筛选,这里我们同样要用date.prase函数对第六列的时间值处理,转为标准数字格式,再和时间2比较,这里条件是小于时间值2

图片

第5种情况是,如果时间值1为空,时间值2不为空,并且时间值1在时间值2的右侧,就是只选择了结束时间,但是结束时间是在右侧。我们就用是筛选的交互,对中继器表格时间列,案例里是第6列进行筛选,这里我们同样要用date.prase函数对第六列的时间值处理,转为标准数字格式,再和时间1比较,这里条件是小于时间值1

图片

第6种情况是,如果时间值2为空,时间值1不为空,并且时间值1在时间值2的左侧,就是只选择了开始时间。我们就用是筛选的交互,对中继器表格时间列,案例里是第6列进行筛选,这里我们同样要用date.prase函数对第六列的时间值处理,转为标准数字格式,再和时间1比较,这里条件是大于等于时间值1

图片

最后一种情况是,如果时间值2为空,时间值1不为空,并且时间值1在时间值2的右侧,就是只选择了结束时间,但结束时间是时间值1记录的。我们就用是筛选的交互,对中继器表格时间列,案例里是第6列进行筛选,这里我们同样要用date.prase函数对第六列的时间值处理,转为标准数字格式,再和时间1比较,这里条件是小于等于时间值1

图片

这样我们就完成了调用浏览器日期选择器并筛选中继器表格原型模板的制作了,后续使用也很方便,只需要在中继器表格里填写对应的数据,即可自动生成日期区间筛选的交互效果

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/926259.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

腾讯云服务器多少钱一年?一个月或1小时费用价格明细表

腾讯云服务器租用费用表&#xff1a;轻量应用服务器2核2G4M带宽112元一年&#xff0c;540元三年、2核4G5M带宽218元一年&#xff0c;2核4G5M带宽756元三年、云服务器CVM S5实例2核2G配置280.8元一年、GPU服务器GN10Xp实例145元7天&#xff0c;腾讯云服务器网长期更新腾讯云轻量…

vs2017 错误 RC1015 cannot open include file ‘afxres.h‘.

问题场景&#xff1a; WINDOWS在VS2017环境下编译项目&#xff0c;报错vs2017 错误 RC1015 cannot open include file ‘afxres.h’. 问题排查&#xff1a; 首先&#xff0c;定位到include的文件目录&#xff0c;发现没有这个头文件&#xff1a; 解决方法&#xff1a; 第一种…

【java】【springboot】【idea】springboot项目pom.xml 灰色下划线

解决方案&#xff1a; 这里我们找到了原因&#xff0c;就是因为选择了Ignored Files导致pom.xml文件被设置在maven忽略文件清单中&#xff0c;所以我们将打勾的选项取消&#xff0c;点击Apply,然后点击OK

【精度丢失】后端接口返回的Long类型参数,不同浏览器解析出的结果不一样

1、业务背景 有个同事找我帮他看一个问题&#xff0c;他给前端提供了一个接口。 这个接口是用来反查id的&#xff0c;他这里这个参数正常的返回值应该是 283232039247028226。 但前端反馈他&#xff0c;前端在浏览器&#xff08;火狐&#xff09;获取的值是 283232039247028…

云上百世慧|公开研讨会|WMS仓储物流管理分享(我们在8月31日等你)

市场趋势 在新能源电池行业的迅猛发展中&#xff0c;新能源企业在仓储物流管理中可能面临一系列挑战和问题&#xff0c;这些问题可能因企业规模、产品类型、供应链结构等因素而有所不同。 主要问题包括&#xff1a;物料追溯困难、库存管理复杂、库存过剩或短缺、生产与库存耦…

长胜证券:沪指探底回升涨0.47%,券商、酿酒板块拉升,传媒板块活跃

24日早盘&#xff0c;沪指盘中震动回落&#xff0c;接近午盘快速拉升走高&#xff1b;深成指、创业板指强势上扬&#xff1b;北向资金今天转向&#xff0c;早盘积极出场&#xff0c;半日净买入近30亿元。 到午间收盘&#xff0c;沪指涨0.47%报3092.88点&#xff0c;深成指涨1.1…

Android 热修复核心原理

dexopt 在Dalvik中虚拟机在加载一个dex文件时&#xff0c;对 dex 文件 进行 验证 和 优化的操作&#xff0c;其对 dex 文件的优化结果变成了 odex(Optimized dex) 文件&#xff0c;这个文件和 dex 文件很像&#xff0c;只是使用了一些优化操作码。 dex2oat ART 预先编译机制&a…

Redis概述安装

Redis概述&安装 什么是RedisRedis的应用场景Redis安装Redis常用命令前台启动&#xff08;不推荐&#xff09;后台启动&#xff08;推荐&#xff09;客户端关闭Redis 什么是Redis Redis是用C语言开发的一个开源的高性能键值对&#xff08;key-value&#xff09;数据库&…

如何提高企业生产效率与安全性?设备报修管理系统有什么用?

随着现代工业技术的不断发展&#xff0c;企业生产设备变得越来越复杂&#xff0c;出现故障的可能性也随之增加。设备故障不仅会降低企业的生产效率&#xff0c;还可能导致生产安全事故的发生。为了更好地管理维护生产设备&#xff0c;提高生产效率和安全性&#xff0c;本文将向…

【Python Flask+Nginx】实现HTTP、WS (两步实现,简单易懂)

目录 一、创建Flask应用 二、部署Nginx 2.1 下载Nginx 2.2 修改Nginx配置文件 2.3 启动Nginx 三、测试 一、创建Flask应用 首先我写了如下一个基于Flask的Demo&#xff0c;该Demo包含两个接口一个是HTTP接口&#xff08;http://127.0.0.1:5000&#xff09;&#xff0c…

容器内执行命令

上篇文章向读者介绍了一个Nginx的例子&#xff0c;对于Nginx这样一个容器而言&#xff0c;当它启动成功后&#xff0c;我们不可避免的需要对Nginx进行的配置进行修改&#xff0c;那么这个修改要如何完成呢&#xff1f;且看下文。 依附容器 docker attach 依附容器这个主要是…

问道管理:年中业绩预报规则?

跟着市场经济的发展&#xff0c;成绩预告已经成为股市中最重要的信息之一。在股票投资范畴&#xff0c;咱们通常以为&#xff0c;股票价格受到市场供求关系的影响。供求关系取决于投资者对该股票的预期。因此&#xff0c;猜测股票价格要重视公司的成绩预告。 那么&#xff0c;年…

苹果等公司被迫放弃修复安全漏洞,英国法规:发布安全更新需报备

此外&#xff0c;根据《调查权力法 2016》修订的提议&#xff0c;不仅设备制造商需要事先通知英国部门发布重要安全更新&#xff0c;还要按照政府的要求放弃修复安全漏洞。这意味着&#xff0c;苹果等公司可能会面临来自政府的压力&#xff0c;被迫放弃修复安全漏洞&#xff0c…

openapi中job提交

openapi中job提交 创建job查看job查看job 的描述查看job 的日志 创建job protocolVersion: 2 name: lenet_gpu_pytorch112_jiaxiaolei_20230825_1013 type: job jobRetryCount: 0 prerequisites:- type: dockerimageuri: nvcr.io/nvidia/pytorch:22.05-py3name: docker_image_0…

华为OD机试 - 最佳植树距离 - 二分查找(Java 2023 B卷 100分)

目录 一、题目描述二、输入描述三、输出描述四、备注说明五、二分查找六、解题思路七、Java算法源码八、效果展示1、输入2、输出3、说明 一、题目描述 按照环保公司要求&#xff0c;小明需要在沙化严重的地区进行植树防沙工作&#xff0c;初步目标是种植一条直线的树带。 由于…

RIP配置与协议分析

一、实验目的&#xff1a; 通过该实验学习RIPv1和RIPv2协议&#xff0c;能够通过GNS3模拟环境并用wireshark抓包分析RIPv1和RIPv2协议的报文格式。 二、预备知识: 三、实验过程&#xff1a; part1: 对GNS3进行配置&#xff0c;配置如下这个实验环境&#xff1a; 操作步骤如下…

【Linux】网络层之IP协议

IP协议 网络层网络层协议的作用IP协议的格式IP协议是如何管理地址的特殊的IP地址公网IP和私网IP 网络层 在整个互联网中&#xff0c;为了能够标识每台机器&#xff0c;所有连接互联网的机器都会被分配一个IP地址&#xff0c;实现端到端之间的数据透明传送&#xff0c;具体功能…

Qt 打开文件列表选择文件

1. 创建 Qt 工程&#xff0c;并添加几个简单控件 这里笔者选用的是 QMainWindow&#xff0c;创建好工程后在 ui 界面设计中添加 QLineEdit、QPushBtton至少这两个控件&#xff0c;如下图摆放。 2. 头文件中添加相关操作 在 mainwindow.h 中添加所要用到的所有头文件。 #incl…

ROS通信机制之话题(Topics)的发布与订阅以及自定义消息的实现

我们知道在ROS中&#xff0c;由很多互不相干的节点组成了一个复杂的系统&#xff0c;单个的节点看起来是没起什么作用&#xff0c;但是节点之间进行了通信之后&#xff0c;相互之间能够交互信息和数据的时候&#xff0c;就变得很有意思了。 节点之间进行通信的一个常用方法就是…

开学季平替电容笔怎么选?性价比电容笔牌子排行

随着暑假的尾声接近&#xff0c;开学季马上就要来了。现在&#xff0c;电容笔已经成为在线办公和在线教育领域的热门产品&#xff0c;平替会代替苹果原有的电容笔吗&#xff1f;实际上&#xff0c;你并不需要花这么多钱去买一个原装的苹果电容笔。一支普通的平替电容笔&#xf…