在一般网页的制作过程中,我们做的程序,日期选择框,通过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>