angular-ui bootstrap datepicker选项使用函数而不是json

时间:2016-08-01 08:17:19

标签: angularjs datepicker angular-ui-bootstrap

鉴于我的代码:

<input type="text" class="form-control" uib-datepicker-popup="dd-MM-yyyy" ng-model="addNoPayRows[$index].date" is-open="addNoPayPopup[$index].opened"  ng-required="true" close-text="Close" datepicker-options="datepickerOptions($index)"/>

和js

$scope.datepickerOptions = function(index) {
            if(index == 0) {
                return {showWeeks:false, minDate:$scope.today};
            } else {
                return {showWeeks:false, minDate: $scope.addNoPayRows[index-1].date};
            }
        }

页面上可能有多个日期选择器。我的目标是,如果它是第一个日期选择器,则minDate设置为今天,否则minDate应设置为早于上一个选定日期

我尝试以功能方式执行此操作,但它始终报告

10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"},"oldVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"}},{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":null},"oldVal":{"showWeeks":false,"minDate":null}}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"},"oldVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"}},{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":null},"oldVal":{"showWeeks":false,"minDate":null}}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"},"oldVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"}},{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":null},"oldVal":{"showWeeks":false,"minDate":null}}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"},"oldVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"}},{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":null},"oldVal":{"showWeeks":false,"minDate":null}}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"},"oldVal":{"showWeeks":false,"minDate":"2016-08-01T08:16:05.956Z"}},{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}","newVal":{"showWeeks":false,"minDate":null},"oldVal":{"showWeeks":false,"minDate":null}}]]

任何想法如何实现这个?感谢

编辑:

$scope.today = new Date();

即使该函数被写为

$scope.datepickerOptions = function(index) {           
    return {showWeeks:false, minDate:$scope.today};
}

所以我怀疑它不能通过功能

来完成

1 个答案:

答案 0 :(得分:0)

$scope.today应该是日期对象/时刻对象(假设你拥有它),然后对于第二个日期选择器而不是$scope.addNoPayRows[index-1].date你可以拥有$scope.today然后你可以添加一个观察者在第一个日期选择器的ng-model上:

有一个minDate数组,其中每个元素都是每个日期选择器的minDate,可以初始化为:

$scope.minDates = [$scope.today, $scope.today];
$scope.datepickerOptions = function(index) {
   return {showWeeks:false, minDate:$scope.minDates[index]};   
};

// Watcher
$scope.$watch(function(){return $scope.addNoPayRows[0].date;}, 
   function(){
     $scope.minDates[1] = $scope.addNoPayRows[0].date;
});