axure日期函数实现高保真日期选择器万年历 基础教程

王者 普通用户 2021-6-7 380

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


登录后回复
最新回复 (0)
返回
发新帖
AxureShop
AxureShop
AxureShop