Flex 实现日期范围的选择并格式化

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g.,services,value objects) here -->
		<!--<s:DateTimeFormatter id="formatter" dateTimePattern="YYYY.MM.DD"/>-->
		<mx:DateFormatter id="formatter" formatString="YYYY-MM-DD"/>
		
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			
			private function parseChooser(date:Date):String
			{
			
				var d:String = this.formatter.format(date);
				return d;
			}
			
			private function submitDate():void
			{
				var start:String = this.dateField1.text;
				var end:String = this.dateField2.text;
				
				Alert.show("开始时间："+start + "结束时间："+ end);
			
			}
			
			private function clear():void
			{
			
				this.dateField1.text="";
				this.dateField2.text="";
			}
		
		]]>
	</fx:Script>

	
	
	<mx:Panel title="时间选择" height="192"  width="600" paddingTop="10" paddingLeft="10" paddingRight="10" x="12" y="15">
		
		<s:Label text="选择日期"/>
		
		<mx:HBox width="320">
				<s:Label text="起始时间"/>
				<mx:DateField id="dateField1" labelFunction="parseChooser" yearNavigationEnabled="true" editable="true"
							  selectableRange="{{rangeStart:new Date(2000,1),rangeEnd:new Date(2007,9,15)}}"/>
			
			
		</mx:HBox>
		
		<mx:HBox width="320">
			
			<mx:Label text="截至时间" />
			<mx:DateField id="dateField2" labelFunction="parseChooser"  yearNavigationEnabled="true" editable="true"
						  selectableRange="{{rangeStart:new Date(2000,15)}}"/>
			
		</mx:HBox>
		<mx:HBox width="300">
			
			<mx:Button label="确定" click="submitDate()"/>
			<mx:Button label="重置" click="clear()"/>
		</mx:HBox>
		
		
		
	</mx:Panel>
</s:Application>

效果图：