I'm using jQuery Masked Input in a project. I made a mask like this:
<script>
$(document).ready(function () {
$("#QuantidadeHoras").mask("99:99");
});
</script>
The <input> only lets me fill in the field with numbers, but I can type an invalid time, for example, 88:88 . The right thing would be to fill the minutes between 00 and 59 .
How can I make the mask not allow this type of fill?
I had to put in pastebin because it will not let me pull the source, but the originals are:
<script type="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.js"></script><scripttype="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.extensions.js"></script><scripttype="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.date.extensions.js"></script>$(document).ready(function(){
$("#time").inputmask("h:s",{ "placeholder": "hh/mm" });
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript" src="https://pastebin.com/raw/QkBYGVub"></script><scripttype="text/javascript" src="https://pastebin.com/raw/neg3Zijg"></script><scripttype="text/javascript" src="https://pastebin.com/raw/10z8dxLQ"></script><div><inputtype="text" id="time" value=""/>
</div>I advise you to use link
If you take a look he has a choice of pattern that I understand you can set up a RegExp with range to accept your mask.
The code would look like this:
var mask = "HH:MM",
pattern = {
'translation': {
'H': {
pattern: /[0-23]/
},
'M': {
pattern: /[0-59]/
}
}
};
$("#QuantidadeHoras").mask(mask, pattern);
You can also solve this problem using pure javascript, with the following regex:
([01][0-9]|2[0-3]):[0-5][0-9]
Entries:
válidas
20:59
00:59
01:01
10:30
00:00
inválidas
24:59
30:01
00:60
05:122
You can use jquery-masked -input , changing the mask with the onKeyPress event, depending on whether the times have a value equal to or greater than 20.
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 }
},
placeholder: 'hh:mm'
};
$(document).ready(function () {
$("#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" />If you use Pablo Escobar's library, you have this example that I use
$("#hora").mask("AB:CD", {
translation: {
"A": { pattern: /[0-2]/, optional: false},
"B": { pattern: /[0-3]/, optional: false},
"C": { pattern: /[0-5]/, optional: false},
"D": { pattern: /[0-9]/, optional: false}
}
});
Tested and working
Note: beware of commas and quotes in js