ngChange doesn't work for kendo-date-picker which defined in kendo.toolbarOptions

Question

I want to bind ngChange event to kendo-date-picker, the date picker defined in the toolbarOptions, but the ngChange doesn't work.

 $scope.toolbarOptions = {
        items: [{
            template: "<label>From</label>"
        }, {
            template: "<input id='start' kendo-date-picker ng-model='dateString' k-ng-model='dateObject' ngChange='startChange()' />",
            overflow: "never"
        }]};

 $scope.startChange = function() {console.log('changed');}
 
 function startChange() {console.log('changed');}

please check my code, both of the startChange will not work. There's a ReferenceError: startChange is not defined

Answer 1

You are using ngChange, Please change it with ng-change like:-

$scope.toolbarOptions = {
    items: [{
        template: "<label>From</label>"
    }, {
        template: "<input id='start' kendo-date-picker ng-model='dateString' k-ng-model='dateObject' ng-change='startChange()' />",
        overflow: "never"
    }]};

    $scope.startChange = function() {console.log('changed');}

or if you want to call javascript function then you have to define your js function before it using

  angular.module("KendoDemos", [ "kendo.directives" ])
  .controller("MyCtrl", function($scope){

        $scope.toolbarOptions = {
          items: [{
             template: "<label>From</label>"
            }, {
            template: "<input id='start' handle-change kendo-date-picker ng-model='dateString' k-ng-model='dateObject' onChange='startChange()' />",
        overflow: "never"
          }]

        };
    }).directive('handleChange',function(){
    return{
       link:function(scope,ele,attr){
         //you can use this
            //ele.on('change',function(){
              //alert(555)
           //})
      //or
      function startChange() {console.log('changed');}
    }
  }
 });