Take a look at the widget in the upper left. Time controls that look and feel pretty much the same in Internet Explorer 7, Firefox 2 and Safari 3. Nothing new here except these controls are the most efficient available.

In this minimalist implementation, I wanted the least amount of CSS, HTML and JavaScript possible yet it had to be fully functional. My goal was to minimize the use of CSS, because that's where trouble starts in terms of compatibility. I had to do that so I could show you time pad.

See the graphic with clouds and a black top and bottom? That represents a day with midnight top and bottom, noon in the middle. Go ahead and move your mouse over the image, you should see a time display at the top. You need JavaScript enabled to do this.

Position yourself at 8am, then click and drag to 11:30am. Don't like the drag technique? Click once at 8 and again at 11:30, I'm just trying to save you a step. So in one or two moves, you've entered two times.

Think about the appointments you make, time sheets you submit, meetings you schedule, reservations you request. This could save several steps, many times a day. Just as it sits now, it makes a great time span calculator. I think this could have a significant impact on corporate productivity.

If you find this widget useful and incorporate it into your for profit projects, I hope you find it in your heart to throw me a few bucks.

I will reciprocate 10-fold in the production of new widgets and controls. And I am certainly available for custom integration and other widget development. Contact for more information. I would appreciate your comments via a topic in my forum.

So what do you do with time pad? It's a pretty nifty time calculator just as it sits, although that's not its intended use. Take a look at the simple form below. You should see the current time pad times in the fields below. Go ahead and use time pad to select a new start and end time, see how the times change here as well?

Updating your existing applications is easier than you think. Your existing form input tags need to have a class = 'timePad' statement added to each text input field. Then an id = 'start' and an id = 'end' on the appropriate time fields, and your done. Your most junior level person can handle this.

The most practical application would have the time pad right next to the time fiels on the web page.

So what do you do with time pad? It's a pretty nifty time calculator just as it sits, although that's not its intended use. Take a look at the simple form below. You should see the current time pad times in the fields below. Go ahead and use time pad to select a new start and end time, see how the times change here as well?

Updating your existing applications is easier than you think. Your existing form input tags need to have a class = 'timePad' statement added to each text input field. Then an id = 'start' and an id = 'end' on the appropriate time fields, and your done. Your most junior level person can handle this.

The most practical application would have the time pad right next to the time fields on the web page.

One of the unique properties of this widget is the calibration function built into time pad. If you find yourself starting after midnight or ending before midnight, mouse to the other end and slowly exit the top or bottom of the time pad. You have just calibrated the time pad. Precise midnight to midnight coverage in any browser.

This widget is in 'text book' form at the moment. Easy to understand and study, no extra baggage or esoteric programming tricks. My next step will be to develop some kind of API to interface to applications. Easy to plug in where ever I need it. At that point the widget will be generated using JavaScript to build the DOM objects.

The start and end time displays are HTML, CSS and very simple JavaScript. At this level you have a very functional time control that is cross browser compatible. And I claim the smallest, most efficient, complete solution available. The wrappers and containers that provide cross browser support tend to bog down some solutions.

Differences between browsers were minimal but could not be avoided. The Mac version of Firefox does not initialize the radio buttons properly (and is using graphics from OS9). Internet Explorer does not display borders and cannot run the scripts to change from Plain to Graphic mode. A graphic by default version is available here. My intention is that radio buttons could be optional.

Here's a picture of the eureka moment. All three browsers show a reasonably similar object for the first time. False colors highlight the structure of the objects. Notice the similarity between this view of IE7 and the final. The IE display changed very little after this point. Everything below that is what got me on my current path.

My previous attempt died about the stage you see here. I was chasing down a one bit discrepancy between Firefox and Safari. In the bottom examples, notice the arrow positioned on the outside of the top border in Firefox and the inside inside of the top border in Safari. Meanwhile, Internet Explorer is completely out to lunch. Putting the wrong mix of CSS together gets you into situation like the 12am display in the middle examples. Notice the position of 'am' in the Firefox example. I was going down the wrong road chasing that stuff down.

If you take a critical look at my code, you will realize I'm a noob. At least when it comes to object oriented programming and some of the web technologies. I use the tttt method (try this, try that) in most of my CSS development. But I have a solid foundation in computer science, creative problem solving skills, and I pay great attention to detail. That comes from over 30 years of experience in building information systems.

So if you see some rookie mistakes, please don't let it detract too much from the benefits that time pad provides. In fact, if you would be so kind to offer up suggestions, stop by my forum and let me know. Or feel free to contact

As a developer, I didn't want to use input fields and write another validation routine. And as a user, I didn't want to do data entry or make repetitive mouse clicks. So perhaps it was my lazyness that brought about time pad. At one point I did away with the up and down arrows and had just a single down arrow. More clicks perhaps, but less choices, cleaner, and half the code. Simplify...