CODEWITHSUNDEEP
jqueryangularjsbootstrap-datepickerjquery-delegate
Thirumalai murugan
Thirumalai murugan

Reputation: 5906

Angularjs+jquery bootstrap-datepicker delegate not firing on first click

I have tried adding the datepicker dynamically on button click and I have delegated the datepicker click which is not working on the first click its getting fired on the second click the code I have tried are the following

$scope.add = function()
    {
      var body =angular.element(window.document.body);
      body.append(`
        <div class="input-group date">
          <input class="form-control input-sm" 
                 placeholder="dd/mm/yyyy"type="text">
          <span class="input-group-addon">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
      `);

    }

$(document).delegate("div.input-group.date", "click", function(){     
      $(this).datepicker({autoclose: true,orientation:"top"});       
});

I couldn't find out the reason, thanks in advance.

<html ng-app="app">
  <head>
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="jquery-1.11.3.js"></script>
    <!-- Datepicker for Bootstrap v1.5.0 (https://github.com/eternicode/bootstrap-datepicker) -->
    <script src="datetimepicker.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="test">
      <input ng-click="add()" value="Add datepicker" type="button" />
  </body>

</html>

plnkr sample

steps to replicate bug:

  1. Click Add Datepicker button
  2. Date picker component will be added in DOM, then click in the datepicker

Observed

First click wont work, it will work from the subsequent clicks

Upvotes: 0

Views: 572

Answers (2)

Thirumalai murugan
Thirumalai murugan

Reputation: 5906

Finally I found the reason and work around for the same. I am giving that solution since it may help to others in future

Reason:

First mistake is I have bind the datepicker event on element click so binding happened on the first click and it started working in subsequent clicks.

Work around

We have to bind the datepicker immediately after the element created I have solved this using the following code

$scope.add = function()
    {
      var body =angular.element(window.document.body);
      var element=angular.element('<div class="input-group date">\
                      <input class="form-control input-sm"\
                      placeholder="dd/mm/yyyy" type="text">\
                      <span class="input-group-addon">\
                        <span class="fa fa-calendar"></span>\
                      </span>\
                  </div>');
      body.append(element);
      $(element).datepicker({autoclose: true,orientation:"top"});

    }

Upvotes: 0

Edgar Quintero
Edgar Quintero

Reputation: 4441

If you are just trying to make the date picker appear on click, then do it the AngularJS way:

Controller:

$scope.add = function() {
  $scope.showDatePicker = true;
}

Template:

<button ng-click="add()">Add Datepicker</button>

<div ng-show="showDatePicker" class="input-group date">
   <input class="form-control input-sm" placeholder="dd/mm/yyyy"type="text">
   <span class="input-group-addon">
   <span class="fa fa-calendar"></span>
   </span>
</div>

When you click on the button with add() the $scope.showDatePicker is set to true and the datepicker is shown. You could also add a button to "hide" the date picker:

$scope.remove = function() {
  $scope.showDatePicker = false;
}

Or you could make a function that toggles it, where add and remove happen in the same function.

Upvotes: -1

Related Questions