flex datechooser 日期小例子

在这个例子中，我们讲解的是DateChooser 控件，这个里面还涉及到年份变化的界面，还有年份的改变事件。

例图：

<?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>

                   <!-- 将非可视元素（例如服务、值对象）放在此处 -->

         </fx:Declarations>

         <fx:Script>

                   <![CDATA[

                            import mx.controls.Alert;

                            import mx.controls.DateChooser;

                            import mx.events.CalendarLayoutChangeEvent;

                            import mx.events.DateChooserEvent;

                            public function changeDate(event:CalendarLayoutChangeEvent):void{

                            var showDate:String = event.currentTarget.selectedDate.getFullYear()+"年"+event.currentTarget.selectedDate.getMonth()+"月"+

                                     event.currentTarget.selectedDate.getDay()+"日";

                            }

                            private function changeMonth(event:DateChooserEvent):void{

                            mx.controls.Alert.show(event.detail);

                            }

                   ]]>

         </fx:Script>

         <mx:Panel title="date choose日期选择" width="239" height="273" layout="vertical" horizontalAlign="center" x="89" y="33">

                   <mx:DateChooser id="date1"  yearNavigationEnabled="true" selectedRanges="{{rangeStart:new Date(2006,0,1),rangeEnd:new Date(2007,9,15)}}" scroll="changeMonth(event)" change="changeDate(event)">

                           

                   </mx:DateChooser>

         </mx:Panel>

         <mx:Text id="showDateText" width="174" height="24" x="341" y="47">

                  

         </mx:Text>

        

</s:Application>