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

<?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;
				if(endDF.selectedDate < startDF.selectedDate)
					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:[b]startDF.selectedDate[/b]}}"当中需要注意的是黑体字部分，设定了可用范围的起始时间将由startDF的选择日期决定。

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

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