加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

带时分秒的flex3日历选择器---完善版

发布时间:2020-12-15 01:08:17 所属栏目:百科 来源:网络整理
导读:前段时间要用到带时分秒的flex日历选择器。到网上找了些资料,再自己改改,有了以下成果: 以下是所有代码: myDateChooser.cs package nmsDateField{?? ?import mx.controls.DateChooser;?? ?//重写DateChooser,添加了时分秒的选择?? ?public class myDateC

前段时间要用到带时分秒的flex日历选择器。到网上找了些资料,再自己改改,有了以下成果:











以下是所有代码:

myDateChooser.cs

package nmsDateField
{
?? ?import mx.controls.DateChooser;

?? ?//重写DateChooser,添加了时分秒的选择
?? ?public class myDateChooser extends DateChooser
?? ?{
?? ??? ?public var times:myTimesChoose;

?? ??? ?public function myDateChooser()
?? ??? ?{
?? ??? ??? ?super();

?? ??? ??? ?this.width=195;
?? ??? ??? ?this.height=195;
?? ??? ??? ?this.setStyle("fontSize","12");
?? ??? ??? ?times=new myTimesChoose();
?? ??? ??? ?times.x=0;
?? ??? ??? ?times.y=this.height;
?? ??? ?}

?? ??? ?protected override function createChildren():void
?? ??? ?{
?? ??? ??? ?super.createChildren();
?? ??? ??? ?addChild(times);
?? ??? ?}
?? ?}
}

myTimesChoose.cs

package nmsDateField
{
	import flash.events.Event;

	import mx.containers.HBox;
	import mx.containers.Panel;
	import mx.controls.ComboBox;
	import mx.controls.Label;
	import mx.formatters.DateFormatter;

	//重写Panel,实现时分秒的选择
	public class myTimesChoose extends Panel
	{
		public var timesBox:HBox;

		public var labMinute:Label;
		public var labSecond:Label;

		//时分秒下拉框
		public var nmsHour:ComboBox;
		public var nmsMinute:ComboBox;
		public var nmsSecond:ComboBox;

		private var parseDate:Date;

		//小时
		private var dataSourceHour:Array=["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"];

		//分钟和秒
		private var dataSourceMinuteSecond:Array=["00","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59"];

		//时分秒下拉框的填充色
		private var arryBackgroundColor:Array=["white","white","white"];

		public function myTimesChoose()
		{
			super();
			this.width=195;
			this.height=23;

			this.setStyle("headerHeight",0);
			this.setStyle("borderStyle","solid");
			this.setStyle("borderThicknessLeft",1);
			this.setStyle("borderThicknessRight",1);
			this.setStyle("cornerRadius",0);

			timesBox=new HBox();
			timesBox.setStyle("horizontalGap","0");
			timesBox.setStyle("verticalGap","0");
			timesBox.setStyle("verticalAlign","middle");
			timesBox.setStyle("backgroundColor","white");
			timesBox.setStyle("paddingLeft","5");
			timesBox.setStyle("paddingBottom","2");
			timesBox.setStyle("borderStyle","none");
		}

		protected override function createChildren():void
		{
			super.createChildren();

			if (!nmsHour)
			{
				nmsHour=new ComboBox();
				nmsHour.width=55;
				nmsHour.height=18;
				nmsHour.dataProvider=dataSourceHour;
				nmsHour.setStyle("cornerRadius","0");
				nmsHour.setStyle("fontSize","10");
				nmsHour.setStyle("fillColors",arryBackgroundColor);
				nmsHour.addEventListener("change",updateValue);
			}

			if (!labMinute)
			{
				labMinute=new Label();
				labMinute.width=10;
				labMinute.text=":";
			}

			if (!nmsMinute)
			{
				nmsMinute=new ComboBox();
				nmsMinute.width=55;
				nmsMinute.height=18;
				nmsMinute.dataProvider=dataSourceMinuteSecond;
				nmsMinute.setStyle("fontSize","10");
				nmsMinute.setStyle("cornerRadius","0");
				nmsMinute.setStyle("fillColors",arryBackgroundColor);
				nmsMinute.addEventListener("change",updateValue);
			}

			if (!labSecond)
			{
				labSecond=new Label();
				labSecond.width=10;
				labSecond.text=":";
			}

			if (!nmsSecond)
			{
				nmsSecond=new ComboBox();
				nmsSecond.width=55;
				nmsSecond.height=18;
				nmsSecond.setStyle("fontSize","10");
				nmsSecond.setStyle("cornerRadius","0");
				nmsSecond.setStyle("fillColors",arryBackgroundColor);
				nmsSecond.dataProvider=dataSourceMinuteSecond;
				nmsSecond.addEventListener("change",updateValue);
			}

			timesBox.addChild(nmsHour);
			timesBox.addChild(labMinute);
			timesBox.addChild(nmsMinute);
			timesBox.addChild(labSecond);
			timesBox.addChild(nmsSecond);

			this.addChild(timesBox);
		}

		//当下拉时分秒下拉框的值改变的时候,动态修改日期控制的textinput的显示值
		private function updateValue(event:Event):void
		{
			if (this.parent is myDateChooser)
			{
				var dateChooser:myDateChooser=this.parent as myDateChooser;
				//若没有选择日期则默认为当天
				if (dateChooser.selectedDate == null)
				{
					parseDate=new Date();
				}
				else
				{
					parseDate=dateChooser.selectedDate;
				}

				if (dateChooser.owner is myDateField)
				{
					var dateField:myDateField=dateChooser.owner as myDateField;
					dateField.labelFunction=formatDateTemp;
				}
			}
		}

		//日期显示格式
		private function formatDateTemp(date:Date):String
		{
			if (date == null)
			{
				date=new Date();
			}

			date.hours=(Number)(nmsHour.selectedItem);
			date.minutes=(Number)(nmsMinute.selectedItem);
			date.seconds=(Number)(nmsSecond.selectedItem);

			var df:DateFormatter=new DateFormatter();
			df.formatString="YYYY-MM-DD JJ:NN:SS";

			var times:String=df.format(date);

			return times;
		}
	}
}

myDateField.cs


package nmsDateField
{
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;

	import mx.controls.DateField;
	import mx.core.ClassFactory;
	import mx.events.CalendarLayoutChangeEvent;
	import mx.formatters.DateFormatter;

	//重写DateField,设置默认中文显示,添加了时分秒的选择
	public class myDateField extends DateField
	{
		public function myDateField()
		{
			super();
			this.formatString="YYYY-MM-DD";
			this.dayNames=["日","一","二","三","四","五","六"];
			this.monthNames=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
			this.dropdownFactory=new ClassFactory(myDateChooser);
			this.labelFunction=formatDate;
			this.editable=false;
			this.addEventListener(CalendarLayoutChangeEvent.CHANGE,showDateChooser);
			this.addEventListener(KeyboardEvent.KEY_DOWN,handelKeyDown);
		}

		private function formatDate(currentDate:Date):String
		{
			var dateFormatter:DateFormatter=new DateFormatter();
			//YYYY-MM-DD JJ:NN:SS此中JJ表示格式位0-23。若换成HH则显示格式位0-24.
			dateFormatter.formatString="YYYY-MM-DD JJ:NN:SS";

			var times:String=dateFormatter.format(currentDate);
			return times;
		}
		
		//当选择日期时,日历选择器在打开(默认选择日期后就回关闭)
		private function showDateChooser(event:CalendarLayoutChangeEvent):void
		{
			this.open();
		}
		
		//此处处理在时分秒下拉框出现时,按下回车键,下拉框不会收回去的bug
		private function handelKeyDown(event:KeyboardEvent):void
		{
			if (event.keyCode == Keyboard.ENTER)
			{
				var tempNmsDateChooser:myDateChooser=this.dropdown as myDateChooser;
				tempNmsDateChooser.times.nmsHour.close();
				tempNmsDateChooser.times.nmsMinute.close();
				tempNmsDateChooser.times.nmsSecond.close();
			}
		}
	}
}

nmsDateField.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:nmsDateField="nmsDateField.*">
	<mx:Style>
		DateChooser{
			cornerRadius: 0;
		}
	</mx:Style>
	<nmsDateField:myDateField />
</mx:Application>



源码下载链接;

http://download.csdn.net/detail/lee_541/3733099

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读