背景:用户需要时间输入控件,尤其是小时、分钟,而flex自带的日期控件并无时、分、秒输入控件,于是做了一个日期时间自定义控件。
思路:
1)使用6个文本输入框、5个文本显示框(-,:等显示)和一个数字微调器;
2)开放selectedDate属性,用于设置初始时间和返回时间;
3)捕捉文本框的focusin事件,告诉数字微调器,需要微调年还是微调月或者日等;
4)捕捉文本框的foucsout事件,判断用户输入的年、月、日、时、分和秒是否合法。
下述为mxml代码
<?xml version="1.0" encoding="utf-8"?> <mx:HBox 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="144" horizontalGap="0" height="23" creationComplete="init()" paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0" borderStyle="solid"> <fx:Script> <![CDATA[ private var _now:Date = new Date(); [Bindable]private var iyear:int = _now.fullYear; [Bindable]private var imonth:int = _now.month+1; [Bindable]private var iday:int = _now.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_year;
public function get selectedDate():Date{ return new Date(iyear,imonth-1,iday,ihour,iminiute,isecond); }
public function set selectedDate(value:Date):void{ if(value!=null){ iyear = value.fullYear; imonth = value.month+1; iday = value.date; ihour = value.hours; iminiute = value.minutes; isecond = value.seconds; } }
protected function the_year_focusInHandler(event:FocusEvent):void { _textInput = the_year; }
protected function the_month_focusInHandler(event:FocusEvent):void { _textInput = the_month; }
protected function the_day_focusInHandler(event:FocusEvent):void { _textInput = the_day; }
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_year){ //year part iyear +=1; }else if(_textInput==the_month){ //month part imonth+=1; if(imonth>12) imonth = 1; }else if(_textInput==the_day){ iday+=1; if(iday>getMonthDays(iyear,imonth)) iday = 1; }else if(_textInput==the_hour){ ihour+=1; if(ihour>23) ihour = 0; }else if(_textInput==the_miniute){ iminiute+=1; if(iminiute>59) iminiute=0; }else if(_textInput == the_second){ isecond+=1; if(isecond>59) isecond = 0; } }else if(event.target==the_button.decrementButton){ if(_textInput == the_year){ if(iyear>1970) iyear -=1; }else if(_textInput==the_month){ //month part imonth -= 1; if(imonth<1) imonth=12; }else if(_textInput==the_day){ iday -= 1; if(iday<1) iday = getMonthDays(iyear,imonth); }else if(_textInput==the_hour){ ihour -= 1;
|