jQuery Timepicker插件
我需要为表单创建一个时间选择组件，但是我不想有很多额外的组件。经过一番搜索，我发现了以下名为timepicker的JQueryUI插件。
该插件将以输入框作为参数，并将添加三个选择框，分别表示小时，分钟和秒。然后它将隐藏原始输入框。
但是，有两件事我需要这个插件不做。第一个是12小时格式，第二个是该插件没有第二个选择。因此，我决定修改该插件以合并这些内容。
这是修改后的插件。
(function($){
jQuery.fn.timepicker = function(){
this.each(function(){
//获取当前元素的ID和值
var i = this.id;
var v = $(this).val();
//我们需要产生的选择
var hrs = new Array('00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23');
var mins = new Array('00','05','10','15','20','25','30','35','40','45','50','55');
var secs = new Array('00','05','10','15','20','25','30','35','40','45','50','55');
//默认为当前时间
var d = new Date;
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
//覆盖当前值（如果适用）
//将分钟和秒四舍五入到最接近的10
if(v.length == 8){
h = parseInt(v.substr(0,2));
x = parseInt(v.substr(3,2));
m = (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;
x = parseInt(v.substr(6,2));
s = (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;
}
//建立新的DOM对象
var output = '';
output += '';
output += '';
output += '';
//隐藏原始输入并追加新的替换输入
$(this).css('display','none');
$(this).after(output);
});
$('select.timepicker').change(function(){
var i = this.id.substr(2);
var h = $('#h_' + i).val();
var m = $('#m_' + i).val();
var s = $('#s_' + i).val();
var v = h + ':' + m + ':' + s;
$('#' + i).val(v);
});
return this;
};
})(jQuery);只要插件与格式HH：MM：SS匹配，该插件还将使用文本字段中显示的时间进行更新。
您可以使用以下代码运行插件：