Angular UI datepicker not updating

Question

I have tried to extend the UI datepicker with previous and next day buttons.

As you can see from the plunker I can change the model either by using the datepicker or the prev/next buttons. But when the model is changed with the prev/next buttons, the datepicker ist not updated.

http://plnkr.co/edit/k1flklFny5BoX6zdwyWJ?p=preview

<div class="form-group">
   <div class="input-group">
     <input type="text" class="form-control" 
        datepicker-popup="{{ctrl.format}}" ng-model="ctrl.dt" 
        is-open="ctrl.opened" datepicker-options="ctrl.dateOptions" 
        ng-required="true" close-text="Close" /> 
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="ctrl.open($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
  </div>
</div>

I tried several approaches already (including $scope and the demonstrated controller as syntax) but it simply does not work. Any ideas?

PS: I tried very hard to have prev button, datepicker, next button in one line, centered, the datepicker occupying just enough space it needs. If anyone has an idea how to accomplish that, any help is greatly appreciated.

Answer 1

I don't know why, but seems that ngModel doesn't react when Date object changed itself. But it changed if you assign to scope property new instance of Date.

Try this:

this.prevDay = function() {
    this.dt = getPrevNextDate(this.dt, -1);
};

this.nextDay = function() {
    this.dt = getPrevNextDate(this.dt, 1);
};

function getPrevNextDate(date, increment)
{
  var newDate = new Date();
  newDate.setDate(date.getDate() + increment);
  return newDate;
}

And better to cache this into some variable like var self = this at top of controller function and use self variable instead of this

This way you will avoid error in this line:

$log.log('GET api/v1/person/' + this.person.id + '/entry returned: ' + data.length + ' entries')