Flex 学习笔记 自定义时间控件（带分秒时显示）

由于需要时间控件，所以查考下面的例子进行修改，将日期 TextInput控件改成DateField

查考：http://blog.csdn.net/chuangxin/article/details/5976257

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup 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="200" gap="0" height="23" 
          creationComplete="init()" paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>

        <![CDATA[
            
            private var _now:Date = new Date();
            
            [Bindable]private var ihour:int = _now.hours;
            
            [Bindable]private var iminiute:int = _now.minutes;
            
            [Bindable]private var isecond:int = _now.seconds;
            
            
            
            private function init():void{
                
                the_button.textDisplay.width = 0;
                
                the_button.textDisplay.editable = false;
                
                the_button.textDisplay.setStyle("borderVisible","false");
                
                the_button.textDisplay.setStyle("borderStyle","none");
                
            }
            
            
            
            private var _textInput:TextInput = the_second;
            
            
            
            public function get selectedDate():Date{
                
                var time:Date=dfData.selectedDate;
                return new Date(time.fullYear,time.month,time.date,ihour,iminiute,isecond);
                
            }
            
            
            
            public function set selectedDate(value:Date):void{
                
                if(value!=null){
                    dfData.selectedDate=value;
                    
                    ihour = value.hours;
                    
                    iminiute = value.minutes;
                    
                    isecond = value.seconds;
                    
                }
                
            }

            
            protected function the_hour_focusInHandler(event:FocusEvent):void
                
            {
                
                _textInput = the_hour;
                
            }
            
            
            
            protected function the_miniute_focusInHandler(event:FocusEvent):void
                
            {
                
                _textInput = the_miniute;
                
            }
            
            
            
            protected function the_second_focusInHandler(event:FocusEvent):void
                
            {
                
                _textInput = the_second;
                
            }
            
            
            
            /**
             
             * format number's output
             
             */ 
            
            private function formatNumberWithChar(value:Number,digit:Number,alpha:String):String{
                
                var src:String = String(value);
                
                if(src.length>=digit){
                    
                    return src;
                    
                }else{
                    
                    var len:int = digit - src.length;
                    
                    var temp:String = "";
                    
                    for(var i:int = 0; i<len; i++){
                        
                        temp+=alpha;
                        
                    }
                    
                    return alpha+src;
                    
                }
                
            }
            
            
            
            protected function the_button_clickHandler(event:MouseEvent):void
                
            {
                
                if(event.target == the_button.incrementButton){
                    
                    if(_textInput==the_hour){
                        
                        ihour+=1;
                        
                        if(ihour>23) 
                        {
                            ihour = 0;
                            AddOneDay();
                        }
                        
                    }else if(_textInput==the_miniute){
                        
                        iminiute+=1;
                        
                        if(iminiute>59) 
                        {
                            iminiute=0;
                            ihour+=1;
                            if(ihour>23){
                                ihour=0;
                                AddOneDay();
                            }
                        }
                    }else{
                        
                        isecond+=1;
                        
                        if(isecond>59) 
                        {
                            isecond = 0;
                            iminiute+=1;
                            if(iminiute>59){
                                iminiute = 0;
                                ihour+=1;
                                if(ihour>23){
                                    ihour=0;
                                    AddOneDay();
                                }
                            }
                            
                        } 
                    }
                    
                }else if(event.target==the_button.decrementButton){
                    
                    if(_textInput==the_hour){
                        
                        ihour -= 1;
                        
                        if(ihour<0){
                            ihour = 23;
                            SubOneDay();
                        }
                        
                    }else if(_textInput==the_miniute){;
                        
                        iminiute-=1;
                        
                        if(iminiute<0){
                            iminiute = 59; 
                            ihour -= 1;
                            if(ihour<0){
                                ihour = 23;
                                SubOneDay();
                            }
                        }
                        
                    }else{
                        
                        isecond -= 1;
                        
                        if(isecond<0) {
                            isecond =59;
                            iminiute-=1;                        
                            if(iminiute<0){
                                iminiute = 59; 
                                ihour -= 1;
                                if(ihour<0){
                                    ihour = 23;
                                    SubOneDay();
                                }
                            }
                        }
                        
                    }
                    
                }
                
            }
            
            private function AddOneDay():void{
                var dt:Date=new Date(dfData.selectedDate);
                dt.setDate(dt.getDate()+1);
                dfData.selectedDate=new Date(dt.fullYear,dt.month,dt.date);
            }
            
            private function SubOneDay():void{
                var dt:Date=new Date(dfData.selectedDate);
                dt.setDate(dt.getDate()-1);
                dfData.selectedDate=new Date(dt.fullYear,dt.month,dt.date);
            }
            
            protected function the_second_focusOutHandler(event:FocusEvent):void
                
            {
                
                isecond = int(the_second.text);
                
                if(isecond>59) isecond = 0;
                
            }
            
            
            
            protected function the_miniute_focusOutHandler(event:FocusEvent):void
                
            {
                
                iminiute = int(the_miniute.text);
                
                if(iminiute>59) iminiute = 0;
                
            }
            
            
            
            protected function the_hour_focusOutHandler(event:FocusEvent):void
                
            {
                
                ihour = int(the_hour.text);
                
                if(ihour>23) ihour = 0;
                
            }

            private function isLeapYear(year:int):Boolean{
                
                if(year%4==0 && year %100!=0 || year %400==0)
                    
                    return true;
                    
                else
                    
                    return false;
                
            }
            
            private function getMonthDays(year:int, month:int):int{
                
                var days:int = 0;
                
                switch(month){
                    
                    case 1:
                        
                    case 3:
                        
                    case 5:
                        
                    case 7:
                        
                    case 8:
                        
                    case 10:
                        
                    case 12:
                        
                        days = 31;
                        
                        break;
                    
                    case 4:
                        
                    case 6:
                        
                    case 9:
                        
                    case 11:
                        
                        days = 30;
                        
                        break;
                    
                    case 2:
                        
                        days = (isLeapYear(year))?29:28;
                        
                        break;
                    
                }
                
                return days;
                
            }
            
        ]]>
        
    </fx:Script>
    <mx:DateField id="dfData" width="110" formatString="YYYY-MM-DD" />
    <s:BorderContainer width="65" height="100%">
        <s:HGroup width="100%" height="100%" gap="1">
            <s:TextInput id="the_hour" restrict="0-9" maxChars="2" width="16" borderVisible="false" text="{formatNumberWithChar(ihour,2,'0')}"
                         textAlign="right" focusIn="the_hour_focusInHandler(event)"
                         paddingRight="0" focusOut="the_hour_focusOutHandler(event)"/>        
            <s:TextInput text=":" editable="false" borderVisible="false" width="5" paddingLeft="0" paddingRight="0"/>
            
            <s:TextInput id="the_miniute" restrict="0-9" maxChars="2" width="16" borderVisible="false" text="{formatNumberWithChar(iminiute,2,'0')}"
                         textAlign="right" focusIn="the_miniute_focusInHandler(event)"         
                         paddingRight="0" focusOut="the_miniute_focusOutHandler(event)"/>            
            <s:TextInput text=":" editable="false" borderVisible="false" width="5" paddingLeft="0" paddingRight="0"/>    
            
            <s:TextInput id="the_second" restrict="0-9" maxChars="2" width="16" borderVisible="false" text="{formatNumberWithChar(isecond,2,'0')}"                         
                         textAlign="right" focusIn="the_second_focusInHandler(event)" focusOut="the_second_focusOutHandler(event)"/>
            
        </s:HGroup>
    </s:BorderContainer>

    <s:NumericStepper id="the_button" width="18"
                      
                      borderVisible="false" click="the_button_clickHandler(event)"/>
    

</s:HGroup>

界面中调用方法，设置初始时间为2012年8月1日0点

<time:CustomLongTimeField id="ctime" selectedDate="{new Date(2012,8,1,0,0,0)}"/>