Axure设计之日期选择器（年月选择）

在系统中，日期选择器经常会用到，包括日历日期的选择、日期时间的选择和日期范围的选择，一般是下拉列表的形式进行选择。Axure没有自带的日期选择器，下面教大家如何在Axure中制作真实日期选择（年月选择）效果的下拉列表选，下面先从基础的年月选择开始。

一、效果展示

1、点击年月选择器弹出年月选择的下拉框，在里面可以选择年份和月份；

2、年份载入时获取系统时间得到当前年份，可通过左右箭头进行切换年份选择；

3、月份固定12个月份，点击之后选择框显示当前选择年月；

原型预览地址：https://atrf3h.axshare.com

二、实现思路

1、下拉选择的月份肯定是固定的从01~12，玩不出什么花来；

2、年份需要在初始化加载时赋予当前系统年份，使用函数表达式[[Now.getFullYear()]]得到年份；

3、年份的选中通过左右箭头，对年份做加减；

4、单击选择月份，需要给年月日期选择框设置文本，这里通过定义两个变量，分别取年份和当前选中月份的文本值。

三、实现步骤

1、拖入两个矩形，分别命名“年月选择器”和“年月下拉选择列表”，设置“年月选择器”样式及交互样式，重新对“年月下拉选择列表”选择形状，并调整样式，如下：

 “年月下拉选择列表”右击选择形状，进行样式调整。

 2、添加年份文本、左右箭头图标、月份（拖入圆形）元素，月份注意一下，先拖入一个圆形，月份命名“01”，先对月份“01”进行交互样式、事件设置，然后复制11个，这样不用对其他月份单独设置，最后将下拉选择所有元素选中组合到一起“下拉选择组合”，方便后面对下拉选择框整体的控制。

3、设置年份文本、左右图标的交互事件。

4、设置月份的交互事件

5、最后将“下拉选择组合”设为隐藏，再设置“年月选择器”交互事件。

原型下载地址：https://download.csdn.net/download/u010709330/88250576 （0积分下载、无任何套路）

~~如果觉得本文还不错，对你有帮助，请帮忙点个赞吧！~~