<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml" layout="vertical">

	<mx:Panel title="Schedule Your Appointment">
		<mx:Form>
		
			<mx:FormItem label="Date:" width="100%">
				<mx:DateField id="date" selectedDate="{appointmentDateAndTime}" change="updateAppointmentTime()" width="100%"/>
			</mx:FormItem>
			
			<mx:FormItem label="Time:" width="100%">
				<yahoo:TimeStepper id="time" value="{appointmentDateAndTime}" change="updateAppointmentTime()" width="100%"/>
			</mx:FormItem>
			
		</mx:Form>
		
		<mx:ControlBar horizontalAlign="right">
			<mx:Button label="Submit" click="submit()"/>
		</mx:ControlBar>
	</mx:Panel>
	
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
	
			[Bindable]
			private var appointmentDateAndTime:Date = new Date();
			
			private function updateAppointmentTime():void
			{
				var selectedDate:Date = this.date.selectedDate;
				var selectedTime:Date = this.time.value;
				this.appointmentDateAndTime = new Date(selectedDate.fullYear, selectedDate.month, selectedDate.date,
					selectedTime.hours, selectedTime.minutes, selectedTime.seconds);
			}
			
			private function submit():void
			{
				var title:String = "Appointment Scheduled";
				var text:String = "This confirms that your appointment is scheduled.\n\n"
				text += "Date: " + appointmentDateAndTime.toLocaleDateString() + "\n"
				text += "Time: " + appointmentDateAndTime.toLocaleTimeString();
				
				Alert.show(text, title);
			}
		]]>
	</mx:Script>
	
	<mx:Style>
		Panel
		{
			borderColor: #ffffff;
			borderAlpha: 1;
			headerColors: #e7e7e7, #d9d9d9;
		}
		
		Alert
		{
			backgroundColor: #ffffff;
			backgroundAlpha: 1;
			borderColor: #ffffff;
			borderAlpha: 1;
			color: #0B333C;
			titleStyleName: "alertTitle";
		}
		
		.alertTitle
		{
			color: #0B333C;
		}
			
	</mx:Style>
</mx:Application>