axure实例教程制作日历控件选择日期

Axure原型设计中的模拟用户日历与日程安排功能设计与模拟实现近年来，随着移动互联网的快速发展，人们对于日历和日程安排的需求也越来越高。

在产品设计过程中，如何设计一个用户友好、功能强大的日历与日程安排功能成为了一个重要的课题。

Axure是一款强大的原型设计工具，它提供了丰富的功能和交互元素，使得我们可以方便地设计和模拟用户日历与日程安排功能。

一、日历功能设计与模拟实现在设计日历功能时，我们可以考虑以下几个方面：1.1 日历视图切换：用户可以通过切换不同的视图来查看日历，如月视图、周视图和日视图。

在Axure中，我们可以使用动态面板来实现这一功能。

通过点击不同的按钮，切换不同的面板，并显示相应的视图。

1.2 日期选择：用户可以通过选择不同的日期来查看日程安排。

在Axure中，我们可以使用日期选择器组件来实现这一功能。

用户可以点击日期选择器，选择特定的日期，然后系统会自动显示该日期的日程安排。

1.3 日程显示：在日历中，用户可以查看每天的日程安排。

在Axure中，我们可以使用列表组件来展示日程安排。

通过添加列表项，我们可以将每个日程安排显示在列表中，并提供相应的操作按钮，如编辑、删除等。

二、日程安排功能设计与模拟实现在设计日程安排功能时，我们可以考虑以下几个方面：2.1 添加日程：用户可以通过点击添加按钮来添加新的日程安排。

在Axure中，我们可以使用表单组件来实现这一功能。

用户可以填写相关信息，如标题、时间、地点等，然后点击确认按钮，系统会将该日程安排添加到日历中。

2.2 编辑日程：用户可以对已有的日程安排进行编辑操作。

在Axure中，我们可以使用表单组件和交互事件来实现这一功能。

用户可以点击编辑按钮，然后弹出编辑窗口，可以修改相关信息，并保存修改后的日程安排。

2.3 删除日程：用户可以对已有的日程安排进行删除操作。

在Axure中，我们可以使用交互事件来实现这一功能。

用户可以点击删除按钮，系统会弹出确认对话框，用户点击确认后，系统会将该日程安排从日历中删除。

Axure 完全模拟日期选择器概念：日期选择器，涉及到的知识：中继器日期函数用例逻辑：用中继器重复及自动换行的特性配合日期函数填充日期，再使用用例IF-ELSE的特性处理交互事件。

步骤：全局变量：第一步先将会用到的全局变量先建好AToday：今天AFirstDay：左边日历的当月第一天ADateIndex：左边日历的当月第一天是周几BFirstDay：右边日历的当月第一天BDateIndex：右边日历的当月第一天是周几StartDate：被选中的开始日期EndDate：被选中的结束日期Kevin8977@gmail如果想做的只是单一日期选择器，那么B开头的变量不用建初值可以不用指定，在页面加载时再指定即可。

创建日期组件：上图是最后的成果，第一步是先创建图中圆型的圆形日期框，如下图：这里要注意圆形要搭配一个方形框，为了让圆形日期框之间留出空间，也为了留每月1号的日期框不会跑到首行的最前面。

添加选中样式：最终当日期被选中时样式如下：选中事件：当点击日期后，我们要将选中的日期存起来，并且将效果改成选中状态。

如果只是做单一日期选择，效果到这里就可以了，但是要加一个额外的步骤：在圆形日期框上右键，点击选项组（Selection Group），给一个名字。

Kevin8977取消选项组隔离，这个整个中继器的日期，就只有一个会被选中。

中继器内容中继器中只需要一列，从1填到42，这是因为一周7天为一行，我们需要用到6行，共42个数字。

外观（LAYOUT）选择水平重复，并且每7个换行。

日期圆框命名为W1，方框可以不用命名，暂时还用不到。

先试试在每项加载的用例中填入以下代码：这个只是试验，做一下间距及大小的调整后就要删掉了。

日期圆框之间的间距，可以用前面未命的方框大小来决定，调整好之后就删掉上面的代码。

添加年月显示框、左右方向键、星期几的标识。

事件及代码：开始进入正题了kevin8977@gmail。

