0

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="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="angular.js@1.5.3" 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

Thirumalai murugan
  • 5,698
  • 8
  • 32
  • 54
  • Why are you doing the grave mistake of mixing angularJS and jquery. Why not use angular Date picker ?? You are missing `$digest` when using jquery – Shashank Vivek Jul 01 '18 at 15:51
  • @ShashankVivek the jQuery code isn't modifying `$scope`, so lack of `$digest` or `$apply` is not the problem in this case. – georgeawg Jul 01 '18 at 15:55
  • You probably don't need to mix in jQuery, could you comment more on what you're trying to achieve? – Edgar Quintero Jul 01 '18 at 15:58
  • This code uses an old version of bootstrap-datepicker (1.5) and an old version of jQuery (1.11). Instead of trying to fix the problem with jQuery delegate (which is deprecated), it would be wiser to use a bootstrap-datepicker that is integrated with the AngularJS framework. Consider the one by the AngularUI team: [ui.bootstrap.datepickerPopup](https://angular-ui.github.io/bootstrap/#!datepickerPopup) – georgeawg Jul 01 '18 at 17:22
  • @ShashankVivek, you are correct that I should not mix the jquery and angular, but Im working on the existing project, I don't have the authority to change the component, I need to add the set of component dynamically among that datepicker is the one. – Thirumalai murugan Jul 02 '18 at 04:05
  • 1
    @Thirumalaimurugan : Ahhh... ok . lemme check it then – Shashank Vivek Jul 02 '18 at 06:43
  • @ShashankVivek thanks for trying out the solution for me, however I got the solution and I have posted that as answer. – Thirumalai murugan Jul 03 '18 at 07:42

2 Answers2

0

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"});

    }
Thirumalai murugan
  • 5,698
  • 8
  • 32
  • 54
-1

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.

Edgar Quintero
  • 4,223
  • 2
  • 34
  • 37