Time Validation

4

Personal I'm doing a time validation in Javascript . I can not type the following hours 14:00, 15:00, 16:00 until 20:00, but other hours with you.

I'm doing this:

var mask = "HH:MM",
    pattern = {
        'translation': {
            'H': {
                pattern: /[0-23]/
            },
            'M': {
                pattern: /[0-59]/
            }
        }
    };
$("#QuantidadeHoras").mask(mask, pattern);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>

<input type="text" id="QuantidadeHoras" />
    
asked by anonymous 29.08.2016 / 23:36

2 answers

4

/[0-23]/ means 0 , 1 , 2 , or 3 .

The same applies to the second case, [0-59] means 0 to 5 , or 9 .

Instead, use this one:

var mask = function (val) {
    val = val.split(":");
    return (parseInt(val[0]) > 19)? "HZ:M0" : "H0:M0";
}

pattern = {
    onKeyPress: function(val, e, field, options) {
        field.mask(mask.apply({}, arguments), options);
    },
    translation: {
        'H': { pattern: /[0-2]/, optional: false },
        'Z': { pattern: /[0-3]/, optional: false },
        'M': { pattern: /[0-5]/, optional: false}
    }
};

$('#QuantidadeHoras').mask(mask, pattern);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>

<input type="text" id="QuantidadeHoras" />
    
30.08.2016 / 13:54
0

I had to adjust the pattern to work the mask, for some reason the plugin only recognized the first number as an integral part of the mask, continue as I solved.

var mask = "JG:MM",
    pattern = {
        'translation': {
            'J': {
                pattern: /[0-2]/
            },
            'G': {
                pattern: /[0-9]/
            },
            'M': {
                pattern: /[0-59]/
            }
        }
    };

$("#QuantidadeHoras").mask(mask, pattern);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>

<input type="text" id="QuantidadeHoras" />
    
30.08.2016 / 13:33