位置：页面加载（Page Loaded）页面加载时：指定AToday值为[[Now]]AFirstDay的值为今天加上一个负值，比如今天是25号那么就减去24天，即为当月第1天。

Axure实现滑动选择与时间选择器设计的最佳实践在用户界面设计中，滑动选择和时间选择器是常见的交互元素，它们能够提供便捷的数据选择方式，增强用户体验。

在Axure这样的原型设计工具中，如何实现滑动选择和时间选择器，是每个设计师都需要掌握的技能。

本文将探讨Axure实现滑动选择和时间选择器的最佳实践。

一、滑动选择的实现滑动选择是一种通过滑动手势来选择数据的交互方式，它常用于选择日期、时间、地点等信息。

在Axure中，可以通过使用滑动面板和动态面板的交互组件来实现滑动选择。

首先，在Axure的交互组件库中选择一个滑动面板，将其拖放到设计画布上。

然后，将需要选择的数据按照一定的格式排列在滑动面板中，可以使用文本框或者标签组件来显示数据。

接下来，通过设置滑动面板的交互属性，使其能够响应滑动手势。

在滑动手势触发的事件中，可以通过改变滑动面板中数据的显示位置，实现滑动选择的效果。

在设计滑动选择时，需要注意以下几点。

首先，要保证滑动面板的尺寸和位置适当，以便用户能够方便地进行滑动操作。

其次，要根据数据的长度和数量，合理安排滑动面板中的显示方式，避免数据过长或者过多导致用户体验不佳。

最后，要考虑到不同设备的屏幕尺寸和分辨率差异，确保滑动选择在各种设备上都能正常显示和操作。

二、时间选择器的设计时间选择器是一种用于选择具体时间的交互元素，它常用于日程安排、提醒设置等场景。

在Axure中，可以通过使用动态面板和交互组件的事件触发来实现时间选择器。

首先，在Axure的交互组件库中选择一个动态面板，将其拖放到设计画布上。

然后，根据时间的粒度和范围，在动态面板中创建相应的交互组件，比如下拉列表、滑动面板等。

接下来，通过设置交互组件的事件触发，使其能够响应用户的选择。

在事件触发的动作中，可以根据用户的选择，改变时间选择器中的显示内容，或者将选择的时间值传递给其他组件。

在设计时间选择器时，需要注意以下几点。

首先，要根据实际需求选择合适的时间粒度和范围，避免用户在选择时间时遇到困难。

Axure实现时间线与状态流程设计的技巧与经验分享在产品设计和用户体验领域，时间线和状态流程设计是非常重要的工具。

它们可以帮助我们更好地理解用户的行为和需求，并为产品的开发和优化提供指导。

而在实现这些设计的过程中，Axure是一个非常强大的工具。

在本文中，我将分享一些在Axure中实现时间线和状态流程设计的技巧和经验。

1. 使用动态面板和交互式组件Axure中的动态面板和交互式组件是实现时间线和状态流程设计的重要工具。

通过使用动态面板，我们可以创建一个可以在不同状态之间切换的组件。

例如，我们可以创建一个动态面板来展示一个产品的不同版本或不同阶段的设计。

通过在动态面板中添加不同的状态，我们可以模拟用户在不同时间点上的体验。

交互式组件则可以帮助我们更好地展示用户在不同状态下的行为。

例如，我们可以创建一个交互式按钮，当用户点击时，会触发不同的动作或显示不同的内容。

通过使用这些交互式组件，我们可以更好地模拟用户在不同状态下的交互行为，从而更好地理解用户的需求。

2. 利用条件和变量在Axure中，我们可以使用条件和变量来实现时间线和状态流程设计。

条件可以帮助我们根据不同的情况来展示不同的内容或触发不同的动作。

例如，我们可以设置一个条件，当用户点击某个按钮时，显示一个特定的提示信息。

变量则可以帮助我们记录用户在不同状态下的行为或选择。

例如，我们可以设置一个变量来记录用户在不同页面上的选择，从而在后续的设计中根据用户的选择展示不同的内容。

3. 使用动画和过渡效果动画和过渡效果是实现时间线和状态流程设计的重要手段。

在Axure中，我们可以使用动画和过渡效果来模拟用户在不同状态下的体验。

例如，我们可以使用过渡效果来展示用户从一个页面到另一个页面的过程，从而更好地理解用户的导航行为。

