TimeSpinner
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.
Dependencies
- spinner
Usage Example
Create timespinner from markup.
Create timespinner using javascript.
Properties
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){
tt.push(formatN(date.getSeconds()));
}
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]] |
Events
The events extend from spinner.
Methods
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
alert(v);
|
| getHours | none | Get the current hour value. |
| getMinutes | none | Get the current minute value. |
| getSeconds | none | Get the current second value. |