flex 日期下拉框，选择一段日期

 在一般网页的制作过程中，我们做的程序，日期选择框，通过js，css样式，但是在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>
                   <!-- 将非可视元素（例如服务、值对象）放在此处 -->
                   <mx:DateFormatter id="formater" formatString="YYYY.MM.DD" />
         </fx:Declarations>
         <fx:Script>
                   <![CDATA[
                            import mx.controls.Alert;
                            import mx.events.CalendarLayoutChangeEvent;
                            private function parseChooser(date:Date):String{
                            var d:String = formater.format(date);
                            return d;
                            }
                            private function submitDate():void{
                            var start:String = dateField1.text;
                            var end:String=dateField2.text;
                            mx.controls.Alert.show("您选择的日期为:"+start + "到"+end,"提示");
                            }
                            private function clear():void{
                            dateField1.text="";
                            dateField2.text="";
                            }
                   ]]>
         </fx:Script>
        
         <mx:Panel title="时间选择" height="192" width="310" paddingTop="10" paddingLeft="10" paddingRight="10" x="12" y="15">
                   <mx:Label width="100%" text="选择日期" >
                           
                   </mx:Label>
                   <mx:HBox width="207">
                           
                            <mx: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="207">
                           
                            <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="206">
                           
                            <mx:Button label="确定" click="submitDate()"/>
                            <mx:Button label="重置" click="clear()"/>
                   </mx:HBox>
         </mx:Panel>
</s:Application>