3

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>
Improve this question
3
  • I recommend you to use bootstraps datepicker that was created especially for angular Commented Nov 5, 2015 at 8:02
  • I have used before but can't control to mindate maxdate function like jquery... can u please give some suggestion to control datepicker Commented Nov 5, 2015 at 8:09
  • Er...there are such options as max and min in bootstrap datepicker Commented Nov 5, 2015 at 8:12

4 Answers 4

Reset to default
6

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.

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

Comments

1

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

Improve this answer

Comments

0

You can use settimeout after the page load.

And run datepicker again.

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

Comments

-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);
                });
            });
        });
Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.