同时，动画和过渡效果还可以帮助我们更好地展示产品的交互效果。

例如，我们可以使用动画来展示用户在点击按钮时的反馈效果，从而提升用户的体验。

excel中实现日期选择输入（日历控件）推荐第一种方法：首先这个控件需要一个名为MSCOMCT2.OCX的控件文件,这个文件大家先在电脑里搜索一下,如果没有的话就求助baidu 喽.下载下来后把它复制到c:\windows\system32里.最后就在开始->运行里注册MSCOMCT2.OCX控件.那么如何注册呢,方法很简单输入regsvr32 MSCOMCT2.OCX就ok拉这时打开excel控件工具箱点击其它控件找到Microsoft Date and Time Picker Control 6.0,这个东东就是我们要的日期控件拉第二种方法：MSCAL.OCXPrivate Sub Calendar1_Click()ActiveCell = Calendar1.ValueMe.Calendar1.Visible = FalseEnd SubPrivate Sub Worksheet_SelectionChange(ByVal Target As Range)'此处的6和7为你要显示日历的列序号If Target.Column = 6 Or Target.Column = 7 ThenMe.Calendar1.Left = Target.LeftMe.Calendar1.Top = Target.TopIf Target.Value <> "" ThenMe.Calendar1.Value = Target.ValueElseMe.Calendar1.Value = Now()End IfMe.Calendar1.Visible = TrueElseMe.Calendar1.Visible = FalseEnd IfEnd SubPrivate Sub Calendar1_Click()ActiveCell = Calendar1.ValueMe.Calendar1.Visible = FalseEnd SubPrivate Sub Worksheet_SelectionChange(ByVal Target As Range)'此处的1为你要显示日历的列序号If Selection.Rows.Count = 1 And Selection.Columns.Count = 1 AndTarget.Column = 1 ThenMe.Calendar1.Left = Target.LeftMe.Calendar1.Top = Target.TopIf Target.Value <> "" ThenMe.Calendar1.Value = Target.ValueElseMe.Calendar1.Value = Now()End IfMe.Calendar1.Visible = TrueElseMe.Calendar1.Visible = FalseEnd IfEnd SubMscomct2.zipMSCAL.rar在EXCEL中实现点击日历输入日期技巧2010-07-07 10:37:58 阅读435 评论0 字号：大中小订阅1、在某一单元格中插入日历控件（1）选中要插入日历控件的单元格，设置单元格格式为日期型；（2）点击工具栏，“插入—对象—日历控件”，（3）用快捷方式Alt+F11，双击插入控件的工作表名称，粘贴下面的代码，用来实现单击A1时弹出日历控件，单击日历控件后，将选中的日期值填入A1并隐藏控件。

Axure使用介绍文档目录一、Axure rp 的界面 (2)二、Axure rp的线框图元件 (3)三、Axure rp的元件触发事件 (4)四、Axure rp的条件生成 (6)五、系统函数与变量 (8)六、动态面板的使用 (14)七、母版的使用 (20)八、中继器的使用 (28)一、Axure rp 的界面（界面显示各个区域可在主菜单工具栏-视图中找到）1、菜单工具栏：同大部分软件类似，可选择Axure各个功能的工具区。

2、操作界面：绘制产品的操作区，所有元件、部件可拖与此区域操作。

3、站点地图：页面文件存放区域，可增加、删除、修改、查看页面；可设置页面级别。

4、元件库（部件库）：主要分为流程图和线框图；可拖动元件库里的元件到操作界面进行产品绘制；为提高效率，元件库也可自行导入已经可使用的元件。

5、母版：母版的使用主要针对于顶部导航、底部导航，多个页面中重复出现的元素，可先绘制与母版中，再拖动到需使用的页面（比起重复操作，修改扩展行也更强）。

6、页面属性：可设置当前页面的注释、交互、与样式。

7、元件交互与注释：可对操作页面中用到的元件或元件与元件之间的交互事件进行设置（如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等）。

8、元件属性和样式：可设置选中元件的基本样式与属性。

9、部件管理（动态面板管理）：该区域可对已设置的动态面板状态进行操作，可添加、删除、进行排序，也可双击动态面板进入编辑。

