About

This XUL widget is a time picker (or time spinner or time chooser). It has some similitudes with my <xul:spinner>.

Following a request, I decided to write one using Mozilla XBL binding. My implementation use Firefox spinbuttons widget provided by XUL.

Description, usage

Increment and decrement occurs when clicking small arrow on the right of the timespinner, when using arrows key, when using page up/down keys (fast increment/decrement), when using mouse wheel (over the timespinner). A tooltip with current value is shown when hovering.

Parameters

Parameters	Description	Default value
step	step value used when in-/de-crementing	1
faststep	step value used when fast in-/de-crementing	10 * step
value	initial value HH:MM:SS or HH:MM:SS AM/PM	current time
ampm	AM/PM time format	false

Fields/Properties

timespinner inherits from textbox so all textbox's fields/properties are available. Additionally, step and faststep.

Methods

All textbox's methods are available. Additionally, adjust(w, s), up(w), down(w), fastup(w), fastdown(w), format(), getHours(), getMinutes(), getSeconds(), getAMPM() and log() are provided to adjust (i.e. step the value by s), increment, decrement, fast increment, fast decrement, format (i.e. time formatting), get hours, get minutes, get seconds, get AM/PM and log. w is the time part to adjust and could be 'hh', 'mm', 'ss' or 'ap' for hours, minutes, seconds or AM/PM. log() require a xul:textbox with id='log' in the document containing the spinner (cf. time-spinner.xml)

Usage

Copy 'time-spinner.xml' and 'time-spinner.css' where your XUL file is, add one or more timespinners in your XUL code, then add a CSS rule like:

timespinner { -moz-binding: url(time-spinner.xml#timespinner); }

in your existing stylesheet (or create a new one).

Download & Demo

You can download a package of all files needed to use it, or launch a small XUL demo (your browser must understand XUL, be aware browser may have an old version cached).

NB: v0.1 has been tested on Windows XP SP2 / Royale Theme (Firefox 3.0a1, default theme), Suse 10.1 / Gnome Desktop (Firefox 1.5.0.4, Tango icons theme)

Screenshot

Screen capture of the demo window (showing the tooltip) under Windows XP SP2 / Royale Theme (Firefox 3.0a1, default theme):

History

v0.5

• Fix for Gecko 2.0 (Firefox 4)

v0.4

• Added: getter/setter for value and getHours(), getMinutes(), getSeconds() and getAMPM()

v0.3

• Fixed: was broken by bug 155053 landing

v0.2

• Added: functions to adjust the time from JS.

v0.1

• First release

Credits

Huge thanks to:

• Firefox Classic theme (win32) graphics designer (small arrows, clock icon)
• Hoang Sy Hiep (original idea)

Contact

You can contact me by email here: