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>