Extend from $.fn.spinner.defaults. Override defaults with $.fn.timespinner.defaults.

The timespinner is created based on spinner. It is same as numberspinner but display the time value. The timespinner allows the user to increase or decrease the time by clicking small spinner buttons on the right of component.


  • spinner

Usage Example

Create timespinner from markup.

Create timespinner using javascript.


The properties extend from spinner, below is the added properties for timespinner.

Name Type Description Default
separator string The separator between hour and minute and second. :
showSeconds boolean Defines if to show the second information. false
hour12 boolean Defines if to display in 12 hour format. Available since version 1.7.0. false
ampm array The AM/PM label to display on the inputing box. Available since version 1.7.0. ['AM','PM']
highlight number The field to highlight initially, 0 = hours, 1 = minutes, … 0
formatter function(date) A function to format the date, the function take a 'date' parameter and return a string value. Available since version 1.4. The example below shows how to override the default formatter function.
$.fn.timespinner.defaults.formatter = function(date){
	if (!date){return '';}
	var opts = $(this).timespinner('options');
	var tt = [formatN(date.getHours()), formatN(date.getMinutes())];
	if (opts.showSeconds){
	return tt.join(opts.separator);
	function formatN(value){
		return (value < 10 ? '0' : '') + value;
parser function(s) A function to parse a date string, the function take a 'date' string and return a date value. Available since version 1.4. The example below shows how to override the default parser function.
$.fn.timespinner.defaults.parser = function(s){
	var opts = $(this).timespinner('options');
	if (!s){return null;}
	var tt = s.split(opts.separator);
	return new Date(1900, 0, 0, 
		parseInt(tt[0],10)||0, parseInt(tt[1],10)||0, parseInt(tt[2],10)||0);
selections array The selection parts to highlight the value. Each item indicates the highlight section. For example, clicking the characters from 0 to 2 will highlight the hour value. Available since version 1.4. [[0,2],[3,5],[6,8]]


The events extend from spinner.


The methods extend from spinner, below is the overridden methods for timespinner.

Name Parameter Description
options none Return the options object.
setValue value Set the timespinner value.

Code example:

$('#ss').timespinner('setValue', '17:45');  // set timespinner value
var v = $('#ss').timespinner('getValue');  // get timespinner value
getHours none Get the current hour value.
getMinutes none Get the current minute value.
getSeconds none Get the current second value.