Input mask for Time that fills from right to left and optional 3 digits for hours (angularjs)

Viewed 48

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?

1 Answers

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

Related