二、Axure rp的线框图元件1、图片：图片元件拖入编辑时，可双击载入本地磁盘的图片，载入图片是Axure 会自动提示将大图进行优化，避免原型文件过大；载入的图片可以选择原图大小也可以保持元件大小。

2、文本：标题1、标题2、单行文本、多行文本都属于文本类型的元件，在网页中的名称为lable，主要用于文字描述、文本链接等功能3、矩形：矩形可用作背景、按钮等元件使用；双击矩形可输入文本；拖入矩形时默认是直角矩形，可通过左右拖动左上角的黄色小三角来改变圆角半径；也可通过右键选择形状来改变当前形状。

Axure基本使用指南目录原型工具的选择 (1)axure文件的使用 (2)axure文件的制作与生成 (4)文档管理(Document) (6)模板复用(Templates) (10)Widget工具 (14)注释annotations (19)交互interactions (26)Axure RP Pro5.5中文翻译教程 (30)原型工具的选择纸笔：简单易得，上手难度为零。

有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。

但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。

Word：上手难度普通。

可以画wireframe，能够画页面流程，能够使用批注与文字说明。

但是对交互表达不好，也不利于演示。

E xcel：上手难度普通。

易于画表单类的页面，易于做批注，但演示效果一般。

PPT：上手难度普通。

易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。

但是不利于大篇幅的文档表达。

Visio：功能相对比较复杂。

善于画流程图，框架图。

不利于批注与大篇幅的文字说明。

同样不利于交互的表达与演示。

Photshop/fireworks：操作难度相对较大，易于画框架图、流程图。

不利于表达交互设计，不擅长文字说明与批注。

Dreamweave：操作难度大，需要基础的html知识。

易于画框架图、流程图、表达交互设计。

不擅长文字说明与批注。

以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototype design的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。

比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。

而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。

轻量级的日历控件（适合移动端）
图片展示
图1. 主图样式
1.蓝色字体是当前日期；蓝色圆圈背景是选中的日期；
2.上方的箭头是切换月份；
3.日期那边可以左右滑动，切换天数；
参数修改介绍
样式修改：
1.打开index.html，在其头部有控制td样式和today，focus类。

如下图
2.td对应的就是日期的样式；today就是当前日期；focus就是选中的日期；可
以根据自己的需要进行修改。

左右侧滑修改：
1.为了方便大家在PC端的测试，特意将移动端的左右侧滑效果模拟出来，大
家如果要在移动端使用，只需要修改下列代码，如下图；
2.滑动时天数修改：滑动时调用changeData(type)方法，方法介绍如下图：
下载地址
百度云盘：/s/1c0zW7te。

Axure RP 教程二零零八年十月版权归属于: 凤凰涅槃 () 整理者: 盆地 ()一、Axure RP 介绍 (3)二、界面与功能 (5)2.1 欢迎界面与功能 (5)2.2 软件主界面与功能 (6)三、文档管理 (8)3.1 工具功能条 (9)3.2 右键—增加 (9)3.3 右键—移动 (10)3.4 右键—复制 (10)3.5 右键—页面类型 (11)3.6 右键—其他 (11)四、模板复用 (12)4.1 功能条 (12)4.2 右键单击文档——增加 (12)4.3 右键单击文档——移动 (13)4.4 右键单击文件——文件身份“行为” (13)4.5 右键单击文件——其他 (14)五、widgets 工具 (15)5.1 Wireframe线框图工具 (15)5.2 Flow工具 (18)六、注释annotations (20)6.1 自定义注释与说明 (21)6.2 自定义注释与说明的现实意义 (25)七、交互 interactions (26)7.1 交互触发 (27)7.2 交互行为—快速链接 (28)7.3 交互条件 (29)7.3.1 进入交互条件设置 (29)7.3.2 条件设置的功能与细节 (31)7.3.3 综合谈一谈设置合理的条件。

(33)7.4 交互行为 (34)一、Axure RP 介绍产品经理的一项重要工作，就是进行产品原型设计(Prototype Design)。

而产品原型设计 最基础的工作，就是结合批注、大量的说明以及流程图画框架图 wireframe，将自己的产品 原型完整而准确的表述给 UI、UE、程序工程师，市场人员，并通过沟通会议，反复修改 prototype 直至最终确认，开始投入执行。

