`
oncesorrows
  • 浏览: 11279 次
社区版块
存档分类
最新评论

Flex 实现分秒的时间组件

    博客分类:
  • Flex
阅读更多
实现代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="165" height="25">
	<mx:TextInput x="0" y="0" width="140" height="25" editable="{initeditable}" id="returnTime" text="{initvalue}"/>
	<mx:Button x="142" y="2" icon="@Embed(source='mx/controls/DateChooser.png')" fontWeight="normal" width="22" click="open(event)" height="22"/>
	<mx:Script>
		<![CDATA[
			import mx.events.NumericStepperEvent;
			import mx.controls.NumericStepper;
			import mx.events.ListEvent;
			import mx.controls.Label;
			import mx.containers.HBox;
			import mx.controls.TileList;
			import mx.core.IFlexDisplayObject;
			import mx.events.CloseEvent;
			import mx.controls.Button;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			import mx.containers.TitleWindow;
			import mx.controls.Text;
			
			[Bindable]
			private var initvalue: String;
			[Bindable]
			private var initeditable:Boolean;
			
			public var resultTime:Text;
			private var m_width:Number = 168;
			
			private var pop:Object;
			private var isOpen:Boolean = false;
			private var nowTime:Date = new Date();
			
			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.setFullYear(evt.value,nowTime.month,nowTime.date);
						PopUpManager.removePopUp(pop as IFlexDisplayObject);
						isOpen = false;
						open(event);
					}
					
					var monthChangeHandler:Function = function(evt:NumericStepperEvent):void{
						nowTime.setFullYear(nowTime.fullYear,evt.value-1,nowTime.date);
						PopUpManager.removePopUp(pop as IFlexDisplayObject);
						isOpen = false;
						open(event);
					}
					
					var minuteChangeHandler:Function = function(evt:NumericStepperEvent):void{
						nowTime.setHours(nowTime.hours,evt.value,nowTime.seconds,nowTime.milliseconds);
					}
					
					var hourChangeHandler:Function = function(evt:NumericStepperEvent):void{
						nowTime.setHours(evt.value,nowTime.minutes,nowTime.seconds,nowTime.milliseconds);
					}
					
					var testHandler:Function = function(event:ListEvent):void{
						PopUpManager.removePopUp(pop as IFlexDisplayObject);
						isOpen = false;
						resultTime.text = nowTime.fullYear + "-" + (nowTime.month+1) + "-" 
							+ event.target.selectedItems + " " +hour.value
							+ ":" + minute.value;
						returnTime.text =  resultTime.text;
					}
					
					
					var hBoxTop:HBox = new HBox();
					hBoxTop.width = m_width;
					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.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.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;
					
					hBoxTop.addChild(year);
					hBoxTop.addChild(y_label);
					hBoxTop.addChild(month);
					hBoxTop.addChild(m_label);
					
					pop.addChild(hBoxTop);
					
					var hBox:HBox = new HBox();
					hBox.width = m_width;
					hBox.setStyle("horizontalGap",0);
					var weekName:Array = new Array("日","一","二","三","四","五","六");
					for(var index:Number=0; index<weekName.length; index++){
						var lab:Label = new Label();
						lab.text = weekName[index];
						lab.width = 24;
						lab.setStyle("textAlign","center");
						lab.setStyle("fontSize",12);
						if(weekName[index]=="日"){
							lab.setStyle("color","red");
						}
						hBox.addChild(lab);
					}
					pop.addChild(hBox);
					
					var tmpDate:Date = new Date(nowTime.fullYear,nowTime.month+1,0);
					var sumDay:Number = tmpDate.date ;
					
					var firstDay:Date = new Date(nowTime.fullYear,nowTime.month,1);
					var wday:Number = firstDay.day ;
					
					var todayNum:Number = nowTime.date;
					
					var rowNum:uint = Math.ceil((sumDay+wday)/7);
					//Alert.show(Math.round((sumDay+day)/7).toString());
					
					var tileList:TileList = new TileList();
					tileList.setStyle("fontSize",10);
					tileList.columnCount=7;
					tileList.rowCount=rowNum;
					tileList.width = 7*25;
					tileList.height = rowNum * 25;
					
					var myDP:Array = new Array();
					for(var i:Number=0; i<sumDay; i++){
						myDP.push((i+1).toString());
					}
					for(i=0; i<wday; i++){
						myDP.unshift(null);
					}
					
					tileList.dataProvider = myDP;
					tileList.selectedIndex = wday+todayNum-1; 
					
					tileList.addEventListener(ListEvent.ITEM_CLICK,testHandler);
					
					
					pop.addChild(tileList);
					
					var hBoxBottom:HBox = new HBox();
					hBoxBottom.width = m_width;
					hBoxBottom.setStyle("horizontalAlign","right");
					
					var hour:NumericStepper = new NumericStepper();
					hour.setStyle("fontSize",10);
					hour.stepSize = 1;
					hour.minimum = 0;
					hour.maximum = 23;
					hour.width = 50;
					hour.height = 20;
					hour.value = new Date().hours;
					hour.setStyle("paddingRight",0);
					hour.addEventListener(NumericStepperEvent.CHANGE,hourChangeHandler);
					var h_label:Label = new Label();
					h_label.text = "时";
					h_label.setStyle("textAlign","center");
					h_label.width = 15;
					
					var minute:NumericStepper = new NumericStepper();
					minute.setStyle("fontSize",10);
					minute.stepSize = 1;
					minute.minimum = 0;
					minute.maximum = 59;
					minute.width = 50;
					minute.height = 20;
					minute.value = new Date().minutes;
					minute.addEventListener(NumericStepperEvent.CHANGE,minuteChangeHandler);
					var mi_label:Label = new Label();
					mi_label.text = "分";
					mi_label.setStyle("textAlign","center");
					mi_label.width = 15;
					
					//					var subBtn:Button = new Button();
					//					subBtn.width = 40;
					//					subBtn.label = "确定";
					
					hBoxBottom.addChild(hour);
					hBoxBottom.addChild(h_label);
					hBoxBottom.addChild(minute);
					hBoxBottom.addChild(mi_label);
					//					hBoxBottom.addChild(subBtn);
					pop.addChild(hBoxBottom);
					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.text ;
			}
			
			public function set editable(str:Boolean):void{
				initeditable = str;
			}
			public function get editable(): Boolean{
				return returnTime.editable;
			}
		]]>
	</mx:Script>
</mx:Module>



包已经上传直接就可以用.
分享到:
评论

相关推荐

    flex 有时分秒的日期控件

    flex 有时分秒的日期控件,该控件对dateField功能上进行了扩展,可以设置时分秒

    flex实现的拖拽控件

    在这个场景中,我们关注的是Flex实现的拖拽控件,这是一种交互式UI元素,允许用户通过鼠标操作移动元素,提供了丰富的用户体验。 拖拽功能在Flex中可以通过使用内置的DragManager类和Event类来实现。DragManager类...

    flex组件时间轴组件

    在实现Flex组件时间轴时,开发者需要考虑以下关键点: 1. **容器设置**:时间轴的基础是一个Flex容器,这个容器需要设置`display: flex`属性来开启Flex布局。容器的主轴(默认是水平方向)用于放置时间轴的线,而侧...

    flex时间控件

    Flex时间控件是一种基于Adobe Flex框架的用户界面组件,它为用户提供了一种直观的方式来选择日期和时间。在Flex中,这种控件通常用于构建具有高度交互性和用户友好的Web应用程序。Flex是一个开源的开发框架,它允许...

    Flex带时间的日期控件

    总结来说,Flex带时间的日期控件的实现涉及了Flex组件的自定义、事件处理、样式设计、国际化支持、可用性和数据验证等多个方面。通过熟练掌握这些知识点,开发者能够创建出符合项目需求、用户体验优秀的日期和时间...

    Flex-时间控件,带年月日时分秒

    "Flex-时间控件,带年月日时分秒"是一种专门用于处理时间选择的组件,它允许用户方便地设定日期和时间,包括年、月、日、小时、分钟和秒。Flex是一种基于ActionScript 3.0的开源框架,由Adobe开发,主要用于构建富...

    Flex时间选择控件 精确到时分秒

    Flex时间选择控件是Adobe Flex框架中用于处理用户界面中时间输入的一种组件,它允许用户以小时、分钟和秒为单位进行精确的选择。在Flex应用开发中,这种控件对于那些需要用户输入特定时间信息的场景非常实用,比如...

    Flex 自定义 时间 日历 控件

    Flex 自定义 时间 日历 控件

    flex 时间组件(time)

    在Flex开发中,时间组件(Time)是用于展示和处理时间数据的重要元素。它通常用于构建用户界面,让用户能够选择或输入时间值。本篇文章将深入探讨Flex中的Time组件,了解其基本用法、功能特性以及如何自定义和扩展。...

    flex3.5时间控件(含时分秒)

    总结起来,`flex3.5时间控件(含时分秒)`的实现涉及到创建一个自定义组件`TimeChooser`,它包含了小时、分钟和秒的选择功能,并在`Test`测试应用程序中进行展示和验证。通过这样的控件,开发者可以方便地在Flex 3.5...

    FLEX时间轴代码

    在这个时间轴代码中,你需要了解如何监听和响应这些事件,以实现时间轴的交互功能。 6. **自定义组件**:如果你发现FLEX提供的标准时间轴组件不能满足需求,你可以创建自定义组件来扩展功能。这涉及到对现有组件的...

    flex多文件上传控件(flex源码)

    在这个"flex多文件上传控件"中,我们可以看到它是Flex技术在文件上传场景中的应用,特别适合于需要批量或单个上传文件到服务器的Web应用。 该控件是通过Adobe Flash Builder 4进行开发的,Flash Builder是一个集成...

    flex带时间的日期控件,直接使用

    标题提到的“flex带时间的日期控件,直接使用”指的是一个扩展了Flex默认日期选择器功能的控件,它不仅支持选择日期,还包含了时间的选择功能。这在需要用户输入精确到时间的日期数据的应用场景中非常有用。 在Flex...

    flex 时间选择控件

    Flex时间选择控件是一种在Adobe Flex应用程序中用于用户交互,帮助用户方便地选取特定时间的组件。这个控件通常被嵌入到用户界面中,允许用户以小时、分钟和(可能的话)秒为单位选择时间。它提高了用户体验,因为...

    flexwheel flex实现的图片滚动效果

    "Flexwheel"是基于Flex实现的一种特定组件,主要用于创建图片滚动和时间滚动的效果。这种效果常用于增强用户体验,尤其是在展示大量信息或者产品图片时,能够以吸引人的方式呈现内容。 首先,我们要理解什么是Flex...

    Flex时间选择组件

    Flex时间选择组件是一款在CSDN平台上下载并经过二次开发的时间选择工具,主要适用于Web应用程序,旨在提升用户体验,提供更加灵活、便捷的方式来选取和输入时间。这个组件可能基于ActionScript或者Flex技术,这两种...

    Flex 自定义时间控件 功能很全

    Flex 自定义时间控件是一个功能强大的组件,它不仅提供了基本的时间选择功能,还支持小时、分钟的选择,并且具备灵活的格式化选项,以满足不同场景下的需求。以下是对这个自定义时间控件的详细解读。 首先,`UC_...

    Flex 日期时间选择控件

    Flex 日期时间选择控件,可选择小时、分钟、12/24小时格式

    flex DataTimePicker时间控件

    "flex DataTimePicker时间控件"是一个专为Adobe Flex平台设计的组件,用于帮助用户方便地选择日期和时间。Flex是一个开放源代码的框架,主要用于构建富互联网应用程序(RIA),它基于ActionScript编程语言和MXML标记...

Global site tag (gtag.js) - Google Analytics