Date Range directive: data-change property not working

[MarvinAmador7]

Hi guys I'm using the date-range with data-change="" but the callback function doesn't get fire Using Angular 1.3.0

Template:

<ul class="dropdown-menu" style="left: -378px;" ng-click="$event.preventDefault();$event.stopPropagation()">
      <div date-range start="startDay" end="endDay" view="date" min-view="date" watch-direct-changes="true" data-change="endDateChange"></div>
    </ul>

Controller:

$scope.endDateChange() {
            console.log('date change');
        }

[DanTalash]

The attribute you want is date-change, not data-change (note the spelling)

[fercreek]

Does not work for me :/ the same case than @MarvinAmador7, i'm using date-change

[reinvanleirsberghe]

Not working for me either

[ottodranik]

+1. Not working

[DanTalash]

Can somebody who is experiencing this problem please check if the callbacks work on the demo page?

• Open the demo page
• Choose a date on one of the datepickers under the 'Callback' section in the third column.
• Check whether the text Callback: Not fired has changed to Callback: Fired.
  • If the text did not change, please provide some information about your system (OS, and browser type + version)
  • If the text did change, then the issue is probably to do with angular controller configiration. A plunkr or similar which exhibits the problem would be very useful in this case.

[gluth]

I have observed this issue, analyzed code and found possible sources and solutions.

This code:

if (angular.isDefined(attrs.dateChange)) {
    dateChange = datePickerUtils.findFunction(scope, attrs.dateChange);
}

is executed only once, when link link function for directive is executed with newly created scope. In most cases this newly created scope is connected with parent scope, but this is not guaranteed. In some cases (nested directives) this scope is disconnected and linked at later stage. In this case dateChange variable is false and callbacks are not fired. To have it working the check for callback existance should be performed every time when change occurs. (in by ex. scope.dateChange function for dateRange).

Quick and dirty solution is to put date-range in ng-if variabled tag:

<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()" data-ng-if="changedDate">
<div date-range start="date.startDate" end="date.endDate" date-change="changedDate"></div>
</div>