进行产品原型设计的软件工具也有很多种，本教程所介绍的 Axure RP，是 taobao、 dangdang 等国内大型网络公司的团队在推广使用的原型设计软件。

最新Axure查询+倒计时跳转页⾯实例Masters（通⽤模块）在通⽤模块中新增⼀个取名为“footer”的Masters。

双击“footer”模块名进⾏编辑，将Home页中footer的内容剪贴到模块中。

为了在页⾯中的准确定位，我给footer也加了⼀个底⾊框。

然后别忘了把“footer”拖到Home页中相应的位置哦。

Menu(菜单)和Quick Link(快捷链接)RP中制作多级菜单⾮常⽅便，只需要⽤到组件⼯具中的：⼀个Menu(Vertical)：垂直菜单，⼀个Menu(Horizontal)：⽔平菜单。

菜单默认的⼀级Menu Item（菜单选项）有3个，我们可以通过右击某个选项来插⼊同级菜单(Menu Item)和增减下⼀级菜单(Submenu)。

还可以编辑菜单Tips：按键盘Tab键只会让当前聚焦点在菜单选项间浮动，不能增加新菜单选项。

新增加的菜单选项的宽度会跟之前被操作的菜单的宽度相同；另外，在菜单中修改任⼀菜单选项的宽度，整个菜单的宽度都会被修改。

也就是说，菜单宽度值是各个⼀级菜单选项的和，⽽不是⾃⼰事先定好的宽度。

拉长或缩短整个菜单的宽度时，只有最后的⼀级菜单选项的宽度被改变。

可以通过拖动来选择多个菜单选项，在公共栏中对内容显⽰进⾏相关操作。

Tips：要先选中上级菜单选项，下级菜单才会显⽰出来；下级菜单显⽰的起始位置是上级菜单的左边线，并且⽆法超过左边线。

通过右击菜单中的“Edit Rollover Style（编辑翻转样式）”项，可以制定⿏标移动到菜单上时的菜单样式变化。

Apply to：This menu item only ：只应⽤到对当前菜单选项；This menu only：只应⽤到同级菜单；This menu and all submenus：应⽤到所有同级菜单和下级菜单；Tips：为菜单添加了Rollover Style之后，菜单选项的左上⾓会出现⼀个⿊⽩⼩框，⿏标移动到⼩框上，就可以看到Rollover Style的预览效果。

1.点击图标，弹出日历选项卡2.可以选择年、月、日3.选择今天则文本框显示今天的日期4.选择清空，选择的日期将被删除5.点击关闭则日历框将被关闭工具：Axure7.01.一个文本框：数据随着用户的选择而不断更新；2.一个日历的图标，固定，不发生变化，可点击；3.三个按钮，清空，今天，关闭。

按钮固定，不发生变化，可点击；4.一个表示一周的数字，一，二，三...且是固定不变的，不可点击；5.表示一个月的数字，随着年份、月份的变化而变化，可点击，选择后文本框中的日期会发生对应的变化。

6.上月部分和下月部分数字是灰色，周日和周六的日期比其他数字颜色要深；7.当前日期，处于选中状态，选择其他日期时，处于选中，且数字颜色变为白色；先用HTML写出基本的框架：设置字体，字体颜色，表头信息，是否加阴影，所在的位置；背景颜色，年月日的高度、宽度、位置，背景颜色等。

其次，开始添加判断和效果，分析看需要多少变量，且是如何赋予函数的，如下：1.点击图标展示日历，提取系统时间，显示本年、本月、本日且当前的处于选中状态。

2.对于月的选择，选择上一个月，本月的-1，选择下一个月，本月+1，依次类推；3.对于日的选择，当前前一天的-1，当前后一天的加1；4.对于年的选择，上一年的-1，下一年的加1；5.文本中的日期=年+月+日；6.获取月份，月1号的周值，月天数；年，是否是闰年，闰年的判断，每4年、100年、400年是闰年，7.选择今天文本框中出现的日期，选择清空文本框中出现的日期，选择关闭，文本框中出现的数据原型制作中，没有实现向前：年、月、日的选择，需要用到中继器，有兴趣者可以继续研究；在原型制作过程中，考虑包含哪些元素有助于梳理各自的交互关系；。

