需要做一个带时间的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开发者需要自己构造这样...