flex 带有时分秒的日期组件

 

有两种方式实现


1：比较简单

Java代码  

1. mx:Label text="开始时间" x="56" y="142"/>   
2.         <mx:FormItem label="开始时间:" width="42%" x="53" y="87">    
3.             <mx:HBox horizontalGap="1">    
4.                 <mx:DateField id="startDate" editable="false"    
5.                               selectedDate="{new Date()}"    
6.                               formatString="YYYY-MM-DD"    
7.                               dayNames="[日,一,二,三,四,五,六]"    
8.                               monthNames="[一,二,三,四,五,六,七,八,九,十,十一,十二]"/>    
9.                 <mx:NumericStepper id="startHour"  maxChars="2" maximum="23" width="50" />    
10.                 <mx:Label text="：" width="18"/>    
11.                 <mx:NumericStepper id="startMinute" maxChars="2" maximum="59" width="50" />    
12.                 <mx:Label text="：" width="18"/>    
13.                 <mx:NumericStepper id="startSecond" maxChars="2" maximum="59" width="50" />    
14.             </mx:HBox>    
15.         </mx:FormItem>  

mx:Label text="开始时间" x="56" y="142"/><mx:FormItem label="开始时间:" width="42%" x="53" y="87"> <mx:HBox horizontalGap="1"> <mx:DateField id="startDate" editable="false"   selectedDate="{new Date()}"   formatString="YYYY-MM-DD"   dayNames="[日,一,二,三,四,五,六]"   monthNames="[一,二,三,四,五,六,七,八,九,十,十一,十二]"/> <mx:NumericStepper id="startHour"  maxChars="2" maximum="23" width="50" /> <mx:Label text="：" width="18"/> <mx:NumericStepper id="startMinute" maxChars="2" maximum="59" width="50" /> <mx:Label text="：" width="18"/> <mx:NumericStepper id="startSecond" maxChars="2" maximum="59" width="50" /> </mx:HBox> </mx:FormItem>

2：

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>   
2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"     
3.          horizontalGap="0" verticalAlign="middle">    
4.     <mx:NumberValidator id="hourValidator" source="{txtHour}" exceedsMaxError="" lowerThanMinError="" integerError=""    
5.                         property="text" maxValue="{maxHour}" minValue="{minHour}"    
6.                         trigger="{txtHour}" triggerEvent="change" invalid="txtHour.text = String(maxHour); txtHour.errorString = '';" />    
7.     <mx:NumberValidator id="minuteValidator" source="{txtMinute}" exceedsMaxError="" lowerThanMinError="" integerError=""    
8.                         property="text" maxValue="59" minValue="0"     
9.                         trigger="{txtMinute}" triggerEvent="change" invalid="txtMinute.text = '59'" allowNegative="false"  />    
10.     <mx:NumberValidator id="secondValidator" source="{txtSecond}" exceedsMaxError="" lowerThanMinError="" integerError=""    
11.                         property="text" maxValue="59" minValue="0"     
12.                         trigger="{txtSecond}" triggerEvent="change" invalid="txtSecond.text = '59'" allowNegative="false"  />    
13.        
14.        
15.     <mx:DateField id="dfDate"/>    
16.     <mx:TextInput id="txtHour" height="100%" restrict="0-9" maxChars="2" text="00"    
17.                   mouseDown="setTextFocus(event)" styleName="textStyle" errorString=""    
18.                   keyDown="keyHandler(event)"/>    
19.     <mx:Spacer width="-8" /><mx:Label text=":" /><mx:Spacer width="-16" />    
20.     <mx:TextInput id="txtMinute" height="100%" restrict="0-9" maxChars="2" text="00"    
21.                   mouseDown="setTextFocus(event)" styleName="textStyle" errorString=""    
22.                   keyDown="keyHandler(event)"/>    
23.     <mx:Spacer width="-8" /><mx:Label text=":" /><mx:Spacer width="-16" />    
24.     <mx:TextInput id="txtSecond" height="100%" restrict="0-9" maxChars="2" text="00"    
25.                   mouseDown="setTextFocus(event)" styleName="textStyle" errorString=""    
26.                   keyDown="keyHandler(event)"/>    
27.        
28.     <mx:Style>    
29.         .textStyle{    
30.             border-thickness : 0;    
31.             border-style : none;    
32.             background-alpha : 0;    
33.             text-align : center;    
34.             focus-alpha : 0;    
35.             padding-top : 2;    
36.         }    
37.     </mx:Style>         
38.     <mx:Script>    
39.         <![CDATA[    
40.                
41.             [Bindable]    
42.             private var maxHour:int = 23;    
43.             [Bindable]    
44.             private var minHour:int = 0;    
45.                
46.             private var _is24Hour:Boolean = true;    
47.                
48.             private function setTextFocus(event:Event):void    
49.             {    
50.                 TextField(event.target).setSelection(0, 2);    
51.             }    
52.                
53.             public function set is24Hour(value:Boolean):void{    
54.                 this._is24Hour = value;    
55.                 if(this._is24Hour){    
56.                     maxHour = 23;    
57.                 }else{    
58.                     maxHour = 11;    
59.                 }    
60.             }    
61.                
62.             //上下箭头按键处理    
63.             private function keyHandler(event:KeyboardEvent):void{    
64.                 var value:int = int(TextInput(event.currentTarget).text);    
65.                    
66.                 switch(event.keyCode){    
67.                     //value++，上、右箭头    
68.                     case 38:    
69.                     case 39:    
70.                         value++;    
71.                         break;    
72.                        
73.                     //value--，下、左箭头    
74.                     case 37:    
75.                     case 40:    
76.                         value--;    
77.                         break;    
78.                 }    
79.                    
80.                 //小时的设置    
81.                 if(event.currentTarget == txtHour){    
82.                     if(value>maxHour){    
83.                         value = minHour;    
84.                     }    
85.                     if(value<0){    
86.                         value = maxHour;    
87.                     }    
88.                 }    
89.                    
90.                 //分钟、秒钟的设置    
91.                 if(event.currentTarget == txtMinute || event.currentTarget == txtSecond){    
92.                     if(value>59){    
93.                         value = 0;    
94.                     }    
95.                     if(value<0){    
96.                         value = 59;    
97.                     }    
98.                 }           
99.                    
100.                 var text:String = String(value);    
101.                    
102.                 //不足两位的，前面补0    
103.                 if(text.length == 1 ){    
104.                     text = "0"+text;    
105.                 }    
106. //                 
107.                 TextInput(event.currentTarget).text = text;    
108. //              TextInput(event.currentTarget).setSelection(0,2);   
109.             }    
110.             //设置缺省值    
111.             public function set defaultDateTime(date:Date):void{    
112.                 dfDate.selectedDate = date;    
113.                 txtHour.text = formatString(date.getHours());    
114.                 txtMinute.text = formatString(date.getMinutes());    
115.                 txtSecond.text = formatString(date.getSeconds());    
116.             }    
117.                
118.             private function formatString(value:Number):String{    
119.                 var str:String = String(value);    
120.                 if(value<10){    
121.                     str = "0"+str;    
122.                 }    
123.                 return str;    
124.             }    
125.                
126.             //返回当前时间值    
127.             public function get value():String{    
128.                 return dfDate.text+" "+txtHour.text+":"+txtMinute.text+":"+txtSecond.text;    
129.             }    
130.                
131.         ]]>    
132.     </mx:Script>        
133. </mx:HBox>   

