apache-flex - Flex NumericStepper 在 10 以下的数字上以 0 开头？

Question

• 有没有办法让 NumericStepper 显示前导 0 到低于 10 的数字？

（如 01、02、03 ... 09、10、11）

Answer 1

如果您使用的是 Spark NumericStepper，则只需为valueFormatFunction属性添加一个函数。

Answer 2

如果有人正在寻找 Halo 专用版本：

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


    }
}

Answer 3

如果您在 Flex 3 中，则无法直接访问 inputField，但您可以使用 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"/>

和

<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>

Answer 4

Yury Euceda 版本运行良好。我想按照以下方式将控件与事件处理程序分离。

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

和

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