首先看一下效果：第一张图为界面原始效果，第二张图为点击箭头之后的变化图。
首先我们得知道客户使用日历的先后顺序：显示日历——选择年份月份——选择日期
第一步：显示日历
显示内容：当前年份月份，以及日期。年份月份都很好知道，通过电脑系统即可知道当前年份和月份，方法：获取年份，[[Now.getFullYear()]]；获取月份，[[Now.getMonth()]]；
显示日期就比较麻烦了，要确定每月第一天是星期几，确保每一个单元格内容正确显示，经过多次尝试最终得出正确打开方式：
计算每月第一天：
蔡勒（Zeller）公式：w=y+[y/4]+[c/4]-2c+[26(m+1)/10]+d-1；w：星期；c：世纪-1；y：年（两位数）；m：月（m大于等于3，小于等于14，即在 蔡勒公式 中，某年的1、2月要看作上一年的13、14月来计算，比如2003年1月1日要看作2002年的13月1日来计算）；d：日；[ ]代表取整，即只要整数部分。(C是世纪数减一，y是年份后两位，M是月份，d是日数。1月和2月要按上一年的13月和 14月来算，这时C和y均按上一年取值。)
蔡勒公式得出的结果除以7 取余，余数即为每月第一天对应的是星期几，如：2017年09月第一天为星期五。
需要注意的是：蔡勒公式计算中 取整 问题，Axure 里面没有取整计算方式，所以我一开始使用的是 [[LVAR.toFixed(0)]]，这个方法是保留0位小数，在一开始的设计中，九月份能正常显示，但是十月份第一天就往后推一天（本来是周日，变成周一），后来查资料发现这个公式有四舍五入的效果，而恰好在蔡勒公式中的 [26(m+1)/10] 在十月份的时候是28.6，那么在最终结果上就多出“1”，所以十月份第一天就往后推了一天；问题找到，解决问题：将 [[LVAR.toFixed(0)]] 替换为 [[LVAR.split('.',1)]]。该函数意为：将字符串以“.”分割为1个字符串数组，成功解决问题。
在单元格中正确显示日期：将每个单元格设置名称，从第一个个开始设置为1，第二个设置为2，第三个设置为3，第四个。。。，以此类推，将所有单元格设置名称（星期所在单元格除外）。给每个单元格赋值：[[This.name-MinuendNumber]]，This指的是当前单元格；
完成以上内容基本上可以实现日历显示，只不过我们还需注意各个事件的先后顺序，以及事件的执行时机，进过诸多尝试得出如下执行顺序：显示年份月份的控件：执行 载入时 获取年份月份，获取蔡勒公式中需要的C和Y，并对控件赋值。执行 文本改变时 给月份赋值，同时将日历表显示。
说明：X对应的是蔡勒公式中的年份，Y对应的是蔡勒公式中的世纪数（世纪数不需要减一）。Z对应的是月份数。
日历表：执行 显示时 ，判断月份，根据月份设置月份天数，计算月份第一天的星期数，改变所有单元格的选中状态；
单元格：执行 选中改变时 根据 [[This.name-MinuendNumber]] 结果来判断单元格赋值情况，执行 鼠标单击时 给某一控件赋值。这个就很随意了，直接将单元格内容赋值到某一控件。
第二步：改变年份和月份
这一步是整个日历表最重要的一部分，他是实现日历表动态变化的关键。仅以左侧箭头来说明问题：执行 鼠标单击时 事件：根据月份来判断年份和月份的增减，给显示年月的控件重新赋值，日历表隐藏，日历表显示；
说明：左侧箭头“减”：Case1：月份等于1时，年份减少，月份为12月；Case2：月份大于1时改变月份。
到这，一个完整的日历表就完成了，下面给一个事件执行顺序图，以帮助大家的理解。
另外，需要注意的是单元格点击事件需要作出判断，单元格内容为空的时候作出合理的 *** 作。
实际上在大多数的原型设计中不需要这么复杂的功能设计，只需要展示即可，单复杂的设计有助我们去理解Axure中事件执行的先后顺序，函数的功能等等，所以没事的时候不妨自己设计几个比较好玩的控件也是不错的！
好像没有的，你可以去网上下载 BetterDefaults（acleandesign）这个
组件库，里面包含了日历控
件，6.0和6.5都可以用。
1. 小楼axure rp教程（一）文本框焦点效果
2. 小楼axure rp教程（三）单选框效果
3. 小楼axure 图文教程（七）日历元件的制作（图像热区效果）
2. Axure新手养成计划（连载02）
3. Axure新手养成计划（连载03）
4. Axure新手养成计划（连载04）
5. Axure新手养成计划（连载05）
6. Axure新手养成计划（连载06）
7. Axure新手养成计划（连载07）
8. Axure新手养成计划（连载08）
9. Axure新手养成计划（连载09）
10. Axure新手养成计划（连载10）
11. Axure新手养成计划（连载11）
12. Axure新手养成计划（连载12）
13. Axure新手养成计划（连载13）
14. Axure新手养成计划（连载14）
15. Axure新手养成计划（连载15）
16. Axure新手养成计划（连载16）
17. Axure新手养成计划（连载17）
18. Axure新手养成计划（连载18）
19. Axure新手养成计划（连载19）
20. Axure新手养成计划（连载20）
21. Axure新手养成计划（连载21）
22. Axure新手养成计划（连载22）
23. Axure新手养成计划（连载23）
24. Axure新手养成计划（连载24）
25. Axure新手养成计划（连载25）
26. Axure新手养成计划（连载26）
27. Axure新手养成计划（连载27）
28. Axure新手养成计划（连载28）
29. Axure新手养成计划（连载29）
30. Axure新手养成计划（连载30）
31. AxureRP7.0从入门到精通（连载31）
32. AxureRP7.0从入门到精通（连载32）
33. AxureRP7.0从入门到精通（连载33）
34. AxureRP7.0从入门到精通（连载34）
35. AxureRP7.0从入门到精通（连载35）
36. AxureRP7.0从入门到精通（连载36）
37. AxureRP7.0从入门到精通（连载37）
38. AxureRP7.0从入门到精通（连载38）
39. AxureRP7.0从入门到精通（连载39）
40. AxureRP7.0从入门到精通（连载40）
41. AxureRP7.0从入门到精通（连载41）
42. AxureRP7.0从入门到精通（连载42）
43. AxureRP7.0从入门到精通（连载43）
44.
45.
46.
47.
48.
49.
50.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）