Axure绘制日期选择器

大家在日常的原型绘制中经常会使用到日期选择器，包括在设置生日、设置收发货时间、设置配送时间等等业务场景都会遇到使用日期选择器，那么如何绘制日期选择器呢？

一、功能分析

这里由于原型基本只是给研发/UI人员说明相关的功能，在这里就不做特别复杂的交互了，比如切换不同的月份展示正确的对应天数与星期，毕竟要使用axure实现完整的日期选择器功能还是比较复杂的，这里实现的功能主要是

①点击年的前后切换键，实现年的加减

②点击月的前后切换键，实现月的加减

③点击日期，将当前选择的年月日赋值到输入框

二、原型绘制

1.首先绘制日期输入框

由于axure自带的元件库中的输入框边框比较丑，所以咱们自己定义一个背景，先拖入一个矩形，作为输入框的背景，宽高设置为250*40，边框设置自己喜欢的颜色即可

拖入文本框元件，宽高定义为205*30，然后移动至合适的位置，并设置默认的提示文字，隐藏原有的边框。不要忘了命名其为输入框，方便后续选中时为其赋值。

2.制作日期选择器

①首先绘制顶部的年月选择功能，即下图所示部分

大家可以提现到iconfont下载对应的四个图标，当然也可以自己使用axure绘制。首先拖入一个矩形，定义宽高为250*40，背景颜色自己定义即可，然后将提前下载好的图标拖至合适的位置，并新增年和月的文本标签元件，用于展示年月后的文本展示

②为切换年月的按钮添加交互事件

为前年的按钮添加交互鼠标单击时的交互事件，即当点击前年时，年自动减一

同理为明年、上月、下月的按钮分别添加对应的增减年和月的交互事件

③绘制选择天的界面

在这里我们使用表格元件，绘制一个6*7的表格，样式的话可以把表格的分割线去掉，然后按照上图输入对应的年月日，这里就不输入上个月和下个月的日期了

首先我们需要标识出系统当前的日期，即20日，我们可以把20号加粗并使用颜色进行区分

将年月日的选择元件选中后转化为动态面板，并命名为日期选择器

④添加选择天时的交互事件

先选中1号，大家如果想添加鼠标悬停样式或者选中样式可以自己编辑，我这里就不给大家设置了，添加鼠标单机时的交互事件，为输入框直接赋值当前记录的年月日；并设置单击时，隐藏日期选择器

复制该交互事件，粘贴到所有的单单元格上

并设置日期选择器默认为隐藏

⑤设置输入框的交互事件

当鼠标单击时，显示日期选择器

下载一个日历的小图标放在上边美化一下

到这里为止，日期选择器就绘制完毕了，样式如果大家觉得不好看的话，大家可以自己添加就可以。

三、效果展示