php单击日历技巧_Axure高保真教程日期时间下拉列表

文章目录 [+]

在系统中，我们常常会用到日期韶光选择器，它同时包含了日历日期的选择和韶光的选择，一样平常是下拉列表的形式进行选择。

本日作者请教大家如何在Axure中用中继器制作真实日期韶光效果的下拉列表。

php单击日历技巧_Axure高保真教程日期时间下拉列表

一、效果展示

1、点击控件，可以弹出韶光日期选择的下拉列表，在里面可以选择对应的日期和韶光；

（图片来自网络侵删）

2、选择的日期是真实日期，即日期能逐一对应真实的日期，哪一天是星期几都是真实对应的；

3、点击左箭头切换上月，右箭头切换到下月；双左箭头切换到上年，双右箭头切换至下一年；

4、可以点击年份或月份，快速选择置顶的年月；

5、选择后自动回显选择的日期和韶光。

二、制作剖析

一样平常而言会有三种办法来制作：

第一种是写去世，写去世在动态面板里面写几个月的日期，然后通过动态面板切换制作出对应的效果，这种的缺陷是复用性差，而且只能显示写好的几个月，如果要查几十年的数据，就要做几百页，相称摧残浪费蹂躏韶光，以是我们不用这种办法。

第二种是通过js调用，js调用的好处的大略快捷，通过几行js代码就可以调用浏览器的日期韶光下拉列表，但是缺陷也很明显：第一，不同浏览器不同版本自带的韶光日期下拉列表不一样，你看到的是这个效果，别人看到的便是另一个效果；第二，后续的交互不好做，我们做选择器，后续可能会对中继器表格进行筛选或者其他交互，如果是用js调用的话，对付不懂代码的小白就无法进行后续的交互。

第三种是通过中继器和日期韶光函数，制作一个日期韶光模板，这种办法虽然做起来比较困难，但是制作之后复用性很高，由于用原生元件制作，以是对后续添加对应交互比较友好，可以为所欲为的添加后续效果，以是我们会用第三种办法来制作。

三、制作教程

这个原型可以紧张分成4个部分：

1. 提示框

提示框包括提示笔墨，矩形，图标这几部分组成，大家可以根据自身须要设置样式，也可以增加移入变色，选中变色等效果来美化。

鼠标单击提示框的时候，我们用显示的交互，将隐蔽的下拉组合显示出来即可。

2. 日期部分

日期部分我们紧张是用中继器、文本标签、箭头等内容制作。

中间的日期我们是用中继器来制作，里面增加圆形，去除边线，矩形设置选中样式为添补颜色为蓝色，笔墨颜色为白色。
中继器里共两列，一列是自带的Column0，一列是xuanzhong列，默认都为空就可以了。
默认我们增加42行空行。

下面我们大略说一下逻辑，我们紧张用到下面几个函数：

now函数：可以获取现在的详细的日期get.date：可以获取本日是几号addDays：可以加减日期天数get.day：获取本日是星期几

我们要找到某年某月的第一天是星期几，事理是先获取本日的日期和周几，然后在通过打算出选中日期和本日日期的差值，从而获取到指定日期是中继器里的第几格。