<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="{timeWidth}" height="{timeHeight}" borderColor="#DEDEDE"
borderVisible="true"
creationComplete="bordercontainer1_creationCompleteHandler(event)">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.easymap.publicWidget.toolWidget.assets.script.CreateTimeImgScript;
import mx.controls.DateChooser;
import mx.core.FlexGlobals;
import mx.events.CalendarLayoutChangeEvent;
import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
import mx.managers.PopUpManager;
public var df:DateFormatter = new DateFormatter();
public var dc:DateChooser; //时间戳
public var isPopExist:Boolean = false; //是否有时间控件弹出
public var isCurrent:Boolean = false; //点击的是否为时间控件
[Bindable]
public var text:String = ""; //控件文本
[Bindable]
public var timeWidth:Number = 0; //控件宽
[Bindable]
public var timeHeight:Number = 0; //控件高
/**
* 点击日历小图标
* */
protected function timestampImg_clickHandler(event:MouseEvent):void
{
if (isPopExist) {
PopUpManager.removePopUp(dc);
isPopExist = false;
isCurrent = false;
} else {
isPopExist = true;
isCurrent = true;
dc = new DateChooser();
dc.yearNavigationEnabled = true;
dc.addEventListener(CalendarLayoutChangeEvent.CHANGE, onChange);
PopUpManager.addPopUp(dc, this.timestampImg, false);
PopUpManager.centerPopUp(dc);
}
}
/**
* 选择时间事件
* */
private function onChange(event:CalendarLayoutChangeEvent):void
{
var dt:Date = new Date();
//df.formatString="YYYY-MM-DD JJ:NN:SS";
df.formatString="YYYY-MM-DD";
var stmp:String = df.format(event.newDate);
stmp = stmp.substr(0, 11) + df.format(dt).substr(10);
this.textInput.text = stmp;
this.text = stmp;
PopUpManager.removePopUp(dc);
isPopExist = false;
isCurrent = false;
}
/**
* 改变日历图标
* */
protected function timestampImg_mouseOverHandler(event:MouseEvent):void
{
timestampImg.source = CreateTimeImgScript.QUERY_RILI_OVER;
}
/**
* 改变日历图标
* */
protected function timestampImg_mouseOutHandler(event:MouseEvent):void
{
timestampImg.source = CreateTimeImgScript.QUERY_RILI_UP;
}
/**
* 点击文本框
* */
protected function textInput_clickHandler(event:MouseEvent):void
{
textInput.text = ""; //清楚文本框内容
this.text = ""; //清楚文本框内容
if (isPopExist) {
PopUpManager.removePopUp(dc);
isPopExist = false;
isCurrent = false;
} else {
isPopExist = true;
isCurrent = true;
dc = new DateChooser();
dc.yearNavigationEnabled = true;
dc.addEventListener(CalendarLayoutChangeEvent.CHANGE, onChange);
PopUpManager.addPopUp(dc, this.timestampImg, false);
PopUpManager.centerPopUp(dc);
}
}
/**
* 派发鼠标点击监听事件
* */
protected function bordercontainer1_creationCompleteHandler(event:FlexEvent):void
{
Sprite(FlexGlobals.topLevelApplication).addEventListener(MouseEvent.CLICK, hideDateTime);
}
/**
* 控制点击时间组件之外的舞台时,隐藏时间控件
* */
private function hideDateTime(event:Event):void
{
if (!isCurrent) {
if (isPopExist) {
isPopExist = false;
PopUpManager.removePopUp(dc);
}
}
isCurrent = false;
}
]]>
</fx:Script>
<s:BorderContainer id="topPanel3" left="0" width="{timeWidth}" height="{timeHeight}"
backgroundAlpha="0.0" borderColor="#DEDEDE" borderVisible="false"
verticalCenter="0">
<s:Image id="timestampImg" y="2" x="0" top="2" bottom="2" right="2" click="timestampImg_clickHandler(event)"
mouseOut="timestampImg_mouseOutHandler(event)"
mouseOver="timestampImg_mouseOverHandler(event)"
source="{CreateTimeImgScript.QUERY_RILI_UP}"/>
<s:TextInput id="textInput" left="2" top="4" bottom="4" width="90%" borderColor="#FFFFFF"
borderVisible="false" click="textInput_clickHandler(event)" enabled="true"
focusColor="#FFFFFF" paddingBottom="0" paddingTop="0" text="{text}"/>
</s:BorderContainer>
</s:BorderContainer>
- 浏览: 5434 次
- 性别:
- 来自: 北京
相关推荐
Ext扩展dateField时间控件,可以选择年月日、年月、年、月
关于Exjts2.2.1中datefield控件在IE8下显示不全BUG解决如下
extjs中 google 不兼容 datefield 控件
extjs中,经常会用到datefield组件控制用户对日期的操作,比如日志管理,需要开始时间、结束时间,但是IE8下日期选择框会显示不全,解决方法参加代码。 同时改代码解决了开始时间、结束时间的时间范围控制的问题,即...
extjs4.2 日期控件 datefield 拓展加上选择时分秒功能。 在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用...
felx DateField 控件 完美支持时分秒选择,包含源代码,可以根据需要进行修改。版本为flex4.0。
NULL 博文链接:https://newlethe.iteye.com/blog/814634
自定义flex DateField控件可选择时间,有源码。
Ext DateField控件 - 只选择年月插件。只有分享,我们才能不断进步!
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
考虑到extjs DateField的关键配置和主要操作
Flex-时间控件,带年月日时分秒,本人一直用的一个控件,一个无BUG的好东西哦
NULL 博文链接:https://zhaolianyang.iteye.com/blog/852544
最近刚好用到DateField组件,却无奈的发现只能选择年月日,不支持时分秒,在晚上找了好多,有的勉强可以用,但是很不完善.对从网上拿到一份代码进行了改善,具体从哪里拿的也忘了,请原作者勿怪. 改善之后的功能: 1.可以...
flex自带的日期控件是没有时间选择的,本控件集成了时间的选择,另外时间的选择实现了可手动输入,输入的值可以定位下拉列表框. 导入方便,引用方便,提供多种输出格式. 经过测试完全OK,并且该控件已经应用于我们公司的...
在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用的选择日期时分秒的拓展控件,extjs版本是4.2,亲测能用,...
自定义dateField 自定义dateChoose 默认中文显示 支持时分秒选择
* 超级时间选择控件:在原有时间控件功能上,新增了单独选择年/月,年,月的功能,清空时间功能 * Ext-3.0.0 * 用法: * <input type="text" name="dateField" id="dateField" /> * new Ext.form....
自定义dateField 自定义dateChoose 默认中文显示 支持时分秒选择