自定义DateField,带时分秒

效果如图：

直接上代码...

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 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="400" height="30" backgroundColor="#019CFE" borderAlpha="0.6"
                   borderColor="#FF0000" borderWeight="2" chromeColor="#019CFE"
                   contentBackgroundColor="#019CFE" cornerRadius="2" fontWeight="bold"
                   symbolColor="#0006FE" textAlign="center">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <!--
        author : Hero
        blog : http://www.cnblogs.com/Hero-Qiang/
        -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            public function getTime():String
            {
                return date.text + " " + format(hour.value) + ":" + format(minute.value) + ":" + format(second.value);
            }
            private function format(value:Number):String
            {
                return value < 10 ? "0" + value : "" + value ;
            }
        ]]>
    </fx:Script>
    <mx:DateField id="date" right="212" width="{this.width - 216}" height="{this.height - 4}" enabled="true"
                  fontWeight="bold" formatString="YYYY-MM-DD" selectedDate="{new Date()}"
                  showToday="true" textAlign="center" verticalCenter="0"
                  yearNavigationEnabled="true"/>
    <s:NumericStepper id="hour" right="170" width="40" height="{this.height - 4}" fontWeight="bold" maxChars="2"
                       maximum="23" minimum="0" stepSize="1" textAlign="center" verticalCenter="0" allowValueWrap="true" valueFormatFunction="format"/>
    <s:Label right="142" width="25" height="{this.height - 4}" fontFamily="楷体" fontSize="12" fontWeight="bold"
             text="时" textAlign="center" verticalAlign="middle" verticalCenter="0"/>
    <s:NumericStepper id="minute" right="100" width="40" height="{this.height - 4}" fontWeight="bold" maxChars="2"
                      maximum="59" minimum="0" stepSize="1" textAlign="center" verticalCenter="0" allowValueWrap="true" valueFormatFunction="format"/>
    <s:Label right="72" width="25" height="{this.height - 4}" fontFamily="楷体" fontSize="12" fontWeight="bold"
             text="分" textAlign="center" verticalAlign="middle" verticalCenter="0"/>
    <s:NumericStepper id="second" right="30" width="40" height="{this.height - 4}" fontWeight="bold" maxChars="2"
                       maximum="59" minimum="0" stepSize="1" textAlign="center" verticalCenter="0" allowValueWrap="true" valueFormatFunction="format"/>
    <s:Label right="2" width="25" height="{this.height - 4}" fontFamily="楷体" fontSize="12" fontWeight="bold"
             text="秒" textAlign="center" verticalAlign="middle" verticalCenter="0"/>
</s:BorderContainer>