日期区域空间（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):String 17 { 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>
