CODEWITHSUNDEEP
apache-flexnumericstepper
Yordan Yanakiev
Yordan Yanakiev

Reputation: 2604

Flex NumericStepper with leading 0 on numbers below 10?

( like 01, 02, 03 ... 09, 10, 11 )

Upvotes: 4

Views: 2261

Answers (4)

zawhtut
zawhtut

Reputation: 8561

Yury Euceda version is working great. I would like to followup as the following to decouple the control from the event handler.

private function init( event:FlexEvent ):void{
        scheduleHour.addEventListener(Event.CHANGE,onStepperChange);
        scheduleMinute.addEventListener(Event.CHANGE,onStepperChange);
        scheduleHour.dispatchEvent(new Event(Event.CHANGE));
        scheduleMinute.dispatchEvent(new Event(Event.CHANGE));
}

and

        public function onStepperChange (ev:Event) : void {
            var stepper:NumericStepper  = ev.currentTarget as NumericStepper;
            var num:String = stepper.value > 10 ? "" + stepper.value : "0" + stepper.value;
            stepper.mx_internal::inputField.text = num;
        }

Upvotes: 4

Yury Euceda
Yury Euceda

Reputation: 566

if you are in Flex 3 you can't access directly to the inputField, but easy you can solve it by using mx_internal

<mx:NumericStepper id="stpprHours" minimum="1" maximum="24" stepSize="1" creationComplete="formatStepper(stpprHours)" change="stpprHours_changeHandler(event)" value="1"/>

<mx:NumericStepper id="stpprMinutes" minimum="0" maximum="59" stepSize="1" creationComplete="formatStepper(stpprMinutes)" change="stpprMinutes_changeHandler(event)" value="0"/>

and 

<mx:Script>
 <CDATA[[
        protected function stpprHours_changeHandler(event:NumericStepperEvent):void {
            formatStepper(stpprHours);              
        }

        protected function stpprMinutes_changeHandler(event:NumericStepperEvent):void {
            formatStepper(stpprMinute);                             
        }

        protected function formatStepper(stepper : NumericStepper) : void {
            if(stepper.value<10) stepper.mx_internal::inputField.text = "0" + stepper.value;

    }
 ]]>
</mx:Script>

Upvotes: 4

flexicious.com
flexicious.com

Reputation: 1671

In case someone is looking for a Halo only version:

package
{
    import flash.events.Event;

    import mx.controls.NumericStepper;
    import mx.core.mx_internal;
    import mx.events.FlexEvent;

    use namespace mx_internal;
    /**
     * Added support to format time values.
     */ 
    public class TimePickerNumericStepper extends NumericStepper
    {
        public function TimePickerNumericStepper()
        {
        }

        /**
         *  @private
         */
        override protected function createChildren():void
        {
            super.createChildren();
            onValueCommit(null)
            inputField.addEventListener(FlexEvent.VALUE_COMMIT,onValueCommit);
        }

        protected function onValueCommit(event:Event):void
        {
            if(value<10 && inputField.text.length==1){
                inputField.text = "0" + inputField.text;
            }   
        }


    }
}

Upvotes: 4

J_A_X
J_A_X

Reputation: 12847

If you're using the Spark NumericStepper, you should just add a function for the valueFormatFunction property.

Upvotes: 7

Related Questions