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>
