The one datatype that is common to all the disciplines in this project is Number so it makes sense to build a number modifier component. Although I'm specifically interested in entering and modifying dates I'm going to follow the component developers mantra and build a general component first. Once I have a simple NumberStepper I will be able to combine them to create all sorts of specific date and time modifiers.

The functionality
I'd like to be able to set the component value and label dynamically. I'd also like the component to resize itself based upon the width of the label. As for the value, I'd like to be able to type it in directly (accepting numbers only) and be able to step the number up or down using a couple of buttons. Luckily some sort of NextPreviousButton might help me with this.

This post previously contained Flash content.

NumberStepper demo

The structure
The NumberStepper is composed of a simple TextField and a NextPreviousButton. The TextField is constrained so as to only accept numbers. I've added a handy safety feature to help out any components that subclass the NumberStepper. Component specific validation rules (such as rounding, capping and cycling) can be easily added by overriding the content of the validateValue() function.

validateValue() working with floating point arithmetic in AS3
Most programming languages (Actionscript included) have "issues" with floating point arithmetic. To show you what I mean I deliberately haven't done any rounding for this demo. Trying stepping down from 1.21 Gigawatts and you'll see the value explodes when it goes negative.

Now this isn't a bug per se, more a feature of how modern programming languages deal with floating point arithmetic. They represent numbers in base 10 whilst performing the calculations in base 2. Flash Player Engineer Tinic Uro explains the phenomenon in the comments to this post. If you only deal with whole numbers you won't have this problem but if you need to support floating point arithmetic then you can add some Math.round lovin' to the validateValue() function and you'll be fine.