After review of the source the root of the problem is found in
fillMinutes: function() {
var table = this.widget.find(
'.timepicker .timepicker-minutes table');
table.parent().hide();
var html = '';
var current = 0;
for (var i = 0; i < 5; i++) {
html += '<tr>';
for (var j = 0; j < 4; j += 1) {
var c = current.toString();
html += '<td class="minute">' + padLeft(c, 2, '0') + '</td>';
current += 3; //HERE
}
html += '</tr>';
}
table.html(html);
}
The call to the function occurs only once in the init
of the widget. Thus, you can use jQuery to look up the element and insert the html you desire.
(function () {
var table = $('.timepicker .timepicker-minutes table');
table.parent().hide();
var html = "";
var current = 0;
while (current < 60) {
var c = current.toString();
html += '<td class="minute">' + padLeft(c) + '</td>';
current += 15;
}
table.html(html);
})();
Modifying padLeft
from the original source to fit the circumstances:
var padLeft = function padLeft(s) {
if (2 < s.length){ return s;}
return Array(2 - s.length + 1).join('0') + s;
};
See this fiddle