TimeStepper is a user interface component for Flex that allows the user to input a time value. This control include fields for hours, minutes, seconds, and AM/PM. Styling options allow the time to be presented in 12- or 24-hour formats. Up and down buttons allow the user to increase or decrease the currently selected field.
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.
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.
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.
To see a live example, please install Adobe Flash Player version 9 or higher.
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.