Question

我尝试使用上一天和下一天的按钮扩展UI datepicker。

从plunker可以看出，我可以通过使用datepicker或prev / next按钮来更改模型。但是当使用prev / next按钮更改模型时，datepicker不会更新。

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>

我已经尝试了几种方法（包括$ scope和演示的控制器作为语法），但它根本不起作用。有什么想法吗？

PS：我非常努力地将prev按钮，datepicker，下一个按钮放在一行，居中，datepicker占用了足够的空间。如果有人知道如何实现这一点，我们非常感谢任何帮助。

Answer 1

我不知道为什么，但似乎当Date对象改变时ngModel没有做出反应。但是如果你为scope属性分配了Date的新实例，它就会改变。

试试这个：

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;
}

最好将this缓存到控制器函数顶部的var self = this之类的变量中，并使用self变量代替this

这样你就可以避免错误：

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

Angular UI datepicker不更新

1 个答案: