Flex 开始日期与结束日期DateField组件

1.<?xml version="1.0" encoding="utf-8"?>  
2.<s:Group 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.         width="100%" height="30">  
6.    <s:layout>  
7.        <s:HorizontalLayout verticalAlign="middle"/>  
8.    </s:layout>  
9.    <fx:Script>  
10.        <![CDATA[  
11.            import mx.events.CalendarLayoutChangeEvent;  
12.            protected function startDF_changeHandler(event:CalendarLayoutChangeEvent):void  
13.            {  
14.                endDF.enabled = true;  
15.                endDF.selectedDate = startDF.selectedDate;  
16.            }  
17.        ]]>  
18.    </fx:Script>  
19.    <fx:Declarations>  
20.        <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
21.    </fx:Declarations>  
22.    <s:Label text="开始日期："/>  
23.    <mx:DateField id="startDF" showToday="true" formatString="YYYY年MM月DD日" yearNavigationEnabled="true"   
24.                  width="160" change="startDF_changeHandler(event)"/>  
25.    <s:Line width="10"/>  
26.    <s:Label text="结束日期："/>  
27.    <mx:DateField id="endDF" showToday="true" formatString="YYYY年MM月DD日" yearNavigationEnabled="true"   
28.                  selectableRange="{{rangeStart:startDF.selectedDate}}" width="160" enabled="false"/>  
29.</s:Group> 
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="30">
<s:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.CalendarLayoutChangeEvent;
protected function startDF_changeHandler(event:CalendarLayoutChangeEvent):void
{
endDF.enabled = true;
endDF.selectedDate = startDF.selectedDate;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<s:Label text="开始日期："/>
<mx:DateField id="startDF" showToday="true" formatString="YYYY年MM月DD日" yearNavigationEnabled="true"
  width="160" change="startDF_changeHandler(event)"/>
<s:Line width="10"/>
<s:Label text="结束日期："/>
<mx:DateField id="endDF" showToday="true" formatString="YYYY年MM月DD日" yearNavigationEnabled="true"
  selectableRange="{{rangeStart:startDF.selectedDate}}" width="160" enabled="false"/>
</s:Group>

对于结束日期：selectableRange="{{rangeStart:startDF.selectedDate}}"当中需要注意的是黑体字部分，设定了可用范围的起始时间将由startDF的选择日期决定。

dateField组件除了提供可用范围外，还提供了不可用范围，不过此种做法毕竟繁琐，不推荐。

参考：
http://hi.baidu.com/hongzhi_zhang/blog/item/bc924d8cd4c1351ab21bba35.html
http://fhuan123.iteye.com/blog/621340