[Input Mask Reactive] Time mask using InputPatternMask

Forge Component
Published on 8 May by Steven Decock
0 votes
Published on 8 May by Steven Decock


Is it possible to create a mask for time, like "hh:MM AM/PM", using InputPatternMask?

Hi Renato,

Out of the box this wouldn't work well the way the InputPatternMask is implemented right now.
You can now only use these 'basic' definitions in your pattern (see also https://imask.js.org/guide.html#masked-pattern ):

  • 0 - any digit
  • a - any letter
  • * - any char
  • other chars which is not in custom definitions supposed to be fixed
  • [] - make input optional
  • {} - include fixed part in unmasked value
  • ` - prevent symbols shift back

It seems better to clone the InputPatternMask and make a custom version of it for Time values like this.
You can then use a more complex pattern with custom 'blocks', as in this CodePen.

Although selecting AM and PM might be better done in a separate dropdown.