Time Picker Control For Flex 3.0
Submitted by softking on Tue, 02/24/2009 - 01:33
this article shows how to use 2 slider controls to create a single "Time Picker" control in Flex.
No time picker control is available currently in flex, i this example code we can see how to create a flex AS class that uses 2 numeric stepper classes to create such a functionality
Here is the code, you can download also the example code that is attached to this post
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" cornerRadius="2"
width="96" height="24"
creationComplete="onCreate()"
horizontalGap="0">
<mx:Metadata>
[Event(name="timeChange")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.events.NumericStepperEvent;
[Bindable]
private var _minHours:Number = 0;
[Bindable]
private var _maxHours:Number = 23;
[Bindable]
private var _minMinutes:Number = 0;
[Bindable]
private var _maxMinutes:Number = 59;
[Bindable]
private var _errorStringOutOfRange:String = "Time is out of permited range ";
[Bindable]
private var _date:Date = new Date();
public function set minHours(minHours:Number):void{
_minHours = minHours;
if(hours<_minHours && hoursStepper){
hoursStepper.value = _minHours;
dispatchEvent(new Event("timeChange"));
}
}
public function set maxHours(maxHours:Number):void{
_maxHours = maxHours;
}
public function set minMinutes(minMinutes:Number):void{
_minMinutes = minMinutes;
if(hours==_minHours && minutes<_minMinutes && minutesStepper){
minutesStepper.value = _minMinutes;
dispatchEvent(new Event("timeChange"));
}
}
public function set maxMinutes(maxMinutes:Number):void{
_maxMinutes = maxMinutes;
}
public function set hours(hours:Number):void{
_date.hours = hours;
}
public function set minutes(minutes:Number):void{
_date.minutes = minutes;
}
public function get minutes():Number{
return _date.minutes;
}
public function get hours():Number{
return _date.hours;
}
public function set date(date:Date):void{
_date = date;
parseDate();
}
public function get date():Date{
_date.hours = hoursStepper.value;
_date.minutes = minutesStepper.value;
return _date;
}
private function stepperChange(event:NumericStepperEvent):void{
var hours:int = _date.hours;
if( event.currentTarget.id=="minutesStepper"){
if(hours==_minHours && event.value<_minMinutes ){
minutesStepper.value = _minMinutes;
return;
}
}
dispatchEvent(new Event("timeChange"));
}
private function onCreate():void{
parseDate();
}
private function parseDate():void{
var hours:int = _date.hours;
var minutes:int = _date.minutes;
hoursStepper.value = hours;
minutesStepper.value = minutes;
}
]]>
</mx:Script>
<mx:NumericStepper change="stepperChange(event)"
cornerRadius="0"
height="100%"
width="50%"
id="hoursStepper"
minimum="{_minHours}"
maximum="{_maxHours}"/>
<mx:NumericStepper change="stepperChange(event)"
cornerRadius="0"
height="100%"
width="50%"
id="minutesStepper" minimum="0" maximum="59"/>
</mx:HBox>