Flex Data Field Example

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the DateField 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 for the DateField change event.
         private function dateChanged(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="DateField Control Example" width="600" color="0xffffff" borderAlpha="0.15" height="240"
       layout="horizontal" horizontalGap="15" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
        
        <mx:VBox width="50%" borderColor="0xDCDCDC" borderStyle="solid" height="100%" paddingLeft="10">
            <mx:Label id="selection" color="0x323232" text="Date selected:" />
            
            <mx:DateField id="dateField1" yearNavigationEnabled="true"
                change="dateChanged(DateField(event.target).selectedDate)" color="0x000000"/>
                
            <mx:Label color="0x000000" text="Basic DateField:"/>
            <mx:Text width="100%" color="0x323232"
                text="Select a date in the DateField control. Select it again while holding down the Control key to clear it."/>
            
        </mx:VBox>
        
        <mx:VBox width="50%" borderColor="0xDCDCDC" borderStyle="solid" height="100%" paddingLeft="10">
            <mx:Label color="0x323232" text="Date selected: {df.format(dateField2.selectedDate)}"/>
            
            <mx:DateField id="dateField2" yearNavigationEnabled="true" 
                disabledRanges="{[ {rangeEnd: new Date(2008, 9, 31)} ]}" color="0x000000"/>
                
            <mx:Text color="0x000000" text="Disable dates on or before Oct 31, 2008."/>
        </mx:VBox>
        
    </mx:Panel>
</mx:Application>