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

如果我在html使用<date-picker></date-picker> ，這會觸發datepicker。

但是在上面的指令中， 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'事件的確切傳遞內容有點模糊，但我很確定這應該有效。 如果未傳遞日期對象，則可能必須在格式化之前從輸入中讀取它。

Answer 2

AngularStrap for 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