<?xml version="1.0"?>
  <!-- Simple example to demonstrate DateChooser control. -->
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  
      <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" height="75%" width="75%" 
          paddingTop="10" paddingLeft="10" paddingRight="10">
  
          <mx:Label width="100%" color="blue"
              text="Select a date in the DateChooser control."/>
          <mx:Label width="100%" color="blue"
              text="Select it again while holding down the Control key to clear it."/>
              
          <mx:HBox horizontalGap="25">
            <mx:VBox>
                <mx:Label text="Simple DateChooser control."/>
                <mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"    
                    change="displayDate(DateChooser(event.target).selectedDate)"/>
                <mx:Label id="selection"  color="blue" text="Date selected:"/>
            </mx:VBox>
  
            <mx:VBox>
                <mx:Label text="Disable dates before June 1, 2006."/>
                <mx:DateChooser id="dateChooser2" yearNavigationEnabled="true"
                    disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}"/>
                <mx:Label  color="blue" text="Date selected: {df.format(dateChooser2.selectedDate)}"/>
            </mx:VBox>
          </mx:HBox>
          
      </mx:Panel>    
  </mx:Application>