2

I'm having some trouble finding what I need. In my angularjs project, we're using angular-input-mask for the inputs. What I need is a mask for time like this: 000:00 But the first digit must be optional, and that's why I need the mask to fill from right to left. I've tried adding ui-mask="?9?9?9:?9?9" but even with dir="rtl" it keeps filling the 3 digits before the two dots first. Also, I didn't like this "rtl" because it messes with the "backspace" and "del" buttons when you want to erase what you're writting, and also the numbers don't come out in the right order.

html: <input class="form-control dynamic-input" ui-mask="?9?9?9:?9?9" ng-model="$ctrl.ngModel" dir="rtl" ui-mask-placeholder-char="space" style="unicode-bidi:bidi-override; direction: RTL;" /></input>

What I need on screen:

127:25

or

23:17

Screenshot example:

enter image description here

What I get on screen:

231:7

Can someone help me please?

Beatriz Rachel
  • 21
  • 6

1 Answers1

0

Does this satisfy your requirement?

<input class="form-control dynamic-input" ui-mask="?9?9?9:?9?9" ng-model="$ctrl.ngModel"ui-mask-placeholder-char="space" style="unicode-bidi:bidi-override;text-align:right;" /></input>

forked stackblitz

Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • Isn't this exactly the same code I posted? What am I missing? It doesnt work for the reasons I listed above: The mask fills from left to right even with the "rtl", so instead of "12:35" I get "123:5" on screen. – Beatriz Rachel Aug 30 '22 at 13:03
  • your "forked stackblitz" link is also wrong because it shows "12:345" instead of "123:45". – Beatriz Rachel Aug 30 '22 at 14:22
  • @BeatrizRachel ui-mask doesnt support reverse, change the order so that minutes is entered first then hours so that you can achieve expected behaviour – Naren Murali Aug 30 '22 at 14:46
  • but what about what the user sees on screen? They will be confused :/ Or... do you know about any angularjs mask that supports reverse? – Beatriz Rachel Aug 31 '22 at 11:16