效果图:
<?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;
}
}
}
}