Ngx-mask: RegEx for 24 hour time only allowing 0 as input

[ghost]

I am not sure if i am implementing the RegExp right but this is what i have at the moment:

patterns="{ {pattern: new RegExp([0-9]{1,2}:[0-5][0-9])|([0-9]{1,2}\.[0-9]{1,2}), true}}" mask="00:00"

This is only allowing me to type 00:00 rather than 23:59 for example.

Any help would be much appreciated

[wolfywoof]

I'm not quite sure pattern will do what you need it to. I believe the pattern is to define your own codes for the mask and the regexp is limited per character, not the enter input (like your RegExp seems to be doing).

By default, the patterns are:
0 for a required number,
9 for an optional number,
A for letters/numbers, and
S for letters only.

By setting this attribute, it seems like it erases the defaults as well, so thats why you can only enter 00:00 because all the defaults were erased thus 0 is now a special character and only 0 can be entered.

The way I did it was to define the following variable in my component

  patterns = {
    '0': { pattern: new RegExp(/[0-2]/) },
    '1': { pattern: new RegExp(/[0-9]/) },
    '2': { pattern: new RegExp(/[0-5]/) }
  };

Then my input was:

<input type="text" [patterns]="patterns" mask="01:21">

But that allows for some funky stuff such as 29:59. This also forces them to input a leading number so they can't just do 3:59, they have to do 03:59.

If it were me, I would just set the mask="09:00" and then add a custom validator (through angular) with the regexp you have above.

Hope that helps.

[anacoimbrag]

I am having the same problem, was anyone able to resolve it?

[macin40]

I am having the same problem, was anyone able to resolve it?

Did anyone find the solution?

[Thegrep01]

@wolfywoof @anacoimbrag @macin40 We added 24h format validation in last version, please update ngx-mask and use Hh:m0 mask

[dzonatan]

@Thegrep01
If using only Hh:m0 without seconds part (s0) it doesn't work correctly because "m0" is being treated as month mask rather minutes. Is there a workaround for this?

Sorry. Seems like "m0" is broken in the latest 7.3.6 release no matter if it's being used with or without seconds. I've created an issue for that #318.

[sscen]

My solution for now is to use Hh:s0:s0, since it is only text value, s0 and m0 has no difference. Until ngx-mask fix this issue, I think this is the simplest (if not best) work around solution.