《第8章 日期选择实现课件》由会员分享，可在线阅读，更多相关《第8章 日期选择实现课件（10页珍藏版）》请在金锄头文库上搜索。
1、第8章 日期选择实现,在构建用户界面时，经常用到日期的输入和选择。输入日期时，用户可以使用键盘输入，也可以在类似于日历的弹出式对话框中，通过鼠标单击所选日期。 在Flex中可以通过日期输入控件实现输入和选择日期。Flex内置了2种日期输入控件：日期选择器控件（DateChooser Control）和日期区域控件（DateField Control）。,8.1 日期选择器控件,日期选择器控件（DateChooser Control）类似于日历。利用年、月、日和星期来表示一个日期。图8.1使用了该控件。 在该控件中，既可以选择日期，也可以根据需求限制日期的选择范围，或者禁止选择某一特殊日期。选择
2、日期后，还可以单击已选择日期取消选定。,8.1.1 日期选择器控件标签,日期选择器控件对应的MXML标签为。该控件的常用属性如表所示。,8.1.2 日期选择器控件事件,在用户与控件交互时，可触发2种事件，如下所示。 change：改变选择日期时会触发change事件。该事件的事件对象为mx.events.CalendarLayoutChangeEvent，所以在使用该事件时，需要将事件声明为CalendarLayoutChangeEvent。 scroll：在控件上改变月份时会触发scroll事件。该事件的事件对象为mx.events.DateChooserEvent。使用该事件时需要将事件声
3、明为DateChooserEvent。,8.1.3 创建日期选择器控件,创建日期选择器控件时，插入后定义相应的属性及事件即可。下面以图说明如何创建日期选择器控件。 图是一个日期选择器控件的例子，在选择日期后，才控件下方的文本框显示当前选择的日期，在改变月份时，弹出对话框。,8.2 日期区域控件,日期区域控件（DateField Control）由一个文本输入控件和一个日历图标组成。用户可在文本输入控件中输入日期，或者单击日历图标弹出日期选择器后，在日期选择器中选择合适的日期。单击选择的日期后，该日期出现在文本输入区域。图8.2为日期区域控件，左边为没打开日期选择器的状态，右边为打开状态。,8.
4、2.1 日期区域控件标签,日期区域控件对应的MXML标签为。该控件的属性融合文本输入控件的属性、日期选择器控件的属性，除文本输入控件和日期选择器控件的属性外，日期区域控件自身的常用属性如表所示。,8.2.2 日期区域控件事件,在日期区域控件中，无论输入或者通过日期选择器选择日期，都会触发相应的事件。日期区域控件中可触发的事件包括如下5个： change：该事件为日期选择器中发生的事件。在改变选择日期或者关闭日期选择器时，该事件被触发。该事件对象类型为mx.events.CalendarLayoutChangeEvent。 dataChange：控件中日期改变时该事件被触发。常与data属性一起
5、出现。 close：在日期选择器中选择日期后，或者用户单击组件外部区域关闭日期选择器后触发该事件。该事件对象类型为mx.events.DropdownEvent。 open：当用户选择控件区域打开下拉箭头时触发的事件。该事件对象类型为mx.events.DropdownEvent。 scroll：该事件为日期选择器控件，在改变日期选择器中月份时触发该事件。该事件对象类型为mx.events.DateChooserEvent。,8.2.3 格式化日期,除了使用控件的属性格式化日期外，还可以使用formatDate()方法以及标签指定日期格式。在labelFunction和parseFunction指定的方法格式化数据时，如果定义了标签，在labelFunction指定的方法中，可以调用对象格式化日期，代码如下所示。 ,8.2.4 创建日期区域控件,创建日期区域控件十分简单，只要插入控件标签，定义属性和相应的事件即可。下面以图为例，说明创建日期控件的方法。在选择日期后，单击【确定】按钮完成选择，弹出对话框显示选择的日期，如图所示。,
