本次教程学习制作时间控件选择，根据选择的日期，在输入框中显示所选择的日期。制作内容包括携程网的酒店“入住日期”时间控件与“退房日期”时间控件。
部件使用：动态面板、图片、矩形、文本框（单行）、单行文本、垂直线；
交互事件：鼠标点击时、获得焦点时；
动作：设置面板状态为指定状态、设置部件显示/隐藏、设置文本；
时间控件交互描述：常用于选择日期。如酒店入住与退房日期选择，旅游出发日期，日程安排等场景。
步骤1：新建文档
新建文档，并点击“文件>保存”，保存为“时间控件”（文件名自定义），如图1
图1
第一部分：
制作“入住日期”时间控件
在制作之前，先了解一下“入住时间”这个时间控件是由以下部分构成的：单行文本框、日历，点击单行文本框弹出的日历面板有2个月的日历，可以点击左上角的切换按钮向左切换，点击右上角的向右切换按钮向右切换。这次制作的时间控件的日历会包括1月与2月，3月与4月，5月与6月。
步骤2：添加标题“入住日期”事件
在部件库找到“线框图>公共”选择“单行文本”，然后拖曳到线框图中，双击“单行文本”修改为“入住日期”；如图2、图3：
图2
图3
步骤3：添加文本框（单行）事件
在部件库中找到“线框图>窗体”选择“文本框（单行）”拖曳到线框图中“入住时间”的右边（如图3）；选中该文本框，在文本框中输入当前日期：2014-03-29，并在“部件交互和注释”中把该文本框（单行）命名为“入住时间”，如图4、图5：
图4
图5
步骤4：添加表格事件
在部件库>线框图>菜单和表格中选择“表格”拖曳到线框图中“入住日期”文本框的下方。如图6：
图6
步骤5：日历制作
每周7天，故在3列的原基础上添加4列：选中任意一个表格右击拉出右击菜单，选择“在右侧插入列（R）”，重复3次；如图7：
图7
2014年3月份有5周，并有一行用来显示星期，故在原3行的基础上添加3行：选中任意表格，右击拉出右击菜单选择“在下方插入行（B）”，添加3次，如图8：
图8
步骤6：调节表格样式
调节表格大小，选中表格，在工具栏中调节其大小为宽(W)：25px；高（h）：25px;把每一行表格、每一列的表格都调节成这样的尺寸，如图9：
图9
在表格中第一行输入星期名称，第一个为“日”，依次是“一”、“二”、“三”、“四”、“五”、“六”，其中“日”和“六”用不同颜色区分，这里用的颜色是：#FF9900；然后把3月份的日历填好；如图10：
图10
步骤7：调节表格样式
为了区分当前日期与已过去日期等需要调节日历表格的样式，颜色可以自定义。这里第一行的星期名称填充颜色：#ECECEC，边框颜色：#ECECEC；日历表格边框颜色：#ffffff；已过去的日期字体颜色为：#DFDBDB；当前日期及以后的日期字体颜色为：#005EAD；当天日期表格填充颜色：#FFF5D1；边框颜色：#FFE4A9。如图11
图11
步骤8：添加日历表格交互样式事件
已过去的日期是不能选择的，所以只需要给当前日期和未来日期添加交互样式即可。选中需要添加样式的表格，右击打开右击菜单，选择“交互样式”，打开交互样式窗口。如图12
图12
在交互样式对话窗口中，选择鼠标悬停时线框颜色：#71B0E6；填充颜色：#E6F4FF；选择鼠标按键按下时也为线框颜色：#71B0E6；填充颜色：#E6F4FF；全部设置好了之后，点击“确定”，关闭对话窗。如图13：
图13
步骤9：添加4月份日历
可以从部件库中拖曳一个表格到线框图中，然后分别增加行与列，制作成一个6行7列的表格。也可以复制一个3月份的表格来得到一个表格。制作表格完成后，把4月份的日期输入到表格里，记得给字体添加颜色以做区分哦。如图14
图14
步骤10：添加4月份日历交互样式事件
可以选中整个4月份日期，右击打开右击菜单，选择“交互样式”，在打开的交互样式对话窗口中，选择鼠标悬停时线框颜色：#71B0E6；填充颜色：#E6F4FF；选择鼠标按键按下时也为线框颜色：#71B0E6；填充颜色：#E6F4FF；全部设置好了之后，点击“确定”，添加交互样式完成。
步骤11：添加日历月份事件
制作完成3月份与4月份的日历后，还需要把对应的月份进行说明。
在部件库中，选择“线框图>公共>矩形”，把矩形拖曳到3、4月份日历的上面，设置矩形长度与两个月的日历等宽，即宽（w）=350px，高（h）=25px;如图15；
图15
给矩形添加颜色，此处填充颜色：#004FB8，线框颜色：#004FB8。从部件库中“线框图>公共>单行文本”拖曳到矩形上面，并对应着3月份的日历，修改文字为“2014年3月”，同样从部件库中拖曳一个单行文本到4月份的日历上方，修改文字为“2014年4月份”。如图16
图16
步骤12：添加月份切换按钮事件
接着，在矩形左右两端分别添加一个向左、向右切换的按钮，按钮可以用图片。此处图片来源是携程网上的截图。
在选择部件库>公共>图片，拖曳到2014年3月份的左边，双击图片部件，打开目标文件夹，选择目标图片文件，将可将图片导入。如图17：
图17
使用同样方法，导入一个向右切换的图片，最后完成如图18：
图18
为了给3月份与4月份做区分，从部件库>线框图>垂直线，拖曳一条垂直线放在3月份与4月份的日历中间。最后可以在部件库>线框图>矩形中，拖曳一个矩形到两个日历的下面，宽和高的参数可以分别比两个月的日历略大。如图19：
图19
步骤13：创建日历动态面板事件
选中前面创建的两个月份的日历，右击>转化为动态面板，如图20：
图20
双击刚刚转换得来的动态面板，打开动态面板状态管理对话框，给动态面板命名为“月份”，选中“状态1”，右击使得状态1处于可编辑状态，修改为“3月与4月”，并分别点击“+”按钮2次，添加两个面板状态，分别修改面板名称为“1月与2月”和“5月与6月”，点击“确定”完成设置。如图21
图21
步骤14:添加1月与2月、5月与6月日历事件
双击动态面板“月份”，打开动态面板状态管理对话窗，双击面板状态“1月与2月”，打开该动态面板，在该动态面板里创建1月与2月的日历，方法参考步骤4至步骤21。需要注意的1月与2月的日历中，只需要创建日历日期即可，不用给日历日期添加交互样式。完成如图22：
图22
利用同样的方法创建5月与6月的日历，需要注意的是，在5月与6月的日历中需要像3月与4月的日历一样添加日历日期交互样式。完成如图23：
图23
步骤15：添加鼠标点击事件
在面板状态“3月与4月”中，由于3月29日之前的日期都是已经过去的日期，故不用添加交互事件，只需要给3月29日——31日的日期添加交互事件即可。选中一个日期，如“30日”，双击部件交互和注释下的“鼠标单击时”，打开用例编辑器，如图24：
图24
在用例编辑器中，点击“设置文本”,选中“入住时间（文本框（单行））”，将文本设置为“2014-03-30”，如图25：
图25
编辑完上一步后，继续选择：部件>显示/隐藏，选中“月份”面板，点击“确定”关闭完成设置，如图26：
图26
按照同样的步骤给日期“31”添加同样的鼠标点击交互事件，但是要注意在即在用例编辑器对话窗口里，第三步时将文本设置为“2014-03-31”。
步骤16：添加其他月份日历交互事件
此步参考步骤17，方法相同，需要注意的两点：第一，1月与2月由于不可选择，故不需要添加鼠标点击事件；第二，4月、5月、6月的日历，在用例编辑器在第三步时将文本设置为对应的日期即可。完成如图27、图28：
图27
图28
步骤17：创建月份向左切换事件
双击打开动态面板“月份”管理窗口，双击面板“3月与4月”，打开该面板，选中左上角的向左切换按钮，部件属性窗口交互标签下，双击鼠标点击时事件，打开用例编辑器，如图29：
图29
在打开的用例编辑器，添加鼠标单击时（OnClick）事件动作：选择“设置面板状态”，选中“月份”面板，选择状态“1月与2月”，点击“确定”，完成事件，如图30
图30
步骤18：创建月份向右切换事件
在打开的 “3月与4月” 面板中，选中右上角的向右切换按钮，在部件属性窗口交互标签下，双击OnClick（点击时）事件，打开用例编辑器，如图31:
图31
在打开的用例编辑器，添加鼠标单击时（OnClick）事件动作：选择“设置面板状态”，选中“月份”面板，选择状态“5月与6月”，点击“确定”，完成事件，如图32
图32
步骤19：创建月份向左、右切换事件
参考步骤17给面板状态“5月与6月”添加向左切换事件，并切换到 “3月与4月”状态；如图33
图33
参考步骤18给面板状态“1月与2月”添加向右切换事件，并切换到“3月与4月”状态，如图34
图34
步骤20：添加动态面板“月份”隐藏事件
选中动态面板“月份”，右击打开右击菜单，选择“设为隐藏”，如图35
图35
步骤21：添加文本框（单行）获取焦点时事件
选中文本框（单行）部件，在部件属性窗口交互标签下获取焦点时事件，打开用例编辑器，如图36：
图36
在打开的用例编辑器里，选择部件>显示/隐藏，在“配置动作”选中“月份”动态面板；如图37：
图37
选择部件>至于顶层/底层，在“配置动作”选中“月份”动态面板，点击“确定”，完成事件添加。如图38：
图38
至此已完成了入住日期的时间控件制作，接下来是要开始制作“退房日期”时间控件了。
第二部分
制作“退房日期”时间控件元宵
在制作之前，先了解一下“退房日期”这个时间控件是由以下部分构成的：单行文本框、日历，点击单行文本框弹出的日历面板有2个月的日历，可以点击左上角的切换按钮向左切换，点击右上角的向右切换按钮向右切换。这次制作的时间控件的日历会包括1月与2月，3月与4月，5月与6月。
步骤23：制作“退房日期”时间控件
“退房日期”时间控件请参考步骤2至步骤22，方法一样，也可以制作进行复制，将“入住”修改为“退房”即可。
第三部分
交互测试
步骤24：生成原型
生成原型，测试交互效果。当首页载入时，点击“入住日期”右边的单行文本框，弹出日历面板，点击向左或向右切换按钮，切换月份，选择日期，日历面板隐藏，单行文本框显示所选择的日期。点击“退房日期”右边的单行文本框，弹出日历面板，点击向左或向右切换按钮，切换月份，选择日期，日历面板隐藏，单行文本框显示所选择的日期。
- End -