Flex Date Chooser Example

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

    <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"/>
    
    <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"/>
          <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"/>
          <mx:Label color="0x323232" text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
        </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>