`
luhantu
  • 浏览: 204495 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex 带时间的DateField的

    博客分类:
  • Flex
阅读更多

需要做一个带时间的DateField控件。不做啰嗦,直接上代码。

App:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600" xmlns:control="com.view.control.*">
	<fx:Script>
		<![CDATA[
			[Bindable]private var timeMode:Boolean;
			protected function button1_clickHandler(event:MouseEvent):void
			{
				timeMode = !timeMode;
			}
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button label="Change Mode" click="button1_clickHandler(event)"/>
	<control:DateTimeField timeStampMode="{timeMode}" yearNavigationEnabled="true"/>
</s:Application>

 DateTimeField:

package com.view.control
{
	import flash.events.Event;
	import flash.events.FocusEvent;
	
	import mx.controls.DateChooser;
	import mx.controls.DateField;
	import mx.controls.dataGridClasses.DataGridListData;
	import mx.controls.listClasses.BaseListData;
	import mx.controls.listClasses.ListData;
	import mx.core.ClassFactory;
	import mx.core.IFactory;
	import mx.events.CalendarLayoutChangeEvent;
	import mx.events.DropdownEvent;
	import mx.events.FlexEvent;
	import mx.formatters.DateFormatter;
	import mx.logging.Log;
	import mx.managers.PopUpManager;
	import mx.managers.PopUpManagerChildList;
	import mx.utils.ObjectUtil;
	
	public class DateTimeField extends DateField
	{
		// using custom data to avoid beeing overwritten
		protected var _cData:Object;
		protected var _cListData:BaseListData;
		protected var _cSelectedDate:Date = null;
		
		// copied vars
		protected var updateDateFiller:Boolean;
		protected var selectedDateSet:Boolean;
		protected var selectedDateChanged:Boolean = false;
		protected var show:Boolean = false;
		private var _timeStampMode:Boolean = true;
		private var _timeStampModeChanged:Boolean;
		private var _dateTimeChooserDropdownFactory:IFactory = new ClassFactory(DateTimeChooser);
		private var _dateChooserDropdownFactory:IFactory = new ClassFactory(DateChooser);
		private var _dropdownFactory:IFactory = new ClassFactory(DateChooser);
		public function DateTimeField()
		{
			super();
			parseFunction = customerParseFunction;
			this.labelFunction = labelDateTime;
			this.addEventListener(DropdownEvent.OPEN, handleDropdown);
			this.addEventListener(DropdownEvent.CLOSE, handleDropdown);
		}
		
		// -------------------------------
		// own functions
		// -------------------------------
		public function set timeStampMode(value:Boolean):void
		{
			_timeStampMode = value;
			_timeStampModeChanged = true;
			if(value)
			{
				dropdownFactory = _dateTimeChooserDropdownFactory;
			}
			else
			{
				dropdownFactory = _dateChooserDropdownFactory;
			}
			invalidateProperties();
			invalidateSize();
		}
		
		public function get timeStampMode():Boolean
		{
			return _timeStampMode;
		}
		protected function handleDropdown(e:DropdownEvent):void
		{
			if (e.type == DropdownEvent.CLOSE)
			{
				// save new date without beeing cropped
				if (ObjectUtil.dateCompare(selectedDate, dropdown.selectedDate) != 0)
				{
					setUpdateDate();
				}
				show = false;
			}
			else
			{
				show = true;
				dateFiller(_cSelectedDate);
			}	
		}
		
		private function setUpdateDate():void
		{
			selectedDate = dropdown.selectedDate;
			updateData();
		}
		
		protected function updateData():void
		{
			// if new date selected, save it to the data-binding variable
			if (data && selectedDate)
			{
				if (listData && listData is DataGridListData)
					data[DataGridListData(listData).dataField] = selectedDate;
				else if (listData is ListData && ListData(listData).labelField in value)
					data[ListData(listData).labelField] = selectedDate;
				else if (value is String)
					data = selectedDate.toString();
				else
					data = value as Date;
			}
		}
		
		// -------------------------------
		// change Label
		// -------------------------------
		protected function numberToTime(value:Number):String
		{
			return (value >= 10) ? String(value) : ("0" + value);
		}
		
		protected function labelDateTime(value:Date):String
		{
			if (value)	
			{
				if(timeStampMode)
				{
					return DateField.dateToString(value, formatString) + " " + numberToTime(value.hours) + ":" + numberToTime(value.minutes);
				}
				else
				{
					return DateField.dateToString(value, formatString);
				}
				
			}
			else
			{
				return "";
			}
		}
		
		// -------------------------------
		// overwritten data functions
		// -------------------------------
		
		override public function get data():Object
		{
			return _cData;
		}
		
		override public function set data(value:Object):void
		{
			var newDate:Date;
			
			_cData = value;
			
			if (_cListData && _cListData is DataGridListData)
				newDate = _cData[DataGridListData(_cListData).dataField];
			else if (_cListData is ListData && ListData(_cListData).labelField in _cData)
				newDate = _cData[ListData(_cListData).labelField];
			else if (_cData is String)
				newDate = new Date(Date.parse(data as String));
			else
				newDate = _cData as Date;
			
			if (!selectedDateSet)
			{
				selectedDate = newDate;
				selectedDateSet = false;
			}
			
			dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
		}
		
		override public function get listData():BaseListData
		{
			return _cListData;
		}
		
		
		override public function set listData(value:BaseListData):void
		{
			_cListData = value;
		}
		
		//----------------------------------
		//  selectedDate
		//----------------------------------
		
		[Bindable("change")]
		[Bindable("valueCommit")]
		[Bindable("selectedDateChanged")]
		[Inspectable(category="General")]
		
		override public function get selectedDate():Date
		{
			return _cSelectedDate;
		}
		
		/**
		 *  @private
		 */
		override public function set selectedDate(value:Date):void
		{
			if (ObjectUtil.dateCompare(_cSelectedDate, value) == 0) 
				return;
			
			selectedDateSet = true;
			_cSelectedDate = value;
			updateDateFiller = true;
			selectedDateChanged = true;
			
			invalidateProperties();
			
			// Trigger bindings to 'selectedData'.
			dispatchEvent(new Event("selectedDateChanged"));
			
			dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));
		}
		
		
		//--------------------------------------------------------------------------
		//
		//  Overridden methods: UIComponent
		//
		//--------------------------------------------------------------------------
		override protected function commitProperties():void
		{
			super.commitProperties();
			
			if (updateDateFiller)
			{
				updateDateFiller = false;
				dateFiller(_cSelectedDate);
			}
			
			if (selectedDateChanged)
			{
				selectedDateChanged = false;
				dropdown.selectedDate = _cSelectedDate;
			}
			if(_timeStampModeChanged)
			{
				_timeStampModeChanged = false;
				this.dispatchEvent(new Event(Event.REMOVED_FROM_STAGE));
				var editable:Boolean = textInput.editable;
				super.createChildren();
				this.yearNavigationEnabled = this.yearNavigationEnabled;
				textInput.editable = editable;
			}
		}
		
		//--------------------------------------------------------------------------
		//
		//  Methods
		//
		//--------------------------------------------------------------------------
		private function dateFiller(value:Date):void
		{
			if (labelFunction != null)
				textInput.text = labelFunction(value);
			else
				textInput.text = dateToString(value, formatString);
		}
		
		//--------------------------------------------------------------------------
		//
		//  Event handlers
		//
		//--------------------------------------------------------------------------
		override protected function downArrowButton_buttonDownHandler(event:FlexEvent):void
		{
			if (show)
			{
				close();
			}
			else 
			{
				if(text == "")
				{
					selectedDate = new Date();
					dropdown.selectedDate = selectedDate;
				}
				open();
			}
			dateFiller(_cSelectedDate);
		}
		
		//----------------------------------
		//  dropdownFactory // Overwrite, to include the own DateTimeChooser class
		//----------------------------------
		
		[Bindable("dropdownFactoryChanged")]
		override public function get dropdownFactory():IFactory
		{
			return _dropdownFactory;
		}
		
		override public function set dropdownFactory(value:IFactory):void
		{
			_dropdownFactory = value;
			dispatchEvent(new Event("dropdownFactoryChanged"));
		}
		
		// -------------------------------
		// Remove focus handler
		// -------------------------------
		override protected function focusOutHandler(event:FocusEvent):void
		{
			setActualDate();
		}
		
		override protected function textInput_changeHandler(event:Event):void
		{
			super.textInput_changeHandler(event);
			setActualDate();
		}
		
		private function setActualDate():void
		{
			if(text == "")
			{
				selectedDate = null;
			}
			else
			{
				var inputDate:Date = customerParseFunction(text);
				text = labelDateTime(inputDate);
				selectedDate = inputDate;
			}
		}
		
		override public function open():void
		{
			selectedDate = DateFormatter.parseDateString(text);
			super.open();
		}
		
		private function customerParseFunction(text:String,format:String = null):Date
		{
			var date:Date = DateFormatter.parseDateString(text);
			if(date && (date.fullYear >9999 || date.fullYear < 1000))
			{
				date = null;
			}
			return date;
		}
		
		
	}
}

 DateTimeChooser:

 

 

package com.view.control
{
	import flash.events.FocusEvent;
	import flash.events.KeyboardEvent;
	import flash.ui.Keyboard;
	
	import mx.controls.DateChooser;
	import mx.controls.Label;
	import mx.controls.TextInput;
	import mx.events.CalendarLayoutChangeEvent;
	
	public class DateTimeChooser extends DateChooser
	{
		private var textInput:TextInput;
		private var label:Label;
		
		[Bindable] private var startTime:String = "";
		private var _timeLabel:String = "";
		
		public function DateTimeChooser()
		{
			super();
			timeLabel = "Time";
		}
		
		override public function get selectedDate():Date
		{
			// add time
			var d:Date = (super.selectedDate) ? super.selectedDate : new Date();
			
			var times:Array = (textInput) ? textInput.text.split(":") : startTime.split(":");
			if (times.length > 1)
			{
				d.hours = times[0];
				d.minutes = times[1];
			}
			
			// update data
			super.selectedDate = d;

			return d;
		}
		
		override public function set selectedDate(value:Date):void
		{
			if (value)
			{
				startTime = to2Digits(value.hours) + ":" + to2Digits(value.minutes);
				if (textInput) textInput.text = startTime;
				
				super.selectedDate = value;
			}
		}
		
		[Bindable]
		public function get timeLabel():String { return _timeLabel; }
		public function set timeLabel(value:String):void { _timeLabel = value; }
		
		private function to2Digits(value:Number = NaN):String
		{
			if (isNaN(value))	return "00";
			else if (value < 10)return "0" + value;
			else				return "" + value;
		}
		
		private function checkTimeBox(e:KeyboardEvent):void
		{
			if (e.keyCode == Keyboard.ENTER) // bei ENTER schließen
			{
				dispatchEvent(new CalendarLayoutChangeEvent(CalendarLayoutChangeEvent.CHANGE, false, false, selectedDate));
			}
			else // ansonsten überprüfe ob der String stimmt
			{
				var values:Array = String(textInput.text).match(/[0-9]{2}/g);
				textInput.text = to2Digits(values[0]) + ":" + to2Digits(values[1]);
			}
		}
		private function timeFocusOut(e:FocusEvent):void
		{
			dispatchEvent(new CalendarLayoutChangeEvent(CalendarLayoutChangeEvent.CHANGE, false, false, selectedDate));
		}
		
		/**
		 *  @private
		 *  Erstellt noch den Time NumericStepper
		 */
		override protected function createChildren():void
		{
			super.createChildren();
			
			if (!textInput){
				textInput = new TextInput();
				textInput.text = startTime;
				textInput.maxChars = 5;
				textInput.addEventListener(KeyboardEvent.KEY_DOWN, checkTimeBox);
				textInput.owner = this;
				textInput.addEventListener(FocusEvent.FOCUS_OUT, timeFocusOut);
				addChild(textInput);
			}
			if (!label) {
				label = new Label();
				label.setStyle("textAlign", "right");
				label.text = timeLabel;
				addChild(label);
			}
		}
		
		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			var borderThickness:Number = getStyle("borderThickness");
			var cornerRadius:Number = getStyle("cornerRadius");
			var borderColor:Number = getStyle("borderColor");
			
			var w:Number = unscaledWidth - borderThickness*2;
			var h:Number = unscaledHeight - borderThickness*2;
			
			textInput.setActualSize(48, 20);
			textInput.move(w - 50, h - 22);
			
			label.setActualSize(36, 20);
			label.move(textInput.x - 40, h - 21);
		}
	}
}

 

 

 

  • 大小: 4.1 KB
0
0
分享到:
评论

相关推荐

    flex DateField 时分秒 选择

    然而,标准的Flex DateField通常只支持日期的选择,而不包括时间的选取。但在某些应用场景中,例如日程安排或时间预约系统,用户可能需要同时选择具体的时分秒。因此,“flex DateField 时分秒选择”是一种扩展功能...

    Flex自定义DateField选择时分秒

    在Flex编程中,DateField是Adobe Flex SDK提供的一种用于输入日期的组件。它允许用户通过一个下拉日历选择日期,但默认情况下,DateField仅支持日期的选择,并不包括时间。然而,在某些应用场景中,我们需要用户能够...

    Flex自定义DateField选择时分秒 修复版

    标签"Flex自定义 DateField 选择时分秒 ."进一步确认了这个组件专注于增强日期选择功能,包括时间的选择。压缩包文件"boy_dream_datefield(日期组件)"很可能包含了这个自定义组件的所有源代码和资源,包括...

    Flex带时间的日期控件

    为了实现“Flex带时间的日期控件”,我们需要自定义DateField或者使用第三方库,如mx.controls.DateTimeChooser,这是一个更全面的日期和时间选择器组件。 DateTimeChooser控件提供了一个完整的日历视图,用户可以...

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

    下面我们将深入探讨Flex时间控件及其组件。 1. Flex时间控件的结构: Flex时间控件通常由两个主要部分组成:TimeInput和TimeChooser。TimeInput是一个文本输入框,用户可以在这里直接输入时间,或者通过相关的事件...

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

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

    flex可选择时间的日历控件

    flex自带的日期控件是没有时间选择的,本控件集成了时间的选择,另外时间的选择实现了可手动输入,输入的值可以定位下拉列表框. 导入方便,引用方便,提供多种输出格式. 经过测试完全OK,并且该控件已经应用于我们公司的...

    自定义DateField

    本文将深入探讨如何在Flex中自定义DateField,以实现更丰富的功能,例如添加时间选择,并提供源码参考。 自定义DateField控件通常涉及以下几个关键步骤: 1. **扩展基类**: 首先,我们需要创建一个新的MXML组件...

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

    Flex时间选择控件的基础是MX组件库中的`MX:DateField`或Spark组件库中的`s:DateSpinner`,它们提供了一种交互式的用户界面来选择日期和时间。在这里,我们特别关注的是时间部分,即精确到时分秒的选择。 `MX:...

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

    总的来说,Flex 自定义时间控件通过增强标准`DateField`的功能,提供了更全面的时间选择和格式化能力,为Flex应用的用户界面设计提供了更多的灵活性和便利性。开发者可以根据实际需求,利用这个组件轻松地创建出高效...

    flex带时分秒控件,项目实现

    "flex带时分秒控件,项目实现"这个标题所指的就是在Flex项目中创建一个具有时分秒选择功能的日历控件,它扩展了基础的DateField组件。DateField是Adobe Flex中的一个标准组件,用于显示和编辑日期,但默认情况下它只...

    flex开发对时间控制

    flex 对时间的关注 &lt;![CDATA[ // Event handler for the DateField change event. private function dateChanged(date:Date):void { if (date == null) selection.text = "Date selected: "; else ...

    Flex 日期组件

    在Flex开发中,日期组件是不可或缺的一部分,它们用于用户界面中显示和选择日期与时间。在本主题中,我们将深入探讨“Flex 日期组件”,特别是关于年月日、年月日时以及年月日时分的`DateField`封装。`DateField`是...

    flex日期控件可选时分秒

    Flex提供了多种日期相关的组件,如DateField、DatePicker等,它们可以集成在应用程序中,为用户提供直观的日期选择体验。 三、DateTimeField组件 标题中提到的"DateTimeField"是Flex中一个重要的日期时间选择控件。...

    Flex 日历控件带时分秒,已经项目实现

    "Flex 日历控件带时分秒,已经项目实现"这个标题暗示我们讨论的是一个自定义的Flex日历组件,它不仅支持选择日期,还支持选择具体的时间(小时、分钟和秒)。在传统的Flex SDK中,内置的日历控件通常只处理日期,不...

    Flex时间控件

    综上所述,这个"Flex时间控件"的实现涉及到了ActionScript组件开发的多个方面,包括组件设计、事件处理、数据绑定、样式定制、时间处理等。通过学习和理解这个控件的实现,开发者可以进一步提升在Flex环境下的编程...

    重写flex时间控件

    flex自带的日期控件没有小时和分钟,在网上找了半天也没看到合适的,没办法只能自己重写了DateField类和DateChooser类。整个工程一起打的压缩包,解压后导入即可运行。有需要的朋友拿去用吧。

    FLEX 日期时间操作

    这种格式化方式与其它编程语言中处理日期时间的模式是类似的,但Flex中DateField组件默认不支持时间的输入。 2. 自定义日期时间显示格式 如果需要显示具体的时间信息,比如小时和分钟,Flex开发者需要自己构造这样...

Global site tag (gtag.js) - Google Analytics