日历控件的使用用法也相当简单,方法如下:1.在网页中嵌入一个IFRAME和一段SCRIPT.<IFRAME frameBorder=0 id=popFrame name=popFrame scrolling=nosrc="Calendar.htm" style="BORDER-BOTTOM: 2px ridge; BORDER-LEFT: 2px ridge; BORDER-RIGHT: 2px ridge; BORDER-TOP: 2px ridge; POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 65535"></IFRAME><SCRIPT>document.onclick=function(){document.getElementById("popFrame").style.visibility="hidden";}</SCRIPT>2.插入一个窗体,其中包含一个文本框和一个按钮,注意按钮的类型(button),在按钮中插入单击事件.<form name="form1" method="post" action=""><input type="text" name="textfield" id="searchkey2" disabled="false"><input type="button" name="Submit" value="选择日期"onClick="popFrame.fPopCalendar('searchkey2','searchkey2',event);"></form>3.附控件代码如下,把代码存为Calendar.htm文件就可以了.'以下为附件:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><META content="text/html; charset=gb2312" http-equiv=Content-Type><STYLE type=text/css>A:link {TEXT-DECORATION: none}A:visited {TEXT-DECORATION: none}TD {TEXT-ALIGN: center; VERTICAL-ALIGN: middle}.CalHead {COLOR: white; FONT: bold 8pt Arial}.CalCell {CURSOR: hand; FONT: 8pt Arial}.HeadBtn {FONT: 10pt Fixedsys; HEIGHT: 22px; VERTICAL-ALIGN: middle; WIDTH: 18px}.HeadBox {FONT-SIZE: 10pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; LINE-HEIGHT: normal; VERTICAL-ALIGN: middle}.Today {COLOR: white; FONT: bold 10pt Arial}</STYLE><META content="MSHTML 5.00.3700.6699" name=GENERATOR></HEAD><BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0"><SCRIPT><!-- Begin Configurable Partvar giStartYear = 2001;var giEndYear = 2010;var giCellWidth = 16;var gMonths = new Array("1","2","3","4","5","6","7","8","9","10","11","12");var gcOtherDay = "gray";var gcToggle = "yellow";var gcBG = "#dddddd";var gcTodayBG = "white";var gcFrame = "teal";var gcHead = "white";var gcWeekend = "red";var gcWorkday = "black";var gcCalBG = "#6699cc";//-- End Configurable Part --><!-- Begin Non-editable partvar gcTemp = gcBG;var gdCurDate = new Date();var giYear = gdCurDate.getFullYear();var giMonth = gdCurDate.getMonth()+1;var giDay = gdCurDate.getDate();var tbMonSelect, tbYearSelect;var gCellSet = new Array;var gfPop = parent.document.getElementById();var gdCtrl = new Object;//****************************************************************************// Here, you could modify the date format as you need !//**************************************************************************** function fSetDate(iYear, iMonth, iDay){gdCtrl.value = iYear+"-"+gMonths[iMonth-1]+"-"+iDay; // <--Modify this gfPop.style.visibility = "hidden";}//****************************************************************************// Param: popCtrl is the widget beyond which you want popup this calendar; // dateCtrl is the widget into which you want to put the selected date; //**************************************************************************** function fPopCalendar(popCtrl, dateCtrl, anEvent){anEvent.cancelBubble=true;gdCtrl = parent.document.getElementById(dateCtrl);var pc = parent.document.getElementById(popCtrl);fSetYearMon(giYear, giMonth);var point = fGetXY(pc);with (gfPop.style) {left = point.x-1;top = point.y+pc.offsetHeight+1;visibility = "visible";}}function Point(iX, iY){this.x = iX;this.y = iY;}function fGetXY(aTag){var pt = new Point(aTag.offsetLeft, aTag.offsetTop); do {aTag = aTag.offsetParent;pt.x += aTag.offsetLeft;pt.y += aTag.offsetTop;} while(aTag.tagName!="BODY");return pt;}function fSetSelected(aCell){var iOffset = 0;var iYear = parseInt(tbSelYear.value);var iMonth = parseInt(tbSelMonth.value);aCell.bgColor = gcBG;with (aCell.firstChild){var iDate = parseInt(innerHTML);if (style.color==gcOtherDay)iOffset = (id<10)?-1:1;iMonth += iOffset;if (iMonth<1) {iYear--;iMonth = 12;}else if (iMonth>12){iYear++;iMonth = 1;}}fSetDate(iYear, iMonth, iDate);}function fBuildCal(iYear, iMonth) {var aMonth=new Array();for(i=1;i<7;i++)aMonth[i]=new Array(i);var dCalDate=new Date(iYear, iMonth-1, 1);var iDayOfFirst=dCalDate.getDay();var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;var iDate = 1;var iNext = 1;for (d = 0; d < 7; d++)aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;for (w = 2; w < 7; w++)for (d = 0; d < 7; d++)aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);return aMonth;}function fDrawCal(iCellWidth) {var WeekDay = new Array("日","一","二","三","四","五","六");var styleTD = " width='"+iCellWidth+"' "; //Coded by Liming Weng(Victor Won) email:victorwon@with (document) {write("<tr>");for(i=0; i<7; i++)write("<td class='CalHead' "+styleTD+">" + WeekDay[i] + "</td>");write("</tr>");for (w = 1; w < 7; w++) {write("<tr>");for (d = 0; d < 7; d++) {write("<td class='CalCell' "+styleTD+"onMouseOver='gcTemp=this.bgColor;this.bgColor=gcToggle;this.bgColor=gcToggle' onMouseOut='this.bgColor=gcTemp;this.bgColor=gcTemp' onclick='fSetSelected(this)'>"); write("<A href='#null' onfocus='this.blur();'>00</A></td>")}write("</tr>");}}}function fUpdateCal(iYear, iMonth) {myMonth = fBuildCal(iYear, iMonth);var i = 0;var iDate = 0;for (w = 0; w < 6; w++)for (d = 0; d < 7; d++)with (gCellSet[(7*w)+d]) {id = i++;if (myMonth[w+1][d]<0) {style.color = gcOtherDay;innerHTML = -myMonth[w+1][d];iDate = 0;}else{style.color = ((d==0)||(d==6))?gcWeekend:gcWorkday;innerHTML = myMonth[w+1][d];iDate++;}parentNode.bgColor =((iYear==giYear)&&(iMonth==giMonth)&&(iDate==giDay))?gcTodayBG:gcBG;parentNode.bgColor = parentNode.bgColor;}}function fSetYearMon(iYear, iMon){tbSelMonth.options[iMon-1].selected = true;if (iYear>giEndYear) iYear=giEndYear;if (iYear<giStartYear) iYear=giStartYear;tbSelYear.options[iYear-giStartYear].selected = true;fUpdateCal(iYear, iMon);}function fPrevMonth(){var iMon = tbSelMonth.value;var iYear = tbSelYear.value;if (--iMon<1) {iMon = 12;iYear--;}fSetYearMon(iYear, iMon);}function fNextMonth(){var iMon = tbSelMonth.value;var iYear = tbSelYear.value;if (++iMon>12) {iMon = 1;iYear++;}fSetYearMon(iYear, iMon);}with (document) {write("<table id='popTable' bgcolor='"+gcCalBG+"' cellspacing='0' cellpadding='0' border='0'><TR>");write("<td align='center'><input type='button' value='<' class='HeadBtn'onClick='fPrevMonth()'>");write("&nbsp;<select id='tbMonSelect' class='HeadBox'onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");for (i=0; i<12; i++)write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");write("</SELECT><SELECT id='tbYearSelect' class='HeadBox'onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");for(i=giStartYear;i<=giEndYear;i++)write("<OPTION value='"+i+"'>"+i+"</OPTION>");write("</SELECT>&nbsp;<input type='button' value='>' class='HeadBtn'onclick='fNextMonth()'>");write("</td></TR><TR><td align='center'>");write("<DIVstyle='background-color:"+gcFrame+";width:"+((giCellWidth+6)*7+2)+"px;'><tableborder='0' cellpadding='2' >");tbSelMonth = getElementById("tbMonSelect");tbSelYear = getElementById("tbYearSelect");fDrawCal(giCellWidth);gCellSet = getElementsByTagName("A");fSetYearMon(giYear, giMonth);write("</table></DIV></td></TR><TR><TD align='center'>");write("<A href='#null' class='Today' onclick='fSetDate(giYear,giMonth,giDay); this.blur();' onMouseOver='gcTemp=this.style.color;this.style.color=gcToggle'onMouseOut='this.style.color=gcTemp'>今天是:&nbsp;"+giYear+"年"+gMonths[giMonth-1]+"月"+giDay+"日</A>");write("</TD></TR></TD></TR><TR></TR></TABLE>");gfPop.width = getElementById("popTable").offsetWidth;gfPop.height = getElementById("popTable").offsetHeight;}</SCRIPT></BODY></HTML>。

