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.

IUnknown · Accepted Answer · 2014-07-27 12:24:12Z

3

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')

answered Jul 27, 2014 at 12:24

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

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

5 Comments

naeger Over a year ago

I did not get the last part with the this and self. why do i need var self = this?

IUnknown Over a year ago

Just add this line into person request success handler: console.dir(this) anf you'll see yourself

naeger Over a year ago

ah I see .. inside the success handler is a callback so i am no longer in my Ctrl class and this points somewhere else. Thank you

naeger Over a year ago

For the answer itsself. It works. Thanks a lot!! you have no idea how many hours I already spent fumbling around with this. Last week I had a similar question and there I changed my model by reassigning a property to point to a new object instead of altering the existing object (the exact opposite like here): stackoverflow.com/questions/24711933/… .... this sucks!! or am I just too stupid???

you-rick Over a year ago

hi. I just tried your solution for datepicker, but it seems that it works well only during one month, because when I go to prev or next month, it jumps back to first month. For example if I click prev - 1 Jun, 31 May, 30 Jun ... Do you have any ideas how can I fix this?

Collectives™ on Stack Overflow

Angular UI datepicker not updating

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related