Using TimeStepper in Flex 3

A common use for a TimeStepper is to combine it with a DateField or a DateChooser. The following example application demonstrates how to keep the values of TimeStepper and another date control in sync. Let's begin by looking at the basic layout.

<?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:Application>

A simple form appears within a Panel container. At the top is a DateField control, followed by a TimeStepper. At the bottom is a Button control labeled "Submit". Both the DateField and TimeStepper are bound to a variable, appointmentDateAndTime, which we'll define in a moment. Additionally, both call a function updateAppointmentTime() when the user changes their respective values.

The following ActionScript code appears in a <mx:Script> block, and it defines how we keep the controls in sync.

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); }

As you can see, updateAppointmentTime() takes both the DateField's and the TimeStepper's values and combines them before placing the new values into the appointmentDateAndTime variable. Since this variable is Bindable, the controls are automatically updated. The submit() function below simply displays the "confirmed" appointment time when the Submit button is pressed.

Download the MXML example file.

For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the TimeStepper component.