TimeSpinner : Mootools' time selector widget

Welcome to this temporary/permanent page. Temporary because is really ugly, permanent because I'm already suppose to rebuild all this site for more than a year...


TimeSpinner is a simple/minimalist widget for the javascript framework Mootools.
For a current project, I need a widget that allow users to enter the date of an events, like a concert, exposition, etc... There're a lot of good calendars - for example "calendar" whom I take some inspiration - but none allow user to enter time too ; just day.

What timespinner is NOT

this is NOT a precision time selector. Its purpose is to allow user to quickly inc/dec a time - mainly for events, schedules, range selections etc.. -



You only need mootools with Class, Native, Element
A version is included in the archive but you can download it HERE

How to use it

First, add the javasscript and css files to your project.
Then you create a new TimeSpinner by passing to it a text input entry.
See the examples below.


Devel platform is linux/firefox.
This widget will probably not work correctly under windoze explorer.
... and by the way it works perfectly with firefox, opera, safari, konqueror and probably any others obscures college's projects.


  1. Can I preset the increase rate or auto repeat delay ?
  2. Of course !
  3. Can I use a different css in the same page ?
  4. Not yet. in a page, every timeSpinner instance will use the same css.
    If you really need it, you probably should clone the script with a different class name.
  5. Can I use it to save a date with day, month and year ?
  6. You should trust only the hour and minute fields from the Date object.
  7. Can I stack it with other widget ?
  8. No, When you link it to an input, it will change it css class, and every time the time change, the entry value will be overrided.


The archive include the javacript file, default css definition, documentation and this page as sample.
Download the tgz archive now

The documentation alone : pdf documentation
Last version 2008/04/03.
Some bug fix.
Replaced the 'trigger' callback with a "standard" mootools callback.(alarm, doAlarm)

Example 1

Basic one, use default values : increase of 15min, autorepeat at 200msec, no limit, no event callback, use the current time as reference.

Example 2

More complex. Increase every 10min,
limit the range between 14:00 and 18:00,
set an autorepeat at 400msec,
force the time at 15:00

Example 3

Same as example 2 but will fire events at 15:30 and 17:00.
This example use a date object as start time (instead of plain number).

message would display here :