flex DateField 实现日期和年份可以下拉式

用了几个小时终于搞定

现将代码贴上,

<?xml version="1.0" encoding="utf-8"?>
<mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml"   width="245" height="190" creationComplete="onCreationComplete()">
	
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.controls.Alert;
			import mx.events.DateChooserEventDetail;
			import mx.events.DateChooserEvent;
			import mx.events.CalendarLayoutChangeEvent;
			
			[Bindable]
            public var arYears:Array = [];
			/**
			 * onCreationComplete
			 * 
			 * @access public
			 * @param void
			 * @return void
			 */
			public function onCreationComplete() : void 
			{
				this.arYears = [];
				for(var i:int = 1900;i < 2301;i ++)
					this.arYears.push(i.toString());
					
				setChange();
				
			}
			public function setChange() : void 
			{
				try
		    	{	
					var currentDate : Date = this.selectedDate == null?new Date():this.selectedDate;
					
					// simple init
					this.months.selectedIndex = currentDate.getMonth();
					this.years.selectedItem = currentDate.getFullYear().toString();	
				}catch(e:Error){}			
			}
			public override function set selectedDate(value:Date):void
		    {
		    	try
		    	{
			        super.selectedDate=value;
			        setChange();
		    	}catch(e:Error){}
		    }
			protected override function createChildren():void
			{
				try
		    	{
				   super.createChildren();
				   addChild(months);
				   addChild(years);		
				   this.addEventListener(DateChooserEvent.SCROLL, onChangeMonth);
				   this.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateGrid_changeHandler);	
				  // this.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateGrid_changeHandler);	  
			    }catch(e:Error){}
			}
			 private function dateGrid_changeHandler(event:CalendarLayoutChangeEvent):void
		    {
		        setChange();
		    }
			/**
			 * onChangeMonth
			 * 
			 * @access private
			 * @param DateChooserEvent
			 * @return void
			 */
			public function onChangeMonth( event : DateChooserEvent ) : void 
			{
				if (event.detail == DateChooserEventDetail.NEXT_MONTH)
					this.months.selectedIndex++;
					
				if (event.detail == DateChooserEventDetail.PREVIOUS_MONTH) 
					this.months.selectedIndex--;
				//mx.controls.Alert.show((event.triggerEvent.currentTarget as Button).id.toString());
				if (event.detail == DateChooserEventDetail.PREVIOUS_YEAR) {
					this.months.selectedIndex = 11;
					this.years.selectedIndex--;
				}
				
				if (event.detail == DateChooserEventDetail.NEXT_YEAR) {
					this.months.selectedIndex = 0;
					this.years.selectedIndex++;
				}
			}
			
			/**
			 * onChangeDropDownMonth
			 * 
			 * @access private
			 * @param Event event
			 * @return void
			 */
			private function onChangeDropDownMonth( event : Event ) : void 
			{
				this.displayedMonth = (this.months.selectedIndex as Number);
			}
			
			/**
			 * onChangeDropDownYears
			 * 
			 * @access private
			 * @param Event event
			 * @return void
			 */
			private function onChangeDropDownYears( event : Event ) : void 
			{
				this.displayedYear = this.years.selectedItem.toString();
			}
			
			
			
		]]>
	</mx:Script>
	
	<!--mx:DateChooser id="calend" name="calendar" width="245" height="190" /-->
		<mx:ComboBox id="months" x="26" y="15" width="105"  change="onChangeDropDownMonth(event)">
			<mx:ArrayCollection>
				['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
			</mx:ArrayCollection>
		</mx:ComboBox>
		<mx:ComboBox id="years" x="155" y="15" width="75" change="onChangeDropDownYears(event);">
			<mx:ArrayCollection source="{arYears}"/>
		</mx:ComboBox>
</mx:DateChooser>

package app.lib.components
{
	 import flash.system.IME;
	 
	 import mx.controls.DateField;
	 import mx.core.ClassFactory;
	 import mx.events.DateChooserEvent;
        	
     public class MyDateField extends DateField
	 {
		  public var chooser:calendar;
		  
		  public function MyDateField()
		  {
			   super();
			   
			   this.formatString="YYYY年MM月DD";
			   this.yearNavigationEnabled = false;
			   
			   this.firstDayOfWeek=1;
			   this.dayNames=["日","一","二","三","四","五","六"];
			   this.monthNames=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
			   this.dropdownFactory=new ClassFactory(calendar);
		  
		  		this.addEventListener("focusIn",function():void{IME.enabled=false;});
		  		this.addEventListener("focusOut",function():void{IME.enabled=true;focusOutDateField()});
		  		this.addEventListener("change",onChangeMonth);
		  }
	  
	 		 public function onChangeMonth( ) : void 
			{
				this.dropdown.selectedDate = this.selectedDate;
			}
			
                [Bindable]
                public var startDate:Date;
                [Bindable]
                public var endDate:Date;
                public var dateFlg:Boolean;
                
                private function focusOutDateField():void{
                        if(this.text != ""&&this.text !=null){
                                dateFlg = true;
                                this.text = replaceAll(this.text);//Y年MM月DD日
                                //this.text = replaceAll(this.text,"-");
                                this.text = replaceAll(this.text,"年");
                                this.text = replaceAll(this.text,"月");
                                this.text = replaceAll(this.text,"日");
//                                this.text = replaceAll(this.text,"\");
                                var yearMy:Number = Number(this.text.substr(0,4));
                                var monthMy:Number =  Number(this.text.substr(4,2));
                                var dayMy:Number = Number(this.text.substr(6,2));
                                var yearStr:String = this.text.substr(0,4);
                                var monthStr:String = this.text.substr(4,2);
                                var dayStr:String = this.text.substr(6,2);
                               
                                if(yearMy > 2300){
                                        yearStr = '2300';
                                        yearMy = 2300;
                                        dateFlg = false;
                                }
                                if(yearMy < 1900){
                                        yearStr = '1900';
                                        yearMy = 1900;
                                        dateFlg = false;
                                }
                                var bool:Boolean = ((yearMy%4 == 0) && (yearMy%100 != 0)) || (yearMy%400 == 0) ? true : false;
                                if(monthMy < 1 || monthMy > 12){
                                        monthStr = '01';
                                        monthMy = 1;
                                        dateFlg = false;
                                }else if(monthMy < 10){
                                        monthStr = "0" + monthMy;
                                }
                               
                                if(dayMy >= 1 && dayMy < 10){
                                        dayStr = "0" + dayMy;
                                }
                                switch(monthMy){
                                        case 1:
                                        case 3:
                                        case 5:
                                        case 7:
                                        case 8:
                                        case 10:
                                        case 12:
                                                if(dayMy < 1 || dayMy > 31 ){
                                                        dayStr = '01';
                                                        dateFlg = false;
                                                }
                                                break;
                                        case 4:
                                        case 6:
                                        case 9:
                                        case 11:
                                                if(dayMy < 1 || dayMy > 30 ){
                                                        dayStr = '01';
                                                        dateFlg = false;
                                                }
                                                break;
                                        case 2:
                                                if(bool){
                                                        if(dayMy < 1 || dayMy > 29){
                                                                dayStr = '01';  
                                                                dateFlg = false;
                                                        }
                                                }else{
                                                        if(dayMy < 1 || dayMy > 28){
                                                                dayStr = '01';  
                                                                dateFlg = false;
                                                        }
                                                }
                                                break;
                                }
                                if(dayStr == ""){
                                        dayStr = "01";
                                        dateFlg = false;
                                }
                               
                                this.text = yearStr + monthStr + dayStr;
                                if(this.text.length == 8){
                                        textSub();
                                }
                        }
                }
               
                private function textSub():void{
                       /* if(!dateFlg){
                                this.selectedDate = null;
                                this.text = null;
                                this.startDate = null;
                                this.endDate = null;
                        }
                        else
                        {*/
                                var myDate:Date = new Date();
                                myDate.setFullYear(Number(this.text.substr(0,4)),Number(this.text.substr(4,2))-1,Number(this.text.substr(6,2)) );
                                this.selectedDate = myDate;
                                this.text = this.text.substr(0,4) + "年" + this.text.substr(4,2) + "月" + this.text.substr(6,2);
                       // }
                }
               
                private function replaceAll(str:String,match:String="-"):String
                {
                        while(str.search(match) != -1)
                        {
                                str = str.replace(match,"");
                        }
                        return str;
                }
	 }
}

示例:跟DateField用法一样,最好给个 selectedDate 

<components:MyDateField  selectedDate="{new Date()}" editable="false" yearNavigationEnabled="false" />