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>
<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)}"/>
