前篇经验分享了axure有关设计时候选择框的方式，与时候分歧的是日期选择框涉及的是选择日期。这里再为大师介绍关于日期选择框的设计方式。
工具/原料
- Axure 9
方式/步骤
- 1
首先我们在Axure中拖动一个矩形作为日期选择呈现，定名为日期选择框，并按需设计结果，这里我设计悬停及选中为浅蓝色
- 2
接着拖动一个矩形框作为承载日期的底部面板，在样式中设计暗影结果
- 3
接着建造相关日期，相关箭头可以在阿里巴巴矢量图标库找到。
1、拖动两个矩形作为年和日期摆放，用两种箭头作为年和月的调整，即点击双箭头跳上一年下一年的结果，单箭头跳换上个月下个月的结果。同时为箭头设置悬停结果
- 4
接下来设计日期，不属于本月的时候字体较属于本月的更灰些，同时鼠标移至对应日期时字体变为蓝色结果
- 5
之后将有关日期的组归并转换为动态面板，并设置为埋没
- 6
在日期选择框中设计事务交互，当点击时切换显示动态面板并标的目的下滑动、埋没动态面板并标的目的上滑动。如图
- 7
接下来设计选中相关日期时，日期选择框文本变为选中日期的时候，以1号为例，新建单击交互事务，
1、当点击时日期选择框为当前年代（即一起头用来暗示2019年12月的矩形）文本值加上选中的日期。
2、动态面板标的目的上滑动埋没
3、设计完事务后点击预览没问题之后将1号上的事务复制黏贴到其他可选择的日期上
4、之后点击预览，可以看见根基的日期选中结果完当作
- 8
接下来我们要设计关于年和月的切换。关于这部门的思绪大致如下：
因为每一年每个月所对应的日期都是纷歧样的，所以需要操纵动态面板成立多个状况，当点击时设置动态面板切换到对应的状况即可。有乐趣的伴侣可以思虑一下如何设计。
- 9
因为Axure演示原型时不需要这么精确，所以我们可以点击相关箭头时使文本酿成对应文本就行，可是问题在于我们没法子知道当前点击时需要酿成什么文本，点击了几多次。所以要操纵全局变量来实现这个结果。
- 10
回到年代的矩形框，我们先新建两个全局变量，一个作为年，一个作为月，然后默认年为2019，月默认为12。
- 11
关于箭头<的逻辑如下：
当点击<时，
1、判定当前月是不是1月，若是是1月，全局变量year减一，全局变量month值为12月。
2、若是不是1月就全局变量month减一
关于年代的文本值为year年month月
- 12
关于箭头>的逻辑如下：
1、若是当前月为12月，全局变量year加一，全局变量month值为1月
2、若是当前月不是12月，则全局变量month加一
关于年代的文本值为year年month月
- 13
关于箭头《的逻辑比力简单，点击时全局变量year-1即可，最后再设置关于年代的文本值为year年month月。
箭头》同理，点击时全局变量year+1即可，最后再设置关于年代的文本值为year年month月。如下图
- 14
最后再点击预览，根基的日期选择器交互结果就完当作了
