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

2025-12-16 13:23:37

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6、绘制具体的日历。拖动一个表格,添加七行七列,用于显示具体的日期。首行用于标识星期几。然后标黑不属于本月的日期。

PS:由于只是简单的进行日历项目的绘制,而且原型的演示也不会深入到这种程度的细节,所以就不按照真是年月进行绘制了。

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

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

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

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

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

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

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

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