flex 带有时分秒的日期组件

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>

<?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>