Question

我编写了一个简单的datepicker指令。这是代码：

appDirective.directive('datePicker', function() {
    return {
        restrict: 'E',
        require: ['ngModel'],
        scope: {
            ngModel: '='
        },
        replace: true,
        template:
            '<div class="input-group">'     +
                    '<input type="text"  class="form-control" ngModel required>' +
                    '<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' +
            '</div>' ,
        link: function(scope, element, attrs) {
            var input = element.find('input');
            var nowTemp = new Date();
            var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(),0,0,0,0);
            console.log(now);
            console.log(nowTemp);

            input.datepicker({
               format: "yyyy-mm-dd",
                onRender: function(date) {
                    return date.valueOf() < now.valueOf() ? 'disabled' : '';
                }
            });

            element.bind('blur keyup change', function() {
                scope.ngModel = input.val();
                console.info('date-picker event', input.val(), scope.ngModel);
            });
        }
    }
});

如果我在<date-picker></date-picker>中使用html，则会触发日期选择器。

但是在上面的指令中，onRender的回调不起作用。我使用与Disable bootstrap dates

相同的示例

我在这里做错了什么？

谢谢：）

Answer 1

onRender函数不是回调函数，它是一个被触发的事件。他们在您引用的文档中使用的示例是：

$('#dp5').datepicker()
  .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
       ....
    }
});

所以你应该添加一个事件监听器，而不是提供一个回调函数。做这样的事情：

input.datepicker()
  .on('onRender', function(ev, date){
      return date.valueOf() < now.valueOf() ? 'disabled' : '';
});

文档对于'onRender'事件的确切传递内容有点模糊，但我很确定应该有效。如果未传递日期对象，则可能必须在格式化之前从输入中读取它。

Answer 2

在AngularStrap中，Bootstrap3中有一个可用的本机实现，它利用AngularJS v1.2 +中的ngAnimate

演示：http://mgcrea.github.io/angular-strap/##datepicker

您可能还想结帐：

来源：https://github.com/mgcrea/angular-strap/blob/master/src/datepicker/datepicker.js

如果您更愿意继续依赖TwitterBootstrap javascript，那么旧版本就是这样做的：

旧文档：http://mgcrea.github.io/angular-strap/1.0/#/datepicker

angularjs的Bootstrap datepicker指令

2 个答案: