Question

Using meioMask Plugin is there any way to set up a mask so it will accept valid time in 24h or even better in 12h system?

$("#txtTime").setMask('time');

This plugin has a pre-defined 24h ‘time’ mask but it’s not quite correct, so you can enter invalid time values like “29:00”. Is this mask is not suitable for this purpose and if not which one would be better?

Answer 1

Try this:

$.mask.rules.H = /([0-1][0-9]|2[0-3])/;  // 24 hours
$.mask.masks.time = 'H:59';
$("#txtTime").setMask('time');

Correction:

The rules need to be for one character only, so having that in mind, you can swap the mask when the input starts with ‘2’ and validate the next char to be [0-3]:

$("#txtTime").setMask("29:59")
.keypress(function() {
  var currentMask = $(this).data('mask').mask;
  var newMask = $(this).val().match(/^2.*/) ? "23:59" : "29:59";
  if (newMask != currentMask) {
    $(this).setMask(newMask);
  }
});

Note: In this case i’m using the keypress event, make sure to handle the paste event if needed.