首页 > 代码库 > Flex 日期区域控件
Flex 日期区域控件
日期区域空间（DateField Control）由一个文本输入控件和一个日历图标组成。
用户可以在文本输入控件中输入日期，或者单击日历图标弹出日期选择器后，在日期选择器中选择合适的日期。
1、日期区域控件标签
对应的MXML标签为<mx:DateField>.
该控件的属性融合文本输入控件的属性和日期选择器控件的属性。除此之外，自身的常用属性如图所示：
在labelFunction指明的方法中，参数为Date类型，返回值类型为String,格式如下所示：
public function formatDate(currentDate:Date):String{
//定义方法内容
return dateString;
}
参数说明：currentDate:选择的时间。
在parseFunction指明的方法中，包含两个参数，返回值为Date类型，格式如下所示：
public function parseDate(valueString:string,inputFormat:String):Date{
//定义方法内容
return newDate
}
参数说明：valueString:用户输入的日期。
inputFormat:日期的格式，如MM/DD/YYYY。
labelFunction和parseFunction属性通常一起使用，用来格式化日期区域控件的日期格式。如果这两个属性在一起使用，如不指定处理方法，应将属性设为null。
注意：控件中的文本输入属性editeable为true时，用户可以收工输入日期。为false时，用户不能输入日期，只能在单击控件时，在自动弹出的时间选择器中选择日期。
2.事件
日期区域控件中可触发的事件包括如下5个：
change:改变选择日期或者关闭日期选择器时，该事件被触发。对象类型：mx.events.CalendarLayoutChangeEvent。
dataChange:日期改变时该事件被触发。常与data属性一起出现。
close：在日期选择器中选择日期后，或者用户单击组件外部区域关闭日期选择器后触发该事件。对象类型:mx.events.DropdownEvent。
open：当用户选择控件区域打开下拉箭头时触发的事件。事件对象类型: mx.events.Dropdown Event。
scroll：在改变日期选择器中月份时触发该事件。事件对象类型：mx.events.DateChooserEvent。
3.格式化日期
除了使用控件的属性格式化日期外，还可以使用formatDate（）方法以及<mx:DateFormatter>标签指定日期格式。在labelFunction和parseFunction指定的方法格式化数据时，如果定义了<mx:DateFormatter>标签，在labelFunction指定的方法中，可以调用<mx:DateFormatter>对象格式化日期，代码如下所示：
<fx:Script>
<![CDATA[
private function formatDate(date:Date):String{
return formatter.format(date);
}
]]>
</fx:Script>
<!--使用DateFormatter对象的formatString属性指定格式-->
<mx:DateFormatter id="formatter" formatString="YYYY/MM/DD"/>
<mx:DateField id="df" labelFunction="formatDate" parseFunction="null"/>
4.创建日期区域控件
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx"> 5 <fx:Declarations> 6 <!-- 将非可视元素（例如服务、值对象）放在此处 --> 7 <!--定义时间格式--> 8 <mx:DateFormatter id="formater" formatString="YYYY.MM.DD"/> 9 </fx:Declarations>10 <fx:Script>11 <![CDATA[12 import mx.controls.Alert;13 import mx.events.CalendarLayoutChangeEvent;14 15 //处理时间选择器日期时间16 private function parseChooser(date:Date):String17 {18 var d:String = formater.format(date);19 return d;20 }21 22 //处理选择完毕后的事件23 private function submitDate():void{24 var start:String = dateField1.text;25 var end:String = dateField2.text;26 mx.controls.Alert.show("您选择的日期为"+start+"到"+end,"提示");27 }28 29 //清空输入的日期30 private function clear():void{31 32 dateField1.text="";33 dateField2.text="";34 }35 36 ]]>37 </fx:Script>38 39 40 41 <mx:Panel title="时间区域控件例子" height="192" width="310" paddingTop="10"42 paddingLeft="10" paddingRight="10">43 <mx:Label width="100%"44 text="请选择查询的日期，日期格式为 年.月.日"/>45 <!--定义开始时间选择，定义时间范围为2000年1月1日到2007年10月15日，允许用户输入时间，并改变日期选择器选择的时间格式-->46 <mx:HBox width="207">47 <mx:Label text="起始时间"/>48 <mx:DateField id="dateField1"49 labelFunction="parseChooser"50 parseFunction="null"51 yearNavigationEnabled="true"52 editable="true"53 selectableRange="{{rangeStart:new Date(2000,0,1),rangeEnd:new Date(2007,9,15)}}"/>54 </mx:HBox>55 56 <!--定义结束时间选择，与开始时间选择相类似-->57 <mx:HBox width="206">58 <mx:Label text="截至日期"/>59 <mx:DateField id="dateField2"60 labelFunction="parseChooser"61 parseFunction="null"62 yearNavigationEnabled="true"63 editable="true"64 selectableRange="{{rangeStart:new Date(2000,0,1),rangeEnd:new Date(2007,9,15)}}"/>65 66 </mx:HBox>67 <mx:HBox width="206">68 <mx:Button label="确定" click="submitDate()"/>69 <mx:Button label="重置" click="clear()"/>70 71 </mx:HBox>72 73 </mx:Panel>74 </s:WindowedApplication>
Flex 日期区域控件