TimePicker

TimePicker works by transforming a form field where time data is expected, breaking it down into the time format's component parts.

So if you expect a format like "HH:mm:ss" inside the field, the hour, minute, and seconds fields will be displayed separately, navigated using the left/right arrow keys.

When the focus is put into one of these sections, to adjust their values the user only needs to push the up/down keys.

Everything is handled via pure JavaScript, without using a bulky JS framework like MooTools or jQuery.

The TimePicker component can be used multiple times on the same page, can handle various time display formats, imperial (AM/PM) selectors, and CSS skins.

It can also let the developer adjust the up/down step margin for the hour, minutes, and seconds sections, and also show placeholder time values on page load.

TimePicker comes with a few basic samples to show developers how it can be implemented.

Requirements:

• JavaScript enabled on client side