有两种方式实现
1:比较简单
2:
两种效果图片如下:
1:比较简单
- 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>
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:
- <?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>
<?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>
两种效果图片如下: