JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<input type="text" id="hora" />
JavaScript
var SPMaskBehavior = function (val) {
return val.replace(/\D/g, '')[0] === '2' ? 'AE:CD' : 'AB:CD';
},
spOptions = {
onKeyPress: function(val, e, field, options) {
field.mask(SPMaskBehavior.apply({}, arguments), options);
},
translation: {
"A": { pattern: /[0-2]/, optional: false},
"B": { pattern: /[0-9]/, optional: false},
"C": { pattern: /[0-5]/, optional: false},
"D": { pattern: /[0-9]/, optional: false},
"E": { pattern: /[0-3]/, optional: false}
}
};
$('#hora').mask(SPMaskBehavior, spOptions);