<?xml version="1.0"?>
<!-- Simple example to demonstrate DateChooser control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" paddingBottom="0" viewSourceURL="srcview/index.html">
<!--这个例子实现了两个dateChooser,可以按照年月来选择.当选择了日期,所选择的数据使用两种不同的方法进行传递,并按照两种不同的格式显示在label里-->
    <mx:Script>
        <![CDATA[
 
            // Event handler function to write the selected
            // date to the Label control.        
            private function displayDate(date:Date):void {
                if (date == null)
                    selection.text = "Date selected: ";
                else
                    selection.text = "Date selected: " + date.getFullYear().toString() +
                        '/' + (date.getMonth()+1).toString() + '/' + date.getDate();
            }
        ]]>
    </mx:Script>
 
    <mx:DateFormatter id="df"/><!--这个的作用是进行格式化日期所使用的,查看as3帮助就知道了-->
 
    <mx:Panel title="DateChooser Control Example" width="600" color="0xffffff" borderAlpha="0.15" height="240"
       layout="horizontal" horizontalGap="15" paddingLeft="10" paddingTop="0" paddingRight="10" paddingBottom="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
 
           <mx:VBox>
          <mx:Label width="100%" color="0x000000" text="Simple DateChooser Control"/>
          <mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"  height="145"   
              change="displayDate(DateChooser(event.target).selectedDate)" color="0x000000"/><!--yearNavigationEnabled属性为true的时候启用年份导航,这是第一种传递方式-->
          <mx:Label id="selection" color="0x323232" text="Date selected:"/>
          </mx:VBox>
 
          <mx:VBox>
          <mx:Label width="100%" color="0x000000" text="Disable dates before Oct 31st, 2008"/>
          <mx:DateChooser id="dateChooser2" yearNavigationEnabled="true" width="175" height="145"
              disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/><!--这里的disabledRanges是禁用天数,注意,日期中的月份是从零开始计算的-->
          <mx:Label color="0x323232" text="Date selected: {df.format(dateChooser2.selectedDate)}"/><!--这里的是一个数据绑定,调用了DateFormatter来进行格式化然后显示出来的-->
        </mx:VBox>
 
        <mx:VBox width="30%">
            <mx:Text width="100%" color="0x323232" text="Select a date in the DateChooser control."/>
            <mx:Text width="100%" color="0x323232" text="Select it again while holding down the Control key to clear it."/>
        </mx:VBox>
 
    </mx:Panel>    
</mx:Application>