Select Date and Time with DateTime selector component for Flex

Because there is nothing like that supplied with Flex 3, I decided to make my own little component.

Feel free to use i:

Component source code:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
       
        /**
         * AM/PM format and 24Hrs format. Not yet implemented :)
         * */
        public var format:int;
       
        private function init():void {
            date.selectedDate = new Date();
        }
       
        [Bindable]
        public function get selectedDate():Date {
            if(date.selectedDate) {
                var result:Date = date.selectedDate;
                result.setHours(hours.value,minutes.value,seconds.value);
                return result
            } else {
                return null;
            }
        }
       
        public function set selectedDate(value:Date):void {
            hours.value = value.getHours();
            minutes.value = value.getMinutes();
            seconds.value = value.getSeconds();
            date.selectedDate = value;
        }
       
        private function onAnyChange(event:Event):void {
            var new_event:Event = new Event(Event.CHANGE);
            this.dispatchEvent(new_event);
        }
    ]]>
</mx:Script>
    <mx:NumericStepper minimum="0" maximum="24" stepSize="1" width="40" id="hours" change="onAnyChange(event)"/>
    <mx:NumericStepper minimum="0" maximum="59" stepSize="1" width="40" id="minutes" change="onAnyChange(event)"/>
    <mx:NumericStepper minimum="0" maximum="59" stepSize="1" width="40" id="seconds" change="onAnyChange(event)"/>
    <mx:DateField width="90" id="date" change="onAnyChange(event)" showToday="true"/>
</mx:HBox>

And test application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="org.ectar.components.*" creationComplete="init()">
    <mx:Script>
        <![CDATA[
       
            private function init():void {
                dateTime.addEventListener(Event.CHANGE,onDateChange);
            }
           
            private function onDateChange(event:Event):void {
                var target:DateTimeSelector = event.target as DateTimeSelector;
                dateTimeLabel.text = target.selectedDate.toString();
            }
        ]]>
    </mx:Script>
    <components:DateTimeSelector id="dateTime" horizontalCenter="0" verticalCenter="0"/>
    <mx:Label width="224" id="dateTimeLabel" textAlign="center" horizontalCenter="0" verticalCenter="28"/>
</mx:Application>