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,0,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,0,1),rangeEnd:new Date(2007,9,15)}}"/>

</mx:HBox>
<mx:HBox width="300">

<mx:Button label="确定" click="submitDate()"/>
<mx:Button label="重置" click="clear()"/>
</mx:HBox>

</mx:Panel>
</s:Application>