用於angularjs的引導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>。

但是，在上述指令中，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