Time mask

by aprudencio

HTML

<div id="timeContainer">
    <input class="timeInput" type="text" value="" id="h" ttype="hour" />
    <span>:</span>
    <input class="timeInput" type="text" value="" id="m" ttype="min" />
    <span>:</span>
    <input class="timeInput" type="text" value="" id="s" ttype="sec" />
</div>
<input type="text" value="" id="time" />
<hr />
<div id="console"></div>

CSS

.timeInput {
    width: 16px;
    border: none;
    margin: 0px;
    padding:0px;
    outline: none;
}
span {margin: 0px;
    padding:0px;}
.timeContainer {
    border: 1px solid #666666;
    width: 58px;
}

JavaScript

var timemax = 0;
var timemin = 0;
$("#timeContainer").html("");
createTimeInput("#timeContainer",11,4);

function createTimeInput(selector,max, tabIndex)
{
    timemax = max;
    timemin = 0;
    var defaultValue = "";
    $(selector).addClass("timeContainer");
    $(selector).append($("<input />").attr({
        "type":"text",
        "id":"h",  
        "ttype":"hour",
        "tabindex":tabIndex
    }).addClass("timeInput").val(defaultValue ));
    
    $(selector).append($("<span />").html(":"));
    
    $(selector).append($("<input />").attr({
        "type":"text",
        "id":"m",  
        "ttype":"min",
        "tabindex":tabIndex+1
    }).addClass("timeInput").val(defaultValue ));
    
    $(selector).append($("<span />").html(":"));
    
    $(selector).append($("<input />").attr({
        "type":"text",
        "id":"m",  
        "ttype":"sec",
        "tabindex":tabIndex+2
    }).addClass("timeInput").val(defaultValue ));
    
    $(".timeInput").attr("maxlength","2");
    $(".timeInput").find(":first").focus();
    
}

$(".timeInput").blur(function () {
    
    var val = $(this).val();

    if(val * 1 < 10)
    {
       $(this).val("0"+val );
        
        //return true;
    }
    $("#time").val("");
    $(".timeInput").each(function () {
        
        $("#time").val($("#time").val()+$(this).val()+":");
        
        
    });
    
});

$(".timeInput").keypress(function (e) {
    
    if(e.which >= 65 && e.which <= 90)
        return false;
    
    var val = $(this).val();
    
    if(val.length == 2)
        $(this).val("");
        //$(this).next().focus();
});
$(".timeInput").keyup(function (e) {
    
    if(e.which >= 65 && e.which <= 90)
        return false;
    
    var value = $(this).val();
    if(e.keyCode==38)
        return incdecrease($(this),1);
    if(e.keyCode==39)
        $(this).next().next.focus();      
    if(e.keyCode==40)
        return incdecrease($(this),-1);
   
   if(!validateMaximunMinimun($(this)))
      ...