Axure 实例－高保真日历控件制作
这篇文章介绍了关于Axure 实例－高保真日历控件的相关信息，供大家参考。

 有些日子不动Axure 了，再熟悉的东西如果长时间不用都会变得生疏，所以今天找来「日历控件」练手，一来是恢复下手感，二来继续积攒高保真的控件，毕竟像「日历」这种控件在Web 设计中经常会被用到，所以有必要做一个Masters，方便做各种原型时调用。

 要求：
 1、日历中的各个组件可联动。

 2、选择任意日期后均可将值代入到输入框中。

 这个控件做起来并不难，只是比较麻烦。

原因在于界面上的所有组件彼此间都需要联动，需要考虑好它们之间的逻辑关系和各种小细节，所以我只设置了三套年月日的组合，效果足够示意就够了，如果把12 个月都拉出来估计自己都会疯掉…将选择的日期值代入输入框需要用到变量，所以对于Axure 的变量操作需要有一定了解，这个在我之前做过的实例里也有体现，可以点这里浏览。

 过程细说起来太痛苦，只捡重要的几点说说，其余自己领悟吧。

预览摸这里，如果需要rp 文件请留言索要，毕竟看源文件比什幺都好懂。

 给「输入框」命名为date-box，设置OnClick 事件用于激活日历。

