Angular-Kendo and $scope.$apply()

Question

Please consider the Partial View below and the controller below that. On the ng-change event on the date picker elements the functions called change the value that defines the upper or lower bounds of the other one.

I know that I need to redraw the kendo datepicker for it to see the updated value and that I should do it in a directive but my limited experience leaves me stuck. I assumed $scope.$apply() called after the update to the scope would do that but it doesn't do the trick.

How should I do this in an Angular fashion?

// Home View
<button id="date-button" type="button" kendo-button ng-click="showModal();">
    Variance Analysis
    <br />
</button>
<div id="spinner" class="loading" style="display:none;">
    <div class="loading-dot"></div>
    <div class="loading-dot"></div>
    <div class="loading-dot"></div>
    <div class="loading-dot"></div>
</div>

<div class="row">
    <br />
    <br />
    <br />
    <div class="col-lg-6 col-lg-offset-3">
        <h1>Select Two Months to Compare</h1>
        <br />
        <br />
        <br />
        <div class="col-lg-6">
            <input kendo-date-picker ng-model="dates.fromDate" k-ng-model="dates.actualFromDate" k-options="datePicker1Options();" ng-change="setMaxDate();" />
        </div>
        <div class="col-lg-6">
            <input kendo-date-picker ng-model="dates.untilDate" k-ng-model="dates.actualUntilDate" k-options="datePicker2Options();" ng-change="setMinDate();" />
        </div>
        <div class="row">
            <br />
            <br />
            <br />
            <div class="col-lg-2 col-lg-offset-4">
                <button kendo-button ng-click="go();" style="width:100%;">Go</button>
            </div>
        </div>
    </div>
</div>




// Home Controller
app.controller('HomeCtrl', ['$scope', '$http', '$location', 'data', function ($scope, $http, $location, data) {
    $scope.dates = {};
    $scope.dates.untilDate;
    $scope.dates.fromDate;
    $scope.dates.actualUntilDate;
    $scope.dates.actualFromDate;

    $scope.minDate =  new kendo.data.ObservableObject({
        date: new Date(1970)
    });

    $scope.maxDate = new kendo.data.ObservableObject({
        date: new Date()
    });

    $scope.setMaxDate = function () {
        var date = new Date($scope.dates.actualFromDate);
        date.setMonth(date.getMonth() + 1);
        $scope.maxDate.date = date;
        // $scope.$apply();
    }

    $scope.setMinDate = function() {
        var date = new Date($scope.dates.actualUntilDate);
        date.setMonth(date.getMonth() - 1);
        $scope.minDate.date = date;
        // $scope.$apply();
    }


    $scope.datePicker1Options = function () {
        return {
            animation: {
                close: {
                    effects: "fadeOut zoom:out",
                    duration: 300
                },
                open: {
                    effects: "fadeIn zoom:in",
                    duration: 300
                }
            },
            format: "MMM yyyy",
            start: "year",
            depth: "year",
            min: $scope.minDate.date
        }
    }


    $scope.datePicker2Options = function () {
        return {
            animation: {
                close: {
                    effects: "fadeOut zoom:out",
                    duration: 300
                },
                open: {
                    effects: "fadeIn zoom:in",
                    duration: 300
                }
            },
            format: "MMM yyyy",
            start: "year",
            depth: "year",
            max: $scope.maxDate.date
        }
    }

    $scope.go = function () {
        data.fetch($scope.dates.fromDate, $scope.dates.untilDate, $http, $location);
    }


}]);

Answer 1

Looking at the source code, k-rebind is what you're after since angular-kendo doesn't use two-way bindings, but k-rebind seems ultra buggy and kept sending any tests I did into an infinite digest loop. Best to take this up with the author.

Also, I think there is a logic bug your two date pickers. I'm assuming the FromDate should actually set the MinDate which will update the min option of DatePicker2