【教程】用日历图片制作日期选择器

180 篇文章 10 订阅
83 篇文章 13 订阅

日历部件在工作中是一个通用的部件,比如说像旅游网站,网站后台日期的选择。

 

Axure里面有一个简单制作日历部件的方法,就是使用文本框部件,将文本框部件的类型选择为日期。预览之后,点击就可以看到日期选择的效果。

 

 

这种方式做的日期选择器在样式方面比较单一,如果你的要求很简单的话,可以直接用这个。那如果需要做一个比较精美的日历,这个就满足不了了。如果是借助已经日历的图片,可以怎么做呢?

 

我们做这个日期选择器要具体要有什么效果呢?来看看

 

1、点击日历图标出现日期选择面板,点击其中一个日期,日期在文本框显示。
2、点击清空按钮,删除文本框中的日期。
3、点击今天,在文本框中显示当前日期。
4、点击关闭,关闭日期选择面板。
 

 

先把元素准备好,一个文本框,一个日历图标,一个日期选择的图片,一个清空按钮,一个今天按钮,一个关闭按钮。搭建好我们需要的界面。

 

准备好之后,就可以根据我们的实现效果去做交互了。

 

1、 把日历图片和今天、关闭按钮组合一下,并且设置为隐藏。在点击日历图标的时候把这个组合显示出来就行了。

 

 

要对日期做选择,先把隐藏状态取消。从部件库里面拖出热区部件,调整成合适的大小后覆盖要选择的日期数字上。这里以7号8号做范例,大家可以用其他的日期。在热区的单击时时间上做交互设置,设置文本框的文字为“2013-8-7”和“2013-8-8”

 

 

2、清空日期。主要在清空按钮上设置文本框值为空就行了,设置参考前面一步,只需把值删除掉就行了。

 

 

3、点击今天按钮,调用系统日期变量[[Now.getFullYear()]]-[[Now.getMonth()]]-[[Now.getDate()]],将当前日期填入文本框。直接就可以获取到当天的日期了。

 

 

如果是选择设置今天的前一天,前一月等其他日期,只需要在现在的这个获取时间的表达式上做一点修改就行了。比如前一天,就将具体的日减去一天即可,完整的表达式就是:[[Now.getFullYear()]]-[[Now.getMonth()]]-[[Now.getDate()-1]]

 

4、点击关闭,隐藏日期选择组合。这个交互设置好之后,千万不要忘记,将日期选择组合再改为隐藏。

 

到这里交互就全部都做好了。来看看完整的效果是怎么样的吧

 

 

这里我们直接用的是图片做的,在制作上可以节省很多时间。如果你想要自己搭建整个界面,当然是没有问题的,制作的思路与这个是一样的,相信大家可以做得比这个更好!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值