以下时间选择器可能非常有用,因为它只需要jquery而不需要包含任何库。
http://jsfiddle.net/W4wwv/3/
HTML:
<span class="timepicker">
<input type="text" name="hh" class="hh" maxlength="2" size="2" placeholder="HH">:
<input type="text" name="mm" class="mm" maxlength="2" size="2" placeholder="MM">:
<input type="text" name="ss" class="ss" maxlength="2" size="2" placeholder="SS">
</span>
<br/>
<br/>
<br/>
<br/>
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
CSS:
.timepicker{
border:1px solid #c0c0c0;
display:block;
height:23px;
width:98px;
}
.timepicker input{
width:25px;
border:0px;
margin-bottom:1px !important;
maxlength:2
}
JS:
var validateNumber = function(n, min, max){
if(n > max)return max;
else if(n < min)return min;
return n;
};
var validateAfterChange = function(n , min){
var numReg = /^[0-9]{1,2}$/;
if(!numReg.test(n))
return "00";
if(n.length <= 1) return "0"+n;
return n;
}
$(".hh")
.on("keyup", function(){
var v = validateNumber($(this).val(), 0, 23);
$(this).val(v);
$("#h").html($(this).val());
})
.on("change", function(){
var v = validateAfterChange($(this).val(), 0);
$(this).val(v);
});
$(".mm")
.on("keyup", function(){
var v = validateNumber($(this).val(), 0, 60);
$(this).val(v);
$("#m").html($(this).val());
}).on("change", function(){
var v = validateAfterChange($(this).val(), 0);
$(this).val(v);
});
$(".ss")
.on("keyup", function(){
var v = validateNumber($(this).val(), 0, 60);
$(this).val(v);
$("#m").html($(this).val());
}).on("change", function(){
var v = validateAfterChange($(this).val(), 0);
$(this).val(v);
});