Flex4.5 自定义的日历控件

效果图：

<?xml version="1.0" encoding="utf-8"?>
<mx:Form xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 width="100%" height="22" minWidth="50" maxHeight="22" chromeColor="#80A8C6" fontFamily="宋体"
		 initialize="oninit()" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
	<fx:Metadata>
		[Event(name="mouseclick", type="flash.events.Event")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[			
			import ActionScript.AddDataArray;
			import ActionScript.ToggleLinkButtonSkin;
			import ActionScript.WindowPoint;
						
			import mx.controls.Button;
			import mx.controls.LinkButton;
			import mx.events.FlexMouseEvent;
			import mx.events.ListEvent;
			import mx.managers.PopUpManager;
			
			private var mDateValue:Date = new Date();
			private var datevalue:Date = new Date();
			public var showBoolean:Boolean = false;
			
			private var linkskin:ToggleLinkButtonSkin;
			private var newPoint:WindowPoint = new WindowPoint();
			private var selected:Boolean = false;
			private var _date:AddDataArray = new AddDataArray();
			//组件初始化
			private function oninit():void{
				ViewDate(DateValue);
				//_CreateControls();
				var b:Button = new Button();
				this.removeChild(frmData);
				selectedate.addEventListener("click",popup);
			}
			public function removepop(e:MouseEvent):void{				
				//关闭日历
				PopUpManager.removePopUp(frmData);
				showBoolean = false;
			}
			public function Apppopup(event:AppEvent):void{
				//打开日历
				PopUpManager.removePopUp(frmData);
				showBoolean = false;
			}//function
			public function popup(event:MouseEvent):void{
				//打开日历
				if(!showBoolean){
					PopUpManager.removePopUp(frmData);
					//frmData = new Form();
					PopUpManager.addPopUp(frmData,selectedate,false);
					PopUpManager.centerPopUp(frmData);
					
					newPoint.setDateData(frmData,event);
					showBoolean = true;
					
				}else{
					showBoolean = false;
					PopUpManager.removePopUp(frmData);
				}
			}//function
			public function set DateValue(value:Date):void{
				mDateValue = value;
				ViewDate(value);
			}
			public function get DateValue():Date{
				return mDateValue;
			}
			private function ViewDate(value:Date):void{
				//日期转年月日格式
				if(value != null){
					selectedate.text = ReturnDateformat(value);
					
					_CreateControls();
				}
				
			}			
			private function _CreateControls():void{
				SetSelectYears(DateValue);
				createDate(DateValue);
			}
			private function linkbtnsetStyle(item:LinkButton):void{
				//设置linkbutton控件的样式
				item.toggle = true;
				item.setStyle("paddingRight",0);
				item.setStyle("paddingLeft",0);
				item.setStyle("paddingTop",0);
				item.setStyle("paddingBottom",0);
			}
			private function createDate(value:Date):void{
				frmdates.removeAllChildren();
				var towmonth:int = 0;
				var buttons:Array = new Array();
				var item:LinkButton;
				if((value.fullYear%4 ==0 && value.fullYear%100 != 0)|| value.fullYear % 400 ==0){
					towmonth=29;
					
				}else{
					towmonth = 28;
				}
				var monthdays:Array = new Array(31,towmonth,31,30,31,30,31,31,30,31,30,31);
				//生成本月第一天
				var nd:Date = new Date(value.fullYear,value.month,1);
				var pmdays:int;//上一个月的日数
				if(nd.month == 0){
					pmdays = monthdays[11];
				}else{
					pmdays = monthdays[(nd.month -1)];
				}
				for(var i:int=(pmdays-nd.day+1); i<= pmdays; i++){
					item = new LinkButton();
					linkbtnsetStyle(item);
					item.label = i.toString();
					item.setStyle("fillColors",[0x808080,0x808080]);
					if(nd.month == 0){
						item.data = new Date(nd.fullYear-1,11,i);
					}else{
						item.data = new Date(nd.fullYear,nd.month-1,i);
					}
					item.visible = false;
					buttons.push(item);
				}
				//生成本月天数
				for(var j:int=1; j<= monthdays[nd.month];j++){
					item = new LinkButton();
					linkbtnsetStyle(item);
					item.setStyle("skin",ActionScript.ToggleLinkButtonSkin);
					item.label = j.toString();
					item.data = new Date(nd.fullYear,nd.month,j);
					//设置当前日期控件的名字,状态
					if(nd.fullYear == datevalue.fullYear && nd.month == datevalue.month && j == datevalue.date){						
						item.selected = true;
						item.name = "defaultitem";
					}
					if(DateValue.fullYear == nd.fullYear && DateValue.month == nd.month && j == DateValue.date){						
						//保持选择日期的状态
						item.selected = true;
					}
					if(nd.fullYear == datevalue.fullYear && nd.month == datevalue.month && j > datevalue.date){
						//设置日期的范围,超过则'不允许用户交互'
						item.enabled = false;
					}
					item.visible = true;
					buttons.push(item);
				}
				//生成本月最后一天
				nd = new Date(value.fullYear,value.month,monthdays[nd.month]); 
				var nday:int =1;//下一个月的日期
				for(var k:int=nd.day+1; i<7; i++){
					item = new LinkButton();
					linkbtnsetStyle(item);
					item.label = k.toString();
					item.setStyle("fillColors",[0x808080,0x808080]);
					if(nd.month == 11){
						item.data=new Date(nd.fullYear+1,0,nday);
					}else{
						item.data = new Date(nd.fullYear,nd.month+1,nday);
					}
					buttons.push(item);
					nday++;
					
				}
				//添加到显示列表
				var panel:ControlBar;
				var row:int = 0;
				for(var n:int=0;n<buttons.length; n++){
					buttons[n].width = 20;
					buttons[n].height = 16;
					(buttons[n] as LinkButton).addEventListener("click",onclick);
					if(n==0 || (n+1)%7 ==1){
						panel = new ControlBar();
						panel.width = new Number("100%");
						panel.setStyle("paddingBottom",0);
						panel.setStyle("paddingLeft",3);
						panel.setStyle("paddingRight",0);
						panel.setStyle("paddingTop",0);
						row++;
						panel.label = n.toString();
						frmdates.addChild(panel);
					}
					panel.addChild(buttons[n] as DisplayObject);
				}
				
			}
			//日期选择事件
			private function onclick(event:Event):void{								
				Clearlnkbtn(event.target.name);
				DateValue = (event.currentTarget.data as Date);	
				selected = true;
				var e:Event = new Event("mouseclick");
				dispatchEvent(e);
				removepop(event as MouseEvent);
				//trace("1231");
			}
			private function Clearlnkbtn(name:String):void{
				//切换选择日期状态
				var contain:DisplayObjectContainer;
				var child:DisplayObject;
				for(var j:int=0; j < frmdates.numChildren; j++){
					contain = frmdates.getChildAt(j) as DisplayObjectContainer;
					for(var i:int=0; i < contain.numChildren; i++){
						child = contain.getChildAt(i);
						var strName:String = child.name;
						if(strName != name && strName != "defaultitem"){
							(child as LinkButton).selected = false; 
							continue;
						}
						(child as LinkButton).selected = true;
						//return; 
						//i--;
					}
				}
				
			}
			//初始化'年'与'月'
			private function SetSelectYears(date:Date):void{
				var nyears:Array = new Array();
				var start:Number = datevalue.fullYear - 10;
				var end:Number   = datevalue.fullYear;
				var months:Array= new Array();
				
				var tomonth:Number;
				if(date.fullYear < datevalue.fullYear){
					tomonth = 12;
				}else{
					tomonth = datevalue.month + 1; 
				}
				for(var i:Number = start; i<=end;i++){
					nyears.push({label:i,data:i});
				}
				
				for(var k:int=1; k <= tomonth; k++){
					months.push({label:k,data:k});
				}
				cmdPYears.dataProvider = nyears;
				cmdPYears.selectedIndex = 10-(end - date.fullYear);
				cmdmonth.dataProvider = months;
				cmdmonth.selectedIndex = date.month;
			}
			//设置列表控件日期'月'范围
			private function selectedYearChange_month(year:Number):void{
				var months:Array = new Array();
				var date:Date = new Date();
				var month:Number = date.getMonth()+1;
				if(year < date.fullYear){
					month = 12;
				}
				for(var i:int=1; i <= month; i++){
					months.push({label:i,data:i});
				}
				cmdmonth.dataProvider = months;
				cmdmonth.selectedIndex = DateValue.month;
				//createDate(date);
			}
			protected function yearchange():void
			{
				try{
					var d:Date = new Date(
						cmdPYears.selectedItem.data,
						cmdmonth.selectedItem.data-1,1);
					//createDate(d);
					selectedYearChange_month(d.fullYear);
					monthchange();
				}catch(e:TypeError){
					trace(e.toString())
				}
			}
			private function monthchange():void{
				try{
					var d:Date = new Date(
						cmdPYears.selectedItem.data,
						cmdmonth.selectedItem.data-1,1);
					createDate(d);
				}catch(e:TypeError){
					trace(e.toString())
				}
				
			}
			//左右控件事件
			protected function linkchange(type:String,_month:int):void
			{
				try{
					var month:int =_month;
					var thedate:Number = cmdPYears.selectedItem.data;
					if(type == "up"){
						month--;
					}else{
						month++;
					}
					if(thedate == datevalue.fullYear){
						if(month > cmdmonth.dataProvider.length-1){
							return;
						}
						if(month < 0){
							thedate-=1;
							month = 11;
						}
					}else if(thedate < datevalue.fullYear){
						if(month < 0){
							thedate-=1;
							month = 11;
						}
						if(month > cmdmonth.dataProvider.length-1){
							thedate+= 1;	
							month = 0;
						}
					}
					
					var d:Date = new Date(thedate,
						month,1);
					//cmdmonth.selectedIndex = month;
					SetSelectYears(d);
					createDate(d);
				}catch(e:IOError){
					trace(e.toString())
				}
			}
			/**
   * 日期格式
   * @param value 日期
   * @return 返回YYYY-MM-DD格式
   */
  public function ReturnDateformat(value:Object):String{
   var dateformat:DateFormatter = new DateFormatter();
   dateformat.formatString = "YYYY-MM-DD";
   var nowdate:String = dateformat.format(value);
   return nowdate;
  }
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:TextInput id="selectedate" width="100%" height="100%" enabled="true" editable="false"
				 
				  />
	<mx:Form width="215" height="195" paddingBottom="6" paddingLeft="6" paddingRight="6" paddingTop="6" fontSize="12" id="frmData"
			 backgroundColor="#ffffff" backgroundAlpha="0.99" borderStyle="solid" cornerRadius="11" alpha="1.0" borderColor="#808080">
		<mx:Canvas width="100%">
			<mx:ComboBox change="yearchange()"  mouseFocusEnabled="false" rowCount="10" width="60" useHandCursor="true" id="cmdPYears"
						 horizontalCenter="-27" paddingLeft="1" paddingRight="0" editable="true"/>
			<mx:ComboBox change="monthchange()"  mouseFocusEnabled="false" rowCount="10" width="48" id="cmdmonth" 
						 horizontalCenter="33" editable="true"/>
			<mx:Button click="linkchange('up',cmdmonth.selectedIndex)" left="1" label="<<" width="35" height="20"/>
			<mx:Button click="linkchange('down',cmdmonth.selectedIndex)" right="1" label=">>" width="35" height="20"/>
		</mx:Canvas>
		<mx:ControlBar width="100%" paddingBottom="0" paddingLeft="8" paddingRight="0" paddingTop="0">
			<mx:Label text="日" textAlign="center" width="20" height="18" fontWeight="bold"/>
			<mx:Label text="一" textAlign="center" width="20" height="18" fontWeight="bold"/>
			<mx:Label text="二" textAlign="center" width="20" height="18" fontWeight="bold"/>
			<mx:Label text="三" textAlign="center" width="20" height="18" fontWeight="bold"/>
			<mx:Label text="四" textAlign="center" width="20" height="18" fontWeight="bold"/>
			<mx:Label text="五" textAlign="center" width="20" height="18" fontWeight="bold"/>
			<mx:Label text="六" textAlign="center" width="20" height="18" fontWeight="bold"/>
		</mx:ControlBar>
		<mx:Form id="frmdates" width="100%" height="100%" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
			
		</mx:Form>
	</mx:Form>
</mx:Form>

下这个是LinkButton的皮肤

package ActionScript
{
	import mx.skins.halo.LinkButtonSkin; 

	public class ToggleLinkButtonSkin  extends LinkButtonSkin 
	{
		public function ToggleLinkButtonSkin()
		{
			super();
		}
		/**
		 * 重写LinkButton控件状态
		 * @param w 宽
		 * @param h 高
		 */
		override protected function updateDisplayList(w:Number, h:Number):void { 
			super.updateDisplayList(w, h); 
			
			var cornerRadius:Number = getStyle("cornerRadius"); 
			var rollOverColor:uint = getStyle("rollOverColor"); 
			var selectionColor:uint = getStyle("selectionColor"); 
			
			graphics.clear(); 
			
			switch (name) { 
				case "upSkin": 
					// Draw invisible shape so we have a hit area. 
					drawRoundRect( 
						0, 0, w, h, cornerRadius, 
						0, 0); 
					break; 
				
				case "selectedUpSkin": 
				case "selectedOverSkin": 
				case "overSkin": 
					drawRoundRect( 
						0, 0, w, h, cornerRadius, 
						rollOverColor, 1); 
					break; 
				
				case "selectedDownSkin": 
				case "downSkin": 
					drawRoundRect( 
						0, 0, w, h, cornerRadius, 
						selectionColor, 1); 
					break; 
				
				case "selectedDisabledSkin": 
				case "disabledSkin": 
					// Draw invisible shape so we have a hit area. 
					drawRoundRect( 
						0, 0, w, h, cornerRadius, 
						0, 0); 
					break; 
			} 
		} 

	}
}