How to format hour using AngularJS?

Question

I'm having a problem formatting a input text in the standard hour format ("HH:mm") as the client types. Also I must validate if the arrival time is not greater than departure time. Here is some sample:

<table>
    <tr><td>Arrival: <input type="text" ng-model="item.arrival" name="arrival">{{item.arrival | date: 'HH:mm'}}</td> //It doesn't work. The code doesn't force the formatting upon typing(the ":") and also it allows more than 4 characters
    <tr><td>Departure: <input type="text" ng-model="item.departure" name="departure">{{item.departure | date: 'HH:mm'}}</td></tr> //I must check if the value defined in arrival isn't greater than departure time.
</table>

Can someone please show some piece of code that deals with this? I'm more of a backend dev, I googled some but couldn't find much. Any help will be much appreciated.

filters applied on the arbitrary content printed next to the input elements won't affect the ng-model or the input control, they will only affect that specific rendering of the data. — Claies
– Claies, Commented Nov 23, 2016 at 19:22
yeah, I noticed that. Just showed some sample code to show what the problem is about. — XVirtusX
– XVirtusX, Commented Nov 23, 2016 at 19:25

machinehead115 · Accepted Answer · 2016-11-23 19:30:01Z

1

Your best bet is probably to use something like ui-mask to mask the input and allow the user to only enter numbers and then perform the validation for the arrival and departure times after they submit.

Otherwise you can try to make your own directive and apply it to the input fields.

answered Nov 23, 2016 at 19:30

machinehead115

1,65710 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

XVirtusX Over a year ago

In fact, I need to do that on the fly, cause actually I have more than 30 rows on screen. If the client fails, I must show imediately. I was wondering how could I start this directive. I need some guidance on this, Im bare new to Angular. This format plugin that u showed seems good, I will take a look, tnx.

machinehead115 Over a year ago

You will need to create custom validators using $parsers. Here is an article on it that should get you started: angularjs.io/…

XVirtusX Over a year ago

tnx pal, much appreciated. I will take a look on it

Collectives™ on Stack Overflow

How to format hour using AngularJS?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related