Axure设计之日期时间范围选择器 axure日期选择器控件
xsobi 2024-12-17 17:06 1 浏览
在产品设计和原型制作过程中,日期时间范围选择器是一个常见的需求。Axure作为一个强大的原型设计工具,能够帮助我们快速实现这一功能。通过利用Axure的动态面板、中继器、文本框、按钮以及时间函数,我们可以轻松制作一个功能完备的日期时间范围选择器。以下是一个详细的步骤指南,帮助你实现这一目标,包括如何载入时获取对应的年月日、时分秒,并使用6个时间函数。
下载地址:【免费】Axure设计之日期时间范围选择器.rp资源-CSDN文库
步骤指南
1. 创建基本框架
- 动态面板:首先,在Axure画布上拖放一个动态面板,这个面板将作为日期时间选择器的容器。
- 文本框:在动态面板内,添加两个文本框,分别用于显示开始时间和结束时间。
- 选项组合:设计好日期选择时间选择组件,一个用于选择开始时间,另一个用于选择结束时间。
2. 设置时间函数
Axure支持使用JavaScript函数来动态获取和处理数据。以下是我们将使用的6个时间函数:
- Now.getUTCFullYear():使用世界标准时间获取当前日期对象的“年份”部分,返回四位数值。
- Now.getMonth():获取日期对象的“月份”部分,返回数值(1 ~ 12)。
- Now.getDate():获取日期对象返回一个月中的日期数字(1 ~ 31)。
- Now.getHours():使用世界标准时间获取当前日期对象的“小时”部分,返回数值(0 ~ 23)。
- Now.getMinutes():使用世界标准时间获取当前日期对象的“分钟”部分,返回数值(0 ~ 59)。
- Now.getUTCSeconds():使用世界标准时间获取当前日期对象的“秒数”部分,返回数值(0 ~ 59)。
3. 载入时获取当前时间
在Axure的“页面加载时”事件中,我们可以使用这些函数来设置文本框的初始值。例如:
- 开始时间文本框:使用[[Now.getUTCFullYear()]]-[[Now.getMonth() + 1]]-[[Now.getDate()]] [[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getUTCSeconds()]]来设置初始值。注意月份需要加1,因为getMonth()函数返回的是0-11的数值。
- 结束时间文本框:可以设置为相同的初始值,或者根据需求设置为未来的某个时间。
4. 添加时间选择功能
- 按钮点击事件:为每个选择时间的按钮添加点击事件。点击时,弹出一个新的动态面板或窗口,用于选择具体的日期和时间。
- 日期选择:可以使用Axure的日期选择器小部件,或者自定义一个日期选择界面。
- 时间选择:可以使用类似的方法,创建一个时间选择器界面,通过文本框和中继器实现小时和分钟的选择。
5. 更新文本框值
在选择完日期和时间后,将选择的值更新到对应的文本框中。这可以通过设置文本框的“值”属性来实现,使用变量或全局变量来存储和传递选择的时间值。
6. 验证和格式化
- 验证:确保选择的时间范围是有效的,即结束时间不早于开始时间。
- 格式化:根据需要格式化显示的时间值,例如将日期和时间分开显示,或者使用特定的格式。
总结
通过以上步骤,你可以在Axure中创建一个功能完备的日期时间范围选择器。这个选择器不仅可以帮助你在产品设计阶段更好地展示时间选择功能,还可以作为用户测试和反馈的重要工具。利用Axure的动态面板、中继器、文本框、按钮以及时间函数,你可以灵活实现各种复杂的时间选择需求。希望这篇指南对你有所帮助,祝你在Axure原型设计中取得更好的成果!
相关推荐
- 好用的云函数!后端低代码接口开发,零基础编写API接口
-
前言在开发项目过程中,经常需要用到API接口,实现对数据库的CURD等操作。不管你是专业的PHP开发工程师,还是客户端开发工程师,或者是不懂编程但懂得数据库SQL查询,又或者是完全不太懂技术的人,通过...
- 快速上手:Windows 平台上 cURL 命令的使用方法
-
在工作流程中,为了快速验证API接口有效性,团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间,而且促进了团队效率的提升。对于使用Windows系统的用户来说,这里有一套详细...
- 使用 Golang net/http 包:基础入门与实战
-
简介Go的net/http包是构建HTTP服务的核心库,功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持,可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...
- #小白接口# 使用云函数,人人都能编写和发布自己的API接口
-
你只需编写简单的云函数,就可以实现自己的业务逻辑,发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程,进入开放平台我的接口-在线接口编程,设计一个新接口,设计和配置好接口参...
- 极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:iN在之前和大家说过,在iN的家里是没有墙面开关的。...
- window使用curl命令的注意事项 curl命令用法
-
cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...
- Linux 系统curl命令使用详解 linuxctrl
-
curl是一个强大的命令行工具,用于在Linux系统中进行数据传输。它支持多种协议,包括HTTP、HTTPS、FTP等,用于下载或上传数据,执行Web请求等。curl命令的常见用法和解...
- Tornado 入门:初学者指南 tornados
-
Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...
- PHP Curl的简单使用 php curl formdata
-
本文写给刚入PHP坑不久的新手们,作为工具文档,方便用时查阅。CURL是一个非常强大的开源库,它支持很多种协议,例如,HTTP、HTTPS、FTP、TELENT等。日常开发中,我们经常会需要用到cur...
- Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介
-
本章涵盖使用Actix提供静态网页...
- 我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些
-
这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话,这是一次比较曲折的Bug跟踪之旅。10月28日,我们在GitHub上提...
- linux文件下载、服务器交互(curl)
-
基础环境curl命令描述...
- curl简单使用 curl sh
-
1.curl--help#查看关键字2.curl-A“(添加user-agent<name>SendUser-Agent<name>toserver)”...
- 常用linux命令:curl 常用linux命令大全
-
//获取网页内容//不加任何选项使用curl时,默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...
- 三十七,Web渗透提高班之hack the box在线靶场注册及入门知识
-
一.注册hacktheboxHackTheBox是一个在线平台,允许测试您的渗透技能和代码,并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战,并且模拟真实场景,其风格更倾向于CT...
- 一周热门
- 最近发表
-
- 好用的云函数!后端低代码接口开发,零基础编写API接口
- 快速上手:Windows 平台上 cURL 命令的使用方法
- 使用 Golang net/http 包:基础入门与实战
- #小白接口# 使用云函数,人人都能编写和发布自己的API接口
- 极度精神分裂:我家没有墙面开关,但我虚拟出来了一系列开关
- window使用curl命令的注意事项 curl命令用法
- Linux 系统curl命令使用详解 linuxctrl
- Tornado 入门:初学者指南 tornados
- PHP Curl的简单使用 php curl formdata
- Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- webgl开发 (24)
- parse (24)
- c 视频教程下载 (33)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)