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

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

 

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、点击关闭，隐藏日期选择组合。这个交互设置好之后，千万不要忘记，将日期选择组合再改为隐藏。

 

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

 

 

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