<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
	paddingLeft="2" paddingRight="2" horizontalGap="0" verticalAlign="middle">
    
    <mx:Metadata>
        [Event(name="change", type="flash.events.Event")]
    </mx:Metadata>

	<mx:Script>
		<![CDATA[
			
			[Bindable] private var _selectedDate:Date = new Date();
			
			[Bindable] 
			[Inspectable(defaultValue='5', category="Other", enumeration="1,5,10,15,30")] 
			public var minuteIncrement:int = 5;
			
			
			public function get selectedDate():Date
			{
				this.validateNow();
				return this._selectedDate;
			}
			
			public function set selectedDate(value:Date):void
			{
				this._selectedDate = value;
			}
			

			public function handleChange():void
			{
				/*
				if (minutes.value == 60)
				{
					minutes.value = 0;
					hours.value++;
				}
				
				/*
				if (minutes.value == -1)
				{
					minutes.value = 59;
					hours.value--;
				}
				
				if (hours.value == 24)
				{
					hours.value = 0;
					date.setTime(date.getTime() + 1000 * 60 * 60 * 24);
				}
				
				if (hours.value == -1)
				{
					hours.value = 23;
					date.setTime(date.getTime() - 1000 * 60 * 60 * 24);
				}
				*/
				
				var militaryHours:int = hours.value;
				var selDate:Date = this.date.selectedDate;
				var date:Date = new Date(
										selDate.getFullYear(),
										selDate.getMonth(),
										selDate.getDate(),
										militaryHours,
										minutes.value)
				this.selectedDate = date;
				
				this.invalidateProperties();
				this.validateNow();
				this.dispatchEvent(new Event("change"));

			}
		]]>
	</mx:Script>
	<mx:DateField id="date"  formatString="DD/MM/YYYY" selectedDate="{this._selectedDate}" change="handleChange()"/>
	<mx:Spacer width="10"/>
	<mx:NumericStepper value="{this._selectedDate.getHours()}" id="hours" stepSize="1" minimum="-1" maximum="24" change="handleChange()" textAlign="center" width="60"/>

	<mx:NumericStepper value="{this._selectedDate.getMinutes()}" id="minutes" stepSize="1" minimum="-1" maximum="60" change="handleChange()" textAlign="center" width="60"/>
</mx:HBox>