117
Views
1
Comments
[Input Mask Reactive] Time mask using InputPatternMask
Question
input-mask-reactive
Reactive icon
Forge asset by Steven Decock

Hi,

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

2020-03-12 15-06-24
Steven Decock

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.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.