<?xml version="1.0" encoding="utf-8"?><mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"   horizontalGap="0" verticalAlign="middle"> <mx:NumberValidator id="hourValidator" source="{txtHour}" exceedsMaxError="" lowerThanMinError="" integerError="" property="text" maxValue="{maxHour}" minValue="{minHour}" trigger="{txtHour}" triggerEvent="change" invalid="txtHour.text = String(maxHour); txtHour.errorString = '';" /> <mx:NumberValidator id="minuteValidator" source="{txtMinute}" exceedsMaxError="" lowerThanMinError="" integerError="" property="text" maxValue="59" minValue="0"  trigger="{txtMinute}" triggerEvent="change" invalid="txtMinute.text = '59'" allowNegative="false"  /> <mx:NumberValidator id="secondValidator" source="{txtSecond}" exceedsMaxError="" lowerThanMinError="" integerError="" property="text" maxValue="59" minValue="0"  trigger="{txtSecond}" triggerEvent="change" invalid="txtSecond.text = '59'" allowNegative="false"  /> <mx:DateField id="dfDate"/> <mx:TextInput id="txtHour" height="100%" restrict="0-9" maxChars="2" text="00"   mouseDown="setTextFocus(event)" styleName="textStyle" errorString=""   keyDown="keyHandler(event)"/> <mx:Spacer width="-8" /><mx:Label text=":" /><mx:Spacer width="-16" /> <mx:TextInput id="txtMinute" height="100%" restrict="0-9" maxChars="2" text="00"   mouseDown="setTextFocus(event)" styleName="textStyle" errorString=""   keyDown="keyHandler(event)"/> <mx:Spacer width="-8" /><mx:Label text=":" /><mx:Spacer width="-16" /> <mx:TextInput id="txtSecond" height="100%" restrict="0-9" maxChars="2" text="00"   mouseDown="setTextFocus(event)" styleName="textStyle" errorString=""   keyDown="keyHandler(event)"/> <mx:Style> .textStyle{ border-thickness : 0; border-style : none; background-alpha : 0; text-align : center; focus-alpha : 0; padding-top : 2; } </mx:Style>      <mx:Script> <![CDATA[ [Bindable] private var maxHour:int = 23; [Bindable] private var minHour:int = 0; private var _is24Hour:Boolean = true; private function setTextFocus(event:Event):void { TextField(event.target).setSelection(0, 2); } public function set is24Hour(value:Boolean):void{ this._is24Hour = value; if(this._is24Hour){ maxHour = 23; }else{ maxHour = 11; } } //上下箭头按键处理 private function keyHandler(event:KeyboardEvent):void{ var value:int = int(TextInput(event.currentTarget).text); switch(event.keyCode){ //value++，上、右箭头 case 38: case 39: value++; break; //value--，下、左箭头 case 37: case 40: value--; break; } //小时的设置 if(event.currentTarget == txtHour){ if(value>maxHour){ value = minHour; } if(value<0){ value = maxHour; } } //分钟、秒钟的设置 if(event.currentTarget == txtMinute || event.currentTarget == txtSecond){ if(value>59){ value = 0; } if(value<0){ value = 59; } }        var text:String = String(value); //不足两位的，前面补0 if(text.length == 1 ){ text = "0"+text; } //TextInput(event.currentTarget).text = text; //TextInput(event.currentTarget).setSelection(0,2); } //设置缺省值 public function set defaultDateTime(date:Date):void{ dfDate.selectedDate = date; txtHour.text = formatString(date.getHours()); txtMinute.text = formatString(date.getMinutes()); txtSecond.text = formatString(date.getSeconds()); } private function formatString(value:Number):String{ var str:String = String(value); if(value<10){ str = "0"+str; } return str; } //返回当前时间值 public function get value():String{ return dfDate.text+" "+txtHour.text+":"+txtMinute.text+":"+txtSecond.text; } ]]> </mx:Script>     </mx:HBox> 

两种效果图片如下：

•