Flex变态的时间控件超级麻烦

于 2015-11-03 15:57:06 发布
阅读量1.3k 收藏
点赞数
分类专栏： flex 时间控件 文章标签： flex 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangzhongzhong/article/details/49617443
版权

时间控件需求描述:

通过前边时间跨度类型combobox的选择，动态改变textinput弹出的页面，当选择年的时候弹出只有年份的选择，当选择月份的时候显示年和月份的组合如下图：


好麻烦用了一个appliction应用组件，两个MXML，两个监听as文件，才显示出来。

大家有好的办法，可以联系我，我这个太麻烦了，个人感觉。

转载一个别人的：


通过NumericStepper自定义时间控件相对简单，在选择时间的时候可能会麻烦但是代码简单，我做了一点修改。

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="400" height="30" creationComplete="group1_creationCompleteHandler(event)">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:layout> 
		<s:TileLayout  paddingLeft="5" />
	</s:layout>
	<s:HGroup>
		<mx:Label text="统计时段"/>
		<s:ComboBox  id="cbox_time" dataProvider="{_datetype}" labelField="value" width="40" change="cbox_time_changeHandler(event)">
		</s:ComboBox>
		<mx:TextInput x="0" y="0" width="100" height="25" editable="{initeditable}" id="returnTime_start" text="{initvalue}" click="open(event)"/>
		<mx:Button x="102" y="2" icon="@Embed(source='mx/controls/DateChooser.png')" fontWeight="normal" width="22" click="open(event)" height="22"/>
		<mx:TextInput x="0" y="0" width="100" height="25" editable="{initeditable_end}" id="returnTime_end" text="{initvalue_end}" click="open_end(event)"/>
		<mx:Button x="102" y="2" icon="@Embed(source='mx/controls/DateChooser.png')" fontWeight="normal" width="22" click="open_end(event)" height="22"/>
	</s:HGroup>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.containers.HBox;
			import mx.containers.TitleWindow;
			import mx.controls.Alert;
			import mx.controls.Button;
			import mx.controls.Label;
			import mx.controls.NumericStepper;
			import mx.controls.Text;
			import mx.controls.TileList;
			import mx.core.IFlexDisplayObject;
			import mx.events.CloseEvent;
			import mx.events.FlexEvent;
			import mx.events.ListEvent;
			import mx.events.NumericStepperEvent;
			import mx.managers.PopUpManager;
			
			import spark.events.IndexChangeEvent;
		
		[Bindable]
		private var initvalue: String;
		
		[Bindable]
		private var initvalue_end: String;
		[Bindable]
		private var initeditable:Boolean;
		[Bindable]
		private var initeditable_end:Boolean;
		public var resultTime:Text;
		public var resultTime_end:Text;
		//168
		//年
		private var y_width:Number = 100;
		//年月
		private var ym_width:Number = 168;
		//年月日
		private var ymd_width:Number = 268;
		
		private var pop:Object;
		private var pop_end:Object;
		private var isOpen:Boolean = false;
		private var isOpen_end:Boolean = false;
		private var nowTime_start:Date = new Date();
		private var nowTime_end:Date = new Date();
		//时段标志
		private var dateflag:String;
		
			//统计时段combobox下拉值
			[Bindable]
			private var _datetype:ArrayCollection= new ArrayCollection([
				{value:"年",key:"year"},
				{value:"月",key:"month"},
				{value:"日",key:"day"}
				
			]);
		private function open(event:MouseEvent):void{
		resultTime = new Text();
		if(!isOpen)
		{
		pop = PopUpManager.createPopUp(this, TitleWindow, false); 
		pop.showCloseButton = true;
		pop.addEventListener(CloseEvent.CLOSE,closeHandler);
		pop.move(event.stageX+event.target.width-event.localX+5,event.stageY-event.localY);
		//pop.title = nowTime.fullYear.toString() + " 年 " + (nowTime.month+1) + " 月";
		pop.title = "日期选择";
		pop.setStyle("fontSize",12);
		
		
		var yearChangeHandler:Function = function(evt:NumericStepperEvent):void{
		nowTime_start.setFullYear(evt.value,nowTime_start.month,nowTime_start.date);
		PopUpManager.removePopUp(pop as IFlexDisplayObject);
		isOpen = false;
		open(event);
		}
		
		var monthChangeHandler:Function = function(evt:NumericStepperEvent):void{
		nowTime_start.setFullYear(nowTime_start.fullYear,evt.value-1,nowTime_start.date);
		PopUpManager.removePopUp(pop as IFlexDisplayObject);
		isOpen = false;
		open(event);
		}
			
		var dayChangeHandler:Function = function(evt:NumericStepperEvent):void{
			nowTime_start.setFullYear(nowTime_start.fullYear,nowTime_start.month,evt.value-1);
			PopUpManager.removePopUp(pop as IFlexDisplayObject);
			isOpen = false;
			open(event);
		}
		//开始时间
		var testHandler:Function = function(event:ListEvent):void{
		resultTime.text = nowTime_start.fullYear + "-" + (nowTime_start.month+1);
		returnTime_start.text =  resultTime.text;
		}
		//确定之后提交时间
		var onSubBtn_Click:Function = function(event:MouseEvent):void
		{
		if(dateflag=='year'){
			resultTime.text = nowTime_start.fullYear.toString() ;
			returnTime_start.text =  resultTime.text;
		}else if(dateflag=='month'){
			resultTime.text = nowTime_start.fullYear + "-" + (nowTime_start.month+1);
			returnTime_start.text =  resultTime.text;
		}else{
			resultTime.text = nowTime_start.fullYear + "-" + (nowTime_start.month+1)+ "-" +(nowTime_start.date+1) ;
			returnTime_start.text =  resultTime.text;
		}

		PopUpManager.removePopUp(pop as IFlexDisplayObject);
		isOpen = false;
		
		}
		
		
		
		//年
		var year:NumericStepper = new NumericStepper();
		year.setStyle("fontSize",10);
		year.stepSize = 1;
		year.minimum = 1999;
		year.maximum = 2999;
		year.width = 60;
		year.height = 20;
		year.value = nowTime_start.fullYear;
		year.addEventListener(NumericStepperEvent.CHANGE,yearChangeHandler);
		
		var y_label:Label = new Label();
		y_label.text = "年";
		y_label.setStyle("textAlign","center");
		y_label.width = 15;
		//月
		var month:NumericStepper = new NumericStepper();
		month.setStyle("fontSize",10);
		month.stepSize = 1;
		month.minimum = 0;
		month.maximum = 13;
		month.width = 50;
		month.height = 20;
		month.value = nowTime_start.month+1;
		month.addEventListener(NumericStepperEvent.CHANGE,monthChangeHandler);
		
		var m_label:Label = new Label();
		m_label.text = "月";
		m_label.setStyle("textAlign","center");
		m_label.width = 15;
		//日
		var day:NumericStepper = new NumericStepper();
		day.setStyle("fontSize",10);
		day.stepSize = 1;
		day.minimum = 1;
		day.maximum = 31;
		day.width = 50;
		day.height = 20;
		day.value = nowTime_start.date+1;
		day.addEventListener(NumericStepperEvent.CHANGE,dayChangeHandler);
		
		var d_label:Label = new Label();
		d_label.text = "日";
		d_label.setStyle("textAlign","center");
		d_label.width = 15;
		
		//
		var hBoxTop:HBox = new HBox();
		if(dateflag=='year'){
			hBoxTop.width = y_width;
			hBoxTop.addChild(year);
			hBoxTop.addChild(y_label);
		}else if(dateflag=='month'){
			hBoxTop.width = ym_width;
			hBoxTop.addChild(year);
			hBoxTop.addChild(y_label);
			hBoxTop.addChild(month);
			hBoxTop.addChild(m_label);
		}else{
			hBoxTop.width = ymd_width;
			hBoxTop.addChild(year);
			hBoxTop.addChild(y_label);
			hBoxTop.addChild(month);
			hBoxTop.addChild(m_label);
			hBoxTop.addChild(day);
			hBoxTop.addChild(d_label);
		}
		

		
		
		pop.addChild(hBoxTop);
		var subBtn:Button = new Button();
		subBtn.addEventListener(MouseEvent.CLICK,onSubBtn_Click);
		subBtn.label = "确定";
		pop.addChild(subBtn);
		isOpen = true;
		}
		else{
		PopUpManager.removePopUp(pop as IFlexDisplayObject);
		isOpen = false;
		}
		}
		
		private function closeHandler(event:CloseEvent):void{
		PopUpManager.removePopUp(event.target as IFlexDisplayObject);
		isOpen = false;
		}
		
		public function set text(str:String):void{
		initvalue = str ;
		}
		public function get text():String{
		return returnTime_start.text ;
		}
		
		public function set editable(str:Boolean):void{
		initeditable = str;
		}
		public function get editable(): Boolean{
		return returnTime_start.editable;
		}
			
			/**
			 * 
			 * 
			 * 
			 * */
			 
			private function open_end(event:MouseEvent):void{
				resultTime_end = new Text();
				if(!isOpen_end)
				{
					pop_end = PopUpManager.createPopUp(this, TitleWindow, false); 
					pop_end.showCloseButton = true;
					pop_end.addEventListener(CloseEvent.CLOSE,closeHandlerend);
					pop_end.move(event.stageX+event.target.width-event.localX+5,event.stageY-event.localY);
					//pop.title = nowTime.fullYear.toString() + " 年 " + (nowTime.month+1) + " 月";
					pop_end.title = "日期选择";
					pop_end.setStyle("fontSize",12);
					
					
					var yearChangeHandler_end:Function = function(evt:NumericStepperEvent):void{
						nowTime_end.setFullYear(evt.value,nowTime_end.month,nowTime_end.date);
						PopUpManager.removePopUp(pop_end as IFlexDisplayObject);
						isOpen_end = false;
						open_end(event);
					}
					
					var monthChangeHandler_end:Function = function(evt:NumericStepperEvent):void{
						nowTime_end.setFullYear(nowTime_end.fullYear,evt.value-1,nowTime_end.date);
						PopUpManager.removePopUp(pop_end as IFlexDisplayObject);
						isOpen_end = false;
						open_end(event);
					}
					
					var dayChangeHandler_end:Function = function(evt:NumericStepperEvent):void{
						nowTime_end.setFullYear(nowTime_end.fullYear,nowTime_end.month,evt.value-1);
						PopUpManager.removePopUp(pop_end as IFlexDisplayObject);
						isOpen_end = false;
						open_end(event);
					}
					//结束时间
					var testHandler_end:Function = function(event:ListEvent):void{
						resultTime_end.text = nowTime_end.fullYear + "-" + (nowTime_end.month+1);
						returnTime_end.text =  resultTime_end.text;
					}
					var onSubBtn_Click_end:Function = function(event:MouseEvent):void
					{
						if(dateflag=='year'){
							resultTime_end.text = nowTime_end.fullYear.toString();
							returnTime_end.text =  resultTime_end.text;
						}else if(dateflag=='month'){
							resultTime_end.text = nowTime_end.fullYear + "-" + (nowTime_end.month+1);
							returnTime_end.text =  resultTime_end.text;
						}else{
							resultTime_end.text = nowTime_end.fullYear + "-" + (nowTime_end.month+1) + "-" +(nowTime_end.date+1);
							returnTime_end.text =  resultTime_end.text;
						}
//						resultTime_end.text = nowTime_end.fullYear + "-" + (nowTime_end.month+1) + "-" +(nowTime_end.date+1);
//						returnTime_end.text =  resultTime_end.text;
						
						
						PopUpManager.removePopUp(pop_end as IFlexDisplayObject);
						isOpen_end = false;
						
					}
					
					//年
					var year:NumericStepper = new NumericStepper();
					year.setStyle("fontSize",10);
					year.stepSize = 1;
					year.minimum = 1999;
					year.maximum = 2999;
					year.width = 60;
					year.height = 20;
					year.value = nowTime_end.fullYear;
					year.addEventListener(NumericStepperEvent.CHANGE,yearChangeHandler_end);
					
					var y_label:Label = new Label();
					y_label.text = "年";
					y_label.setStyle("textAlign","center");
					y_label.width = 15;
					//月
					var month:NumericStepper = new NumericStepper();
					month.setStyle("fontSize",10);
					month.stepSize = 1;
					month.minimum = 0;
					month.maximum = 13;
					month.width = 50;
					month.height = 20;
					month.value = nowTime_end.month+1;
					month.addEventListener(NumericStepperEvent.CHANGE,monthChangeHandler_end);
					
					var m_label:Label = new Label();
					m_label.text = "月";
					m_label.setStyle("textAlign","center");
					m_label.width = 15;
					//日
					var day:NumericStepper = new NumericStepper();
					day.setStyle("fontSize",10);
					day.stepSize = 1;
					day.minimum = 1;
					day.maximum = 31;
					day.width = 50;
					day.height = 20;
					day.value = nowTime_end.date+1;
					day.addEventListener(NumericStepperEvent.CHANGE,dayChangeHandler_end);
					
					var d_label:Label = new Label();
					d_label.text = "日";
					d_label.setStyle("textAlign","center");
					d_label.width = 15;
					
					//
					var hBoxTop_end:HBox = new HBox();
					if(dateflag=='year'){
						hBoxTop_end.width = y_width;
						hBoxTop_end.addChild(year);
						hBoxTop_end.addChild(y_label);
					}else if(dateflag=='month'){
						hBoxTop_end.width = ym_width;
						hBoxTop_end.addChild(year);
						hBoxTop_end.addChild(y_label);
						hBoxTop_end.addChild(month);
						hBoxTop_end.addChild(m_label);
					}else{
						hBoxTop_end.width = ymd_width;
						hBoxTop_end.addChild(year);
						hBoxTop_end.addChild(y_label);
						hBoxTop_end.addChild(month);
						hBoxTop_end.addChild(m_label);
						hBoxTop_end.addChild(day);
						hBoxTop_end.addChild(d_label);
					}
					
					
					pop_end.addChild(hBoxTop_end);
					var subBtn:Button = new Button();
					subBtn.addEventListener(MouseEvent.CLICK,onSubBtn_Click_end);
					subBtn.label = "确定";
					pop_end.addChild(subBtn);
					isOpen_end = true;
				}
				else{
					PopUpManager.removePopUp(pop_end as IFlexDisplayObject);
					isOpen_end = false;
				}
			}
			
			private function closeHandlerend(event:CloseEvent):void{
				PopUpManager.removePopUp(event.target as IFlexDisplayObject);
				isOpen_end = false;
			}
			
			public function set text_end(str:String):void{
				initvalue_end = str ;
			}
			public function get text_end():String{
				return returnTime_end.text ;
			}
			
			public function set editable_end(str:Boolean):void{
				initeditable_end = str;
			}
			public function get editable_end(): Boolean{
				return returnTime_end.editable;
			}
			//当统计时段发生变化时记录统计标志年月日
			protected function cbox_time_changeHandler(event:IndexChangeEvent):void
			{
				if(cbox_time.selectedIndex==0){
					dateflag='year';
				}else if(cbox_time.selectedIndex==1){
					dateflag='month';
				}else {
					dateflag='day';
				}
				//trace(dateflag);
				//清空时间控件值
				returnTime_start.text='';
				returnTime_end.text='';
			}
			
			protected function group1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				cbox_time.selectedIndex=0;
				dateflag='year';
			}
			
		]]>
	</fx:Script>