可以直接用Show Panel，但这个动作的动画效果只有fade 一种，如果像要更多可。

本文由我司收集整编，推荐下载，如有疑问，请与我司联系怎么实现一个datePicker（日期选择）组件(纯原生，无依赖) 2016/05/24 0 通过某种方式选择年、月，选择了年月后，日期列表做相应切换通过单击某个具体的日期进行日期选择组件初始化时，可配置可选日期的上下限。

可选日期和不可选日期需要有样式上的区别提供设定日期的接口，指定具体日期，日历面板相应日期选中日期选择面板默认隐藏，会显示一个日期显示框和一个按钮，点击这两个部分，会浮出日历面板。

再点击则隐藏。

点击选择具体日期后，面板隐藏，日期显示框中显示选取的日期增加一个接口，用于当用户选择日期后的回调处理增加一个参数及相应接口方法，来决定这个日历组件是选择具体某天日期，还是选择一个时间段当设置为选择时间段时，需要在日历面板上点击两个日期来完成一次选择，两个日期中，较早的为起始时间，较晚的为结束时间，选择的时间段用特殊样式标示增加参数及响应接口方法，允许设置时间段选择的最小或最大跨度，并提供当不满足跨度设置时的默认处理及回调函数接口在弹出的日期段选择面板中增加确认和取消按钮通常我写组件时的基本结构如上，你可以根据组件的需要或者自己习惯进行编写。

然后就可以在html 里面添加以下的代码就可以调用我们的组件了，script src=‘calendar.js /script script type=‘text/javascript’var a=new Calendar({ // 各种配置/* 类似于id:’myCalendar’ onSelected:function(){ alert(‘hello’); /script 下面再看一下我们的需求，我们来一一分析需求也不是很多嘛，手动斜眼~ 先上图，根据图再慢慢分析其实我们看了需求之后，每个人都会有一个大概的思路，下面说一下我的思路首先，要实现一个日期选择器，最重要的就是要有一个日历，根据不同的年份和月份，日期面板上回显示每一天和对应的周几~ 其实实现这一点的话就两点第一，要根据年份和月份算出每月有多少天第二，要计算出每月的第一天（1 号）是周几伪代码如下：我想看完代码之后大家应该比较疑惑的是获取每个月天数的那句代码,这个比较优雅的做法是从这里看到的，注意：在Date 对象里month 为0 代表的是1 月份，month 为5 代表6 月份，因此我new Date(year,5,0)代。