如何使用Axure：[3]创建日期选择器DatePickup

在很多的软件产品中，常常可以看到，点击一个按钮，然后下方弹出一个日历控件，然后我们点击选择具体的日期后，就在文本框中有了所选择的日期。此篇就为大家介绍一种最简单的日期选择器的制作。

工具/原料

Axure RP

开始

1、打开Axure，新建一个空白文档。

准备

1、拖动一个文本输入框（Text Field）作为显示/输入日期的地方。并命名为「DateShow」

2、拖动一个矩形，用于点击弹出日历。并命名为「Pickup」

3、拖动一个矩形，转换成动态面板，用于呈现弹出的日历。并命名为「Cal」

绘制日历

1、双击进入「Cal」动态面板状态1的编辑界面，并删除里面的所有内容。

2、制作两个箭头，用于对「年」「月」进行切换。

3、拖动一个标签（Label），用于呈现当前选择的年，并命名为「Year」。

4、重复步骤2步骤3，绘制「月」，并命名为「Month」。然后再加入两个标签，编辑这两个标签上的文字为年、月。

5、添加一个按钮，编辑上面的文字为「今」，然后命名为「Today」，当单击这个按钮之后，将会跳转到今天。

6、绘制具体的日历。拖动一个表格，添加七行七列，用于显莲镘拎扇示具体的日期。首行用于标识星期几。然后标黑不属于本月的日期。PS：由于只是简单的进行日历项目的绘制，洹彭岣啬而且原型的演示也不会深入到这种程度的细节，所以就不按照真是年月进行绘制了。

添加事件

1、回到最初的编辑面板，设置「Cal」动态面板的可见性为「假」

2、为「Pickup」矩形添加单击事件。当用户单击这个按钮的时候，弹出日历窗体。

3、为「Pickup」矩形藜局腑载添加单击事件。当用户单击这个按钮的时候，如果日历窗体已经显示了，那么再次单击的时候，需要将其隐藏。

结束

1、到此为止，已经有了一个非常简单的日鲋逐噗瘀期选择部件了。后续，我们可以为动态面板里面的箭头添加事件，用来切换具体的日历项目。还可以为表格中的单元格添加单击事件，当用户单击表格中的单元格时，将这一天添加到文本框中。按F5进行预览。