2

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.

Improve this question
1
  • Include jQuery and jQuery UI as dependency and create a custom directive (do DOM manip the angular way also I would suggest looking into angular ui which has a lot of the jquery UI stuff done the angular way. Commented Jun 14, 2015 at 9:39

1 Answer 1

Reset to default
2

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

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

1 Comment

but the timepicker i am using need unique id. How i use that code. I have no time check whole library now will that element take care of every thing ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.