Jquery Time Picker inside ng-repeat is not working

Question

As i am proceeding into my project. In Some place i need to repeat few input fields which contains two time html5 field. Everything was going well when i was testing in Chrome but when i tested in in firefox it is showing as text field. (Firefox does not support time and date html5 fields). So i started finding some plugin but nothing worked as my requirements.

So I have already wasted lot of time so I am explaining my requirements very clearly.

HTML CODE.

<div class="row" ng-repeat="timingindex in timingsArray">
    <div class="col-md-3">
      <select class="form-control" ng-model="timings[$index].group">
        <option value="Pre-Priary">Pre-Priary</option>
        <option  value="Primary">Primary</option>
        <option  value="Middle">Middle</option>
        <option  value="Senior">Senior</option>
      </select> 
    </div>
    <div class="col-md-2">
      <select class="form-control" ng-model="timings[$index].season">
        <option value="summer">Summer</option>
        <option value="winter">winter</option>
      </select> 
    </div>
    <div class="col-md-3">
      Starts: <input type="time" ng-model="timings[$index].starttime"> 
    </div>
    <div class="col-md-3">   

      Finish : <input type="time" ng-model="timings[$index].endtime">

    </div>
    <div class="col-md-1">
      <button ng-click="addNewTimings(timings[$index])">Save and Add More</button>
    </div>
    <div class="col-md-1">
      <button ng-show="$last" ng-click="removeTimigns($index)">Remove</button>
    </div>
  </div>

Now I want to use this jquery UI Plugin this is ok for me because i am using default date picker of jquery UI in place of my html5 default time field.

How i am trying to workaround using this plugin with my angular project is. ?

• I have to add this jquery for each picker i need.

  $('#slider_example_1').timepicker({ timeFormat: 'hh:mm TT' });

• I am thinking to give unique name like id="slider_starttine_{{$index}}" and similarly for endtime (Check my html code for clarity what i am saying for angular)

• Whenever new item is added i will add two line jquery using $index.

  But problem is that this strategy is not working.

Any help will be welcomed. Thanks in advance. Please comment below if you need more clarification. I am not sure what exactly i should write here.

Answer 1

That is because you are running jQuery code to timepicker on element before the element contents gets rendered on html

Better you should wrap your jQuery plugin code in directive and write bind timepicker to that element inside directive link function. Binding jQuery plugin from the directive is considered as best practice.

Markup

<input type="time" timepicker ng-model="timings[$index].starttime"> 

Directive

app.directive('timepicker', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            //binding timepicker from here would be ensure that
            //element would be available only here.
            element.timepicker(); //your code would be here.
        }
    }
});

Like the way did in this SO answer