axure日期选择器/万年历

用于选择或输入日期

需要先了解使用到的日期函数：

Now：

表示当前日期和时间的日期对象。单独使用时，返回当前日期和时间，完全清晰并带有 Web 浏览器的时区。

[[ Now ]] -> Wed Nov 14 2018 16:20:24 GMT-0800 (Pacific Standard Time)

Now.getDate()：

返回一个数字，表示给定日期对象的月份中的某一天

[[ Now.getDate() ]] -> 14

Now.getDay()：

返回一个数字，表示给定日期对象的星期几，周日是 0，周六是 6。

[[ Now.getDay() ]] -> 3

Now.getFullYear()：

以 Web 浏览器的时区的四位数格式返回给定日期对象的年份。

[[ Now.getFullYear() ]] -> 2018

Now.getMonth() ：

以 Web 浏览器时区中 1 到 12 之间的数字形式返回给定日期对象的月份。

[[ Now.getMonth() ]] -> 11

Now.toLocaleDateString()：

根据 Web 浏览器的设置，返回日期对象的日期部分的语言和区域敏感版本。

[[ Now.toLocaleDateString() ]] -> 11/15/2018

Now.addYears(年)：

将指定的年数添加到 date 对象并返回新的日期和时间，完全明确并带有 Web 浏览器的时区。

[[ Now.addYears(3) ]] -> Mon Nov 15 2021 13:00:34 GMT-0800 (Pacific Standard Time)

Now.addMonths(月)：

将指定的月数添加到 date 对象并返回新的日期和时间，完全明确并带有 Web 浏览器的时区。

[[ Now.addMonths(3) ]] -> Fri Feb 15 2019 13:00:34 GMT-0800 (Pacific Standard Time)

Now.addDays(天)：

将指定的天数添加到 date 对象并返回新的日期和时间，完全明确并带有 Web 浏览器的时区。

[[ Now.addDays(3) ]] -> Sun Nov 18 2018 13:00:34 GMT-0800 (Pacific Standard Time)

制作方法

• 1、以日期为原型，创建一个简单原型，第一行操作为：年份、月份、上一月、下一月、上一年、下一年。第二行固定星期是周一到周日。下面日期是7x6的中继器。

axure日历原型

• 2、为方便理解先假设当月1日是在周一，先不考虑上月和下月的情况，因为日期函数都要在日期对像上进行操作才有效，利用函数[[ Now.addDays(1-Now.getDate()) ]]计算出当月1日的日期对像。效果如下：

axure日期选择器

axure日期选择器

• 3、这时全部日期都是1日，我们需要第一个后面的单元格都递增加1天。这时需要使用中继器的index，由于index是从1开始计数。所以给每个单元格加index-1天。函数[[ Now.addDays(1 - Now.getDate() + Item.index - 1 ) ]]

axure日期选择器

axure日期选择器

• 4、这时原型每个单元格都递增显示了日期，但这是假设1号就是周一的情况。但实现1号是在周二，需要减少1天日期和日期才可以正确对应。

这时利用Now.getDay()求出1号的星期数为2，但实际要偏移是2-1天。偏移函数为[[ Now.addDays(1 - Now.getDate()).getDay() - 1 ]]天。

axure日期选择器

完整的日期函数：[[ Now.addDays(1 - Now.getDate() + Item.index - 1 - Now.addDays(1 - Now.getDate()).getDay() + 1 ).toLocaleDateString() ]]。

axure日期选择器

• 5、这时原型显示的日期和星期就对应上了。但只要显示日期，去掉年份和月份就可以了。去掉后效果如下：

axure日期选择器

• 6、增加上一年，上一月，下一月，下一年的功能。

把[[Now]]函数替换成一个全局变量，控制这个全局变量就可以改变上一年，上一月，下一月，下一年的功能操作。

• 7、增加本月和非本月的日期样式，在中继器加载时可以根据月份来判断本月日期和非本月日期，对非本月日期给出一个浅色的样式。

axure日期选择器

原型预览地址：http://demo.axureshop.com/?url=http://cloud.axureshop.com/WRLV3P&buyurl=https://www.axureshop.com/a/1768220.html