</s:Group>


zhangzhongzhong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex时间控件
11-17
flex时间控件，可直接导入使用，带年月日、时分秒的选择功能
Flex 日期时间选择控件
10-26
Flex 日期时间选择控件，可选择小时、分钟、12/24小时格式
Flex 时间控件（一）
技术交流
11-24 2390
<br />package com.eshangrao.controls<br />{<br />  import flash.events.Event;<br />  import flash.events.FocusEvent;<br />  import flash.text.TextLineMetrics;<br />  <br />  import mx.containers.HBox;<br />  import mx.controls.NumericStepper;<br />  import
Flex4 DateField自定义的日期选择控件，可选择时分秒
luckypeng的专栏
11-06 3077
YJQDateField.mxml [html] view plaincopy xml version="1.0" encoding="utf-8"?>   s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"        xmlns:s="library://ns.adobe.com/flex
Flex 自定义日期时间控件
热门推荐
chuangxin的专栏
10-30 1万+
<br />       背景：用户需要时间输入控件，尤其是小时、分钟，而flex自带的日期控件并无时、分、秒输入控件，于是做了一个日期时间自定义控件。<br />       思路：<br />       1）使用6个文本输入框、5个文本显示框（-,:等显示）和一个数字微调器；<br />       2）开放selectedDate属性，用于设置初始时间和返回时间；<br />       3）捕捉文本框的focusin事件，告诉数字微调器，需要微调年还是微调月或者日等；<br />       4）
Flex 自定义时间控件 功能很全
01-29
在Flex开发中，时间控件是用户界面设计中不可或缺的一部分，尤其对于需要处理时间输入的应用程序来说至关重要。Flex 自定义时间控件是一个功能强大的组件，它不仅提供了基本的时间选择功能，还支持小时、分钟的选择...
flex3.5时间控件（含时分秒）
08-27
在Flex 3.5开发环境中，时间控件是构建用户界面时不可或缺的一部分，尤其是在需要用户输入或选择特定时间的情况下。本篇文章将详细讲解如何在Flex 3.5中创建一个包含时、分、秒的时间选择器，以及如何进行实际应用。...
flex 时间选择控件
03-30
Flex时间选择控件是一种在Adobe Flex应用程序中用于用户交互，帮助用户方便地选取特定时间的组件。这个控件通常被嵌入到用户界面中，允许用户以小时、分钟和（可能的话）秒为单位选择时间。它提高了用户体验，因为...
Flex时间选择控件 精确到时分秒
04-24
Flex时间选择控件是Adobe Flex框架中用于处理用户界面中时间输入的一种组件，它允许用户以小时、分钟和秒为单位进行精确的选择。在Flex应用开发中，这种控件对于那些需要用户输入特定时间信息的场景非常实用，比如...
flex可选择时间的日历控件
01-11
flex自带的日期控件是没有时间选择的,本控件集成了时间的选择,另外时间的选择实现了可手动输入,输入的值可以定位下拉列表框. 导入方便,引用方便,提供多种输出格式. 经过测试完全OK,并且该控件已经应用于我们公司的各个flex项目当中,所以大家可以完全无需担心出现什么问题.
Flex带时间的日期控件
05-13
Flex带时间的日期控件，样式和官方的一样，好看精简
flex带时间的日期控件，直接使用
08-11
flex自带的日期控件是不带时间的，这个控件解决了这个问题。可直接使用
Flex日期选择器组件(带年月日时分妙)
05-14
因为flex提供的有日期组件，但是只有年月日，没有时分妙，又不是很好看。开发了一个Flex日期选择器组件(带年月日时分妙)，若哪里需要用到日期选择器组件，把DateField.swc文件拷贝到Flex项目的libs文件夹内，引用util.dateField包下的DateFieldComp组件即可。 用组件的id.text可获得组件的日期。
Flex 时间输入框 TimeInputEx
11-19
Flex 继承 NumericStepper 实现时间输入组件，时分秒的输入
flex 日期控件
dongdong_java的专栏
09-10 3133
来源：原创 来源链接：http://help.adobe.com/zh_CN/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7d9b.html 编程环境：FlashBuilder4 是否解决：已解决 作品案例类别：否 组件或控件：是 官方教程 http://help.adobe.com/zh_CN/flex/usin
Flex 时间控件（二）
技术交流
11-24 6005
toolTip{fontSize:12} 15) { //取日期 var strYear:String=vNewValue.substr(0,4); //从日期中取出月份 var numMonth:Number=parseInt(vNewValue.substr(5,2)); //从日期中取出天 var numDay:Number=parseInt(vNewValue.substr(8,2));
FLEX日期控件
yrhtiger的专栏
01-29 200
由于FLEX的日期控件不怎么好用，于是自己写了一个，目前只有选择日月功能 看看效果： [img]http://dl.iteye.com/upload/picture/pic/54000/a61632d4-c462-313c-97a9-742ec604810c.jpg[/img] [img]http://dl.iteye.com/upload/picture/pic/53998/ccdfc...
Flex列表控件自定义渲染器深入解析
"Flex_itemRenderer 是Flex开发中的一个重要概念，它涉及到如何自定义列表控件如List、DataGrid和Tree等的数据展示方式。默认情况下，这些控件会以简单的文本形式展示数据，但通过使用itemRenderer，开发者可以实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值