CODEWITHSUNDEEP
jqueryangularjsdatepicker
Shailesh Bhardwaj
Shailesh Bhardwaj

Reputation: 45

why jquery datepicker not working in ng-repeat angular js function

Date picker working fine but when I add ng-repeat its stop working. How I can mix angular and jquery ? if anyone has idea kindly suggest. I have added all library online. Date picker working fine but when I add ng-repeat its stop working. How I can mix angular and jquery ? if anyone has idea kindly suggest. I have added all library online. Date picker working fine but when I add ng-repeat its stop working. How I can mix angular and jquery ? if anyone has idea kindly suggest. I have added all library online. 

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
       <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script>
          angular.module('App', [])
              .controller('AppCtrl', function ($scope) {

                  $scope.selects = [{}]; // default 1 sets
                    $scope.add = function() 
                          {
                              $scope.selects.push({});
                          }
                    $scope.remove = function(item) 
                          {
                            angular.forEach($scope.selects, function(value, key) 
                           {
                                if (value == item) 
                                {
                                    $scope.selects.splice(key, 1);
                                }
                            });
                        $scope.sdate=$('selecting.sdate').datepicker({
                             minDate:0,
                             onSelect:function(y){
                                 $('selecting.edate').datepicker();
                            $('selecting.edate').datepicker('option','minDate',y);  
                      }


                 });
                 }

            });

        </script>
        </head>

        <body>
        <div ng-app="App">
           <div ng-controller="AppCtrl">
            <form>
            <div ng-repeat="selecting in selects">
               <input id="sdate" ng-model="selecting.sdate">
               <input id="edate" ng-model="selecting.edate">
              <input type="button" value="remove" ng-click="remove(selecting)">
              </div>
              <br><br>
              <input type="button" value="add" ng-click="add()">
            </form>
           </div>  
        </body>
        </html>

Upvotes: 3

Views: 4376

Answers (4)

Kamal .sakthi
Kamal .sakthi

Reputation: 1

Dynamic date picker directive use timeout for bind date in ng-repeat.

        $timeout(function () {
            $(ele).datepicker({
                format: 'dd/mm/yyyy',
                language: 'en',
                //endDate: today,
                autoclose: true,
                //maxDate: moment(),                
            }).on('changeDate', function (e) {
                scope.$apply(function () {
                    var date = moment(e.date).format("DD/MM/YYYY");
                    ngModel.$setViewValue(date);
                });
            });
        });

Upvotes: -1

Ahmed Şah Mesud
Ahmed Şah Mesud

Reputation: 21

You can use settimeout after the page load.

And run datepicker again.

setTimeout(function(){
    $( ".sdate" ).datepicker();
    $( ".edate" ).datepicker();
}, 25);

Upvotes: 0

J-D
J-D

Reputation: 1575

To work with datepicker on dynamically added text box, add below script.

 $(function() {
    $('body').on('focus',".mydatepicker", function(){
    $(this).datepicker();
    });
  });

Your final html needs to be something like below.

<div ng-app="App">
   <div ng-controller="AppCtrl">
      <form>
         <div ng-repeat="selecting in selects track by $index">
            <input class="mydatepicker" ng-model="selecting.sdate" >
            <input class="mydatepicker" ng-model="selecting.edate" >
            <input type="button" value="remove" ng-click="remove(selecting)">
         </div>
         <br><br>
         <input type="button" value="add" ng-click="add()">
      </form>
   </div>
</div>

The working JSFiddle for same.

Upvotes: 6

Michael
Michael

Reputation: 3104

The problem is you are using ids. Ids have to be unique. If javascript or jquery does lookup an element by id it will just choose the first element it finds.

Identify the elements by class and it will work.

<div ng-repeat="selecting in selects">
  <input class="sdate" ng-model="selecting.sdate" datepicker />
  <input class="edate" ng-model="selecting.edate" />
  <input type="button" value="remove" ng-click="remove(selecting)" />
</div>

BTW. In Angluar it is best practice to put all DOM/jQuery manipulations in the directive link phase.

.directive('datepicker', function() {
    return function($scope, element) {
      console.log(element);
      element.datepicker({
        minDate: 0,
        onSelect: function(y) {
          var edate = element.siblings('.edate');
          edate.datepicker();
          edate.datepicker('option', 'minDate', element.datepicker( "getDate" ));
        }
      });
    };
});

See plunker

Upvotes: 1

Related Questions