search

GoncharukOrg / react-input

100 stars 7 forks source link

AM/PM mask #16

Closed emlai closed 7 months ago

emlai commented 8 months ago

I'm using useMask from @react-input/mask and trying to define a mask of the form hh:mm XM to allow input such as 10:00 AM or 10:00 PM.

I tried to define replacement as { h: /\d/, m: /\d/, X: /[AP]/, M: /M/ } but it doesn't allow typing the last M character. According to the docs any replacement character is ignored from the input.

How can I allow typing M while M is also in the mask?

GoncharukBro commented 8 months ago

Hello, unfortunately, such a limitation exists, since the library parses the entered value for keys.

You can take a workaround by changing the key name in the replacement field, like this:

<InputMask
  mask="hh:mm XY"
  replacement={{ h: /\d/, m: /\d/, X: /[AP]/, Y: /M/ }}
/>

or like this:

<InputMask
  mask="tt:tt xm"
  replacement={{ t: /\d/, x: /[AP]/, m: /M/ }}
/>