change event is not getting triggered in angular js

Question

I am new to angular js. I have a bootstrap calendar in my application. On change of month, a change event needs to be triggered. But it is not getting triggered no matter where I place it.

Please find the snippet below.

angular.element(document).ready(function() {
    console.log('page loading completed');
    $('#datetimepicker').datepicker({
        inline : true,
        sideBySide : true,
        useCurrent : false,
        firstDay : 1
    }); 
    $(".ui-datepicker-month").on('change',function() {
        alert("change event triggered")
    });
});

Kindly help me.

Thanks, Poorna

I recommend you looking into UI-Bootstrap, it's all the bootstrap directives done the Angular way, using jQuery is usually a no-go (unless it's in directives) Link: angular-ui.github.io/bootstrap — Martijn Welker
– Martijn Welker, Commented Feb 18, 2016 at 8:30
try this: $(document).on('change', '.ui-datepicker-month', function() { alert("change event triggered") }); — Sumit Sahay
– Sumit Sahay, Commented Feb 18, 2016 at 8:31
<div data-datetimepicker="" id="datetimepicker" class="col-md-12 col-lg-12" style="position:absolute;"> </div> — Eli Johnes
– Eli Johnes, Commented Feb 18, 2016 at 8:56

Jai · Accepted Answer · 2016-02-18 09:12:07Z

5

Such things you should do in the DDO (Directive Definition Object). Suppose this is your element datepicker:

<input type='text' data-datetimepicker="" id='datetimepicker'>  
<!---our directive------^^^^^^^^^^^^^^----------------------->

Then you can create your directive like this:

myApp.directive('datetimepicker', function() {
  return {
    restrict: 'A', //<---A for attribute
    link: function(scope, el, attrs) {
      el.find('input').datetimepicker().on('dp.change', function() {
          console.log("change event triggered");
        });
    }
  };
});

var myApp = angular.module('dateApp', []);
myApp.directive('datetimepicker', function() {
  return {
    restrict: 'A', //<---A for attribute
    link: function(scope, el, attrs) {
      el.find('input').datetimepicker().on('dp.change', function() {
          $(this).after("change event triggered");
        });
    }
  };
});

div {
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker-standalone.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div ng-app='dateApp'>
  <div id='datetimepicker' data-datetimepicker="">
    <input type='text'>
    <!---our directive------^^^^^^^^^^^^^^----------------------->
  </div>
</div>

edited Feb 18, 2016 at 9:12

answered Feb 18, 2016 at 8:32

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

4 Comments

Jai Over a year ago

change event triggers when you leave the element like blur event. you could use input event too.

Eli Johnes Over a year ago

Hi Jai. The datetimepicker is a div element in my case and as you said I tried both input and change event. Its not triggered.Please find the snippet below.

Eli Johnes Over a year ago

dlcModule.directive('datetimepicker', function(){ return { restrict:'A', //<---A for attribute link:function(scope, el, attrs){ el.datepicker(); el.on('input', function(){ console.log("change event triggered"); }); } }; });

Jai Over a year ago

@PoornaMurali Well i thought you have a jQuery datepicker but it was bootstrap's datetimepicker, so for that you can use dp.change custom event of datetimepicker. Have added a working code snippet. take a look at that how it is functioning.

Collectives™ on Stack Overflow

change event is not getting triggered in angular js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related