Flex 的DateField组件不能输入时间,但一般应用尤其在数据量较大的情况下,又不可能不根据时间条件来过滤,比如在消息查询,历史记录或者日志查看。
网上搜了很多文章大概是想着怎么对DateField扩展,重写他的方法或者监听他的事件,也有有的是自己用NumbericStepper,总之代码很长。
看flex的文档帮助有以下说明:
DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标。当用户在控件边框内的任一位置单击时,将弹出一个 DateChooser 控件,显示当月的所有日期。如果未选择日期,则该文本字段为空白,并且 DateChooser 控件中将显示当前日期的月份。
由此可见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;
分享到:
相关推荐
felx DateField 控件 完美支持时分秒选择,包含源代码,可以根据需要进行修改。版本为flex4.0。
开发了一个Flex日期选择器组件(带年月日时分妙),若哪里需要用到日期选择器组件,把DateField.swc文件拷贝到Flex项目的libs文件夹内,引用util.dateField包下的DateFieldComp组件即可。 用组件的id.text可获得组件的...
flex自带的日期控件是没有时间选择的,本控件集成了时间的选择,另外时间的选择实现了可手动输入,输入的值可以定位下拉列表框. 导入方便,引用方便,提供多种输出格式. 经过测试完全OK,并且该控件已经应用于我们公司的...
自定义dateField 自定义dateChoose 默认中文显示 支持时分秒选择
最近刚好用到DateField组件,却无奈的发现只能选择年月日,不支持时分秒,在晚上找了好多,有的勉强可以用,但是很不完善.对从网上拿到一份代码进行了改善,具体从哪里拿的也忘了,请原作者勿怪. 改善之后的功能: 1.可以...
自定义dateField 自定义dateChoose 默认中文显示 支持时分秒选择
提供 :Flex4中DateChooser和DateField 控件的使用实例。
extjs中,经常会用到datefield组件控制用户对日期的操作,比如日志管理,需要开始时间、结束时间,但是IE8下日期选择框会显示不全,解决方法参加代码。 同时改代码解决了开始时间、结束时间的时间范围控制的问题,即...
Flex-时间控件,带年月日时分秒,本人一直用的一个控件,一个无BUG的好东西哦
NULL 博文链接:https://luhantu.iteye.com/blog/1910595
自定义flex DateField控件可选择时间,有源码。
NULL 博文链接:https://tongqiuyan.iteye.com/blog/1208153
Ext扩展dateField时间控件,可以选择年月日、年月、年、月
flex 对时间的关注 <![CDATA[ // Event handler for the DateField change event. private function dateChanged(date:Date):void { if (date == null) selection.text = "Date selected: "; else ...
extjs4.2 日期控件 datefield 拓展加上选择时分秒功能。 在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用...
NULL 博文链接:https://qiansheng.iteye.com/blog/2080753
包括 年月日 年月日时 年月日时分的DateField封装
NULL 博文链接:https://newlethe.iteye.com/blog/814634
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)