angularjs的Bootstrap datepicker指令

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>,这会触发datepicker html.

但是在上面的指令中,回调onRender 函数不起作用.我使用与禁用引导日期相同的示例

我在这做错了什么？

谢谢 :)

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'，但我很确定这应该有效。如果未传递日期对象，则可能必须在格式化之前从输入中读取它。