需要做一个带时间的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); } } }
相关推荐
然而,标准的Flex DateField通常只支持日期的选择,而不包括时间的选取。但在某些应用场景中,例如日程安排或时间预约系统,用户可能需要同时选择具体的时分秒。因此,“flex DateField 时分秒选择”是一种扩展功能...
在Flex编程中,DateField是Adobe Flex SDK提供的一种用于输入日期的组件。它允许用户通过一个下拉日历选择日期,但默认情况下,DateField仅支持日期的选择,并不包括时间。然而,在某些应用场景中,我们需要用户能够...
标签"Flex自定义 DateField 选择时分秒 ."进一步确认了这个组件专注于增强日期选择功能,包括时间的选择。压缩包文件"boy_dream_datefield(日期组件)"很可能包含了这个自定义组件的所有源代码和资源,包括...
为了实现“Flex带时间的日期控件”,我们需要自定义DateField或者使用第三方库,如mx.controls.DateTimeChooser,这是一个更全面的日期和时间选择器组件。 DateTimeChooser控件提供了一个完整的日历视图,用户可以...
下面我们将深入探讨Flex时间控件及其组件。 1. Flex时间控件的结构: Flex时间控件通常由两个主要部分组成:TimeInput和TimeChooser。TimeInput是一个文本输入框,用户可以在这里直接输入时间,或者通过相关的事件...
标题提到的“flex带时间的日期控件,直接使用”指的是一个扩展了Flex默认日期选择器功能的控件,它不仅支持选择日期,还包含了时间的选择功能。这在需要用户输入精确到时间的日期数据的应用场景中非常有用。 在Flex...
flex自带的日期控件是没有时间选择的,本控件集成了时间的选择,另外时间的选择实现了可手动输入,输入的值可以定位下拉列表框. 导入方便,引用方便,提供多种输出格式. 经过测试完全OK,并且该控件已经应用于我们公司的...
本文将深入探讨如何在Flex中自定义DateField,以实现更丰富的功能,例如添加时间选择,并提供源码参考。 自定义DateField控件通常涉及以下几个关键步骤: 1. **扩展基类**: 首先,我们需要创建一个新的MXML组件...
Flex时间选择控件的基础是MX组件库中的`MX:DateField`或Spark组件库中的`s:DateSpinner`,它们提供了一种交互式的用户界面来选择日期和时间。在这里,我们特别关注的是时间部分,即精确到时分秒的选择。 `MX:...
总的来说,Flex 自定义时间控件通过增强标准`DateField`的功能,提供了更全面的时间选择和格式化能力,为Flex应用的用户界面设计提供了更多的灵活性和便利性。开发者可以根据实际需求,利用这个组件轻松地创建出高效...
"flex带时分秒控件,项目实现"这个标题所指的就是在Flex项目中创建一个具有时分秒选择功能的日历控件,它扩展了基础的DateField组件。DateField是Adobe Flex中的一个标准组件,用于显示和编辑日期,但默认情况下它只...
flex 对时间的关注 <![CDATA[ // Event handler for the DateField change event. private function dateChanged(date:Date):void { if (date == null) selection.text = "Date selected: "; else ...
在Flex开发中,日期组件是不可或缺的一部分,它们用于用户界面中显示和选择日期与时间。在本主题中,我们将深入探讨“Flex 日期组件”,特别是关于年月日、年月日时以及年月日时分的`DateField`封装。`DateField`是...
Flex提供了多种日期相关的组件,如DateField、DatePicker等,它们可以集成在应用程序中,为用户提供直观的日期选择体验。 三、DateTimeField组件 标题中提到的"DateTimeField"是Flex中一个重要的日期时间选择控件。...
"Flex 日历控件带时分秒,已经项目实现"这个标题暗示我们讨论的是一个自定义的Flex日历组件,它不仅支持选择日期,还支持选择具体的时间(小时、分钟和秒)。在传统的Flex SDK中,内置的日历控件通常只处理日期,不...
综上所述,这个"Flex时间控件"的实现涉及到了ActionScript组件开发的多个方面,包括组件设计、事件处理、数据绑定、样式定制、时间处理等。通过学习和理解这个控件的实现,开发者可以进一步提升在Flex环境下的编程...
flex自带的日期控件没有小时和分钟,在网上找了半天也没看到合适的,没办法只能自己重写了DateField类和DateChooser类。整个工程一起打的压缩包,解压后导入即可运行。有需要的朋友拿去用吧。
这种格式化方式与其它编程语言中处理日期时间的模式是类似的,但Flex中DateField组件默认不支持时间的输入。 2. 自定义日期时间显示格式 如果需要显示具体的时间信息,比如小时和分钟,Flex开发者需要自己构造这样...