Search code examples
javascriptangularjsangularjs-directiveangular-strap

Angular min and max time not working

I am trying to create some form where there is a start time and end time, I am using angular strap for that. as expected the start time should be less then the end time and the end time should be greater then the start time ==> 

start time < end time

Here is the plunker I have created, and for some reason it is not working as expected.

Solution

  • I have no experience with this control but I think you need to use {{}} and there's a little logical problem, too. So instead of

    <input type="text" class="form-control" size="8" 
       ng-model="time1" max-time="time2" 
       ...>

<input type="text" class="form-control" size="8" 
       ng-model="time2" max-time="time1" 
       ...>

    Use the following

    <input type="text" class="form-control" size="8" 
       ng-model="time1" 
       ...>

<input type="text" class="form-control" size="8" 
       ng-model="time2" min-time="{{ time1 }}" 
       ...>

    The logical problem was that you had max-time set on both controls, referring to each other's value. So time1 couldn't be greater than time2 nor time2 greater than time1. It should be sufficient to let time1 be any time and just evaluate that time2 is no less than time1.

    Also, it's annoying that changing time1 value is not causing re-evaluation of time2's min-time instantly but only after you change the time2 itself. I don't know if it's supposed to work this way, it can be related to Error:[$rootScope:inprog] your Plunker is throwing frequently.