Flex 时间选择输入组件(对DateField的改进)

Flex 的DateField组件不能输入时间,但一般应用尤其在数据量较大的情况下，又不可能不根据时间条件来过滤，比如在消息查询，历史记录或者日志查看。
网上搜了很多文章大概是想着怎么对DateField扩展,重写他的方法或者监听他的事件，也有有的是自己用NumbericStepper,总之代码很长。
看flex的文档帮助有以下说明：
[i]DateField 控件是用于显示日期的文本字段，字段右侧带有日历图标。当用户在控件边框内的任一位置单击时，将弹出一个 DateChooser 控件，显示当月的所有日期。如果未选择日期，则该文本字段为空白，并且 DateChooser 控件中将显示当前日期的月份。[/i]
由此可见DateField实现原理就是一个TextInput 加一个DateChooser,按这个思路自己写一个也很简单的，当然你也可以继承DateField但里面的事件监听比较繁琐的。
以下是我的写法，就是一个HBox 里面放一个TextInput 和一个Button,当点击Button的时候弹出DateChooser,然后把选择的值放在TextInput以String方式传到后台然后转换成具体的时间。为了好看吧DateField的图标嵌入到这个Button中。下面的代码是具体的实现。有一点没实现就是时间默认是当前时间，要想改只能手动改(如果有必要你可以自己封装一个NumbericStepper来实现时间的选择）
package message.utils
{
import flash.events.MouseEvent;

import mx.containers.HBox;
import mx.controls.Button;
import mx.controls.DateChooser;
import mx.controls.TextInput;
import mx.events.CalendarLayoutChangeEvent;
import mx.formatters.DateFormatter;
import mx.managers.PopUpManager;

public class TimestampField extends HBox
{
private var dc:DateChooser;
private var textInput:TextInput;
private var btn:Button;
private var df:DateFormatter;

//add dateFile icon
[Embed(source="message/assets/DateField.jpg")]
private var dateFieldIcon:Class;

public function TimestampField()
{
super();
//Date Formate Change Yourown If Require
df=new DateFormatter();
df.formatString="YYYY-MM-DD JJ:NN:SS";
//Create Text Input -DateChoose
textInput=new TextInput();
btn=new Button();
dc=new DateChooser();

this.addChild(textInput);
this.addChild(btn);

//Set Formate
textInput.width=135;
textInput.height=20;

btn.width=20;
btn.height=20;
btn.setStyle("icon", dateFieldIcon);
//Add Event-Listener
dc.addEventListener(CalendarLayoutChangeEvent.CHANGE, onChange);
btn.addEventListener(MouseEvent.CLICK, openDc);
}

private function openDc(event:MouseEvent):void
{
PopUpManager.addPopUp(this.dc, this.btn, true);
PopUpManager.centerPopUp(this.dc);
}

private function onChange(event:CalendarLayoutChangeEvent):void
{
var dt:Date=new Date();
var stmp:String=df.format(event.newDate);
stmp=stmp.substr(0, 11) + df.format(dt).substr(10);
this.textInput.text=stmp;
PopUpManager.removePopUp(this.dc);
}
}
}
注以下代码中的DateField.jpg 是用qq从DateField上截屏然后保存到指定的目录下的。 //add dateFile icon
[Embed(source="message/assets/DateField.jpg")]
private var dateFieldIcon:Class;