Following on from the generic NumberStepper I think I'm ready to build my first specific temporal component. I've decided a simple TimeStepper that combines Hours, Minutes and Seconds would be a good one to start with.

The functionality
As far as functionality is concerned it comes down to one decision: Are the three fields related? It's assumed that if you step up or down through a field it will rollover so as to always contain a valid value. The question, by way of example, is this. if you step the minute value past 60 does it increment the hour value by one?

My take on it is this. The component combines three fields so their values are related. Rolling over one field increments or decrements it's partner. if you don't want the fields to rollover then use separate NumberSteppers.

🟥
This post previously contained Flash content.

TimeStepper demo

The structure
The TimeStepper is obviously composed of three NumberSteppers. What's interesting though is that all the step actions update a single Date value. The component then makes use of the invalidation() functionality in BaseComponent to schedule a draw().