Open Source Projects

jQuery UI CaretSpinner / TimeSpinner / TimePicker

Preamble

jQuery UI recently introduced the spinner control. The issue I had with it was that the up/down buttons could only step a specific interval. I wanted to be able to step up depending on the current position of the cursor.

For example, the decimal example on their site can only increment by .01. In my improved version, the decimal will increment either by .01 or 1, depending on where the user's cursor is. Same for the time spinner.

Demo

Regular spinner:

Decimal spinner:

Time spinner:

United States

International

Military

Seconds

Hours

Download

What you'll need (in this order):

jQuery - http://jquery.com
jQuery Caret - http://code.google.com/p/jcaret/downloads/list
(optional) jQuery MouseWheel - https://github.com/brandonaaron/jquery-mousewheel/downloads
jQuery UI Spinner - http://jqueryui.com/download/
jQuery Caret Spinner - http://microalps.com/scripts/jquery.caret.spinner.js

ToDo

This widget is far from done. The below are on my todo. If you have any comments, reply in the jQuery Forums or shoot me an email and I'll add it to the list.

Expand library to include date formats
Allow for more relaxed parsing in the event I just can't figure it out
Handle never focused differently with a default step
Add getDate and setDate methods similar to the datepicker
Get this submitted to jQuery :)