`
isiqi
  • 浏览: 16002095 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Flex 自定义日期时间控件

阅读更多

背景:用户需要时间输入控件,尤其是小时、分钟,而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;

; color: #0033ff; font-size: 10pt

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics