$scope variable not updating until second click (AngularJS / jQuery / Bootstrap Date Range Picker)

Question

So I've already searched quite a bit on stackoverflow, and it seems the issues are similar to mine, but different. For me, the view (div class with id="reportrange") is updating right away to show the date selected when the user selects their desired date range, but the $scope variable (used so that I can pass the selected start and end date values into a filter) is not updating until the user clicks on the reportrange div a second time.

I'm using the bootstrap date range picker with AngularJS.

Here is the code In my controller:

//start date when page loads
$scope.startDate = moment().subtract(3, 'years').startOf('year').format('YYYY-MM-DD');    
//end date when page loads
$scope.endDate = moment().add(2, 'years').endOf('year').format('YYYY-MM-DD');  

//updates the startDate and endDate
var updateStartEnd = function (start, end) {
    $scope.startDate = start.format('YYYY-MM-DD');
    $scope.endDate = end.format('YYYY-MM-DD');
    //$log.info($scope.startDate);
    //outputs the correct date but date not changed on the page
    //$log.info($scope.endDate);
    //outputs the correct date but date not changed on the page
}

$scope.dateFunc = function () {

    function cb(start, end) {
        updateStartEnd(start, end);
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({

        ranges: {
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
           'This Year': [moment().startOf('year'), moment().endOf('year')]
        }

    }, cb);
};

and this is date range picker dropdown on my html page:

<div ng-click="dateFunc()" id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
<span>Select a Date Range...</span> <b class="caret"></b>
</div>

I've tried adding a $scope.watch as well as changing the ng-click to ng-init, but neither of those proved to be useful. Any help is greatly appreciated.

You are updating a model outside angular's digest cycle. you should use $scope.$apply() when the model is updated, IE when the daterangepicker's model is updated (onChanged callback or something similar). — Muli Yulzary
– Muli Yulzary, Commented Jun 9, 2016 at 23:08

Kyle · Accepted Answer · 2016-06-13 17:38:33Z

3

I fixed the issue by adding $scope.$apply as seen below:

//updates the startDate and endDate
var updateStartEnd = function (start, end) {
    $scope.$apply(function () {
        $scope.startDate = start.format('YYYY-MM-DD');
        $scope.endDate = end.format('YYYY-MM-DD');       
    });
};

answered Jun 13, 2016 at 17:38

Kyle

6,5276 gold badges44 silver badges56 bronze badges

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

Collectives™ on Stack Overflow

$scope variable not updating until second click (AngularJS / jQuery / Bootstrap Date Range Picker)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related