仿DateField的时间组件

<?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>