5

我写了一个简单的 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 不起作用。我使用与禁用引导日期相同的示例

我在这里做错了什么？

谢谢 ：）

4

2 回答 2

0

该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'事件的一部分传递的确切内容有点模糊，但我很确定这应该有效。如果您没有收到日期对象，则可能必须在格式化之前从输入中读取它。

于 2013-10-20T21:30:26.693 回答
0

AngularStrap中有一个用于 Bootstrap3 的本地实现，它利用ngAnimate了 AngularJS v1.2+

您可能还想结帐：

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

于 2014-01-23T19:12:45.483 回答