2013-10-20 13 views
5

私は単純なdatepickerディレクティブを書いています。ここでは、コードは次のとおりです。私はhtml<date-picker></date-picker>を使用する場合anglejsのブートストラップ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); 
      }); 
     } 
    } 
}); 

これは、日付ピッカーをトリガします。

しかし、上記の指示文では、onRenderのコールバックは機能しません。私は同じ例を使用していますDisable bootstrap dates

私はここで間違っていますか?

感謝:)

答えて

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'イベントの一部として渡されているものに関しては少しあいまいですが、私はそれが動作するはずかなり確信しています。日付オブジェクトを渡さない場合は、フォーマットする前に入力からオブジェクトを読み取らなければならない場合があります。

0

AngularJSのV1.2からngAnimateを活用Bootstrap3ためAngularStrapで働いネイティブ実装があります+

あなたはTwitterBootstrapのジャバスクリプトを頼り続けることを好む場合は、単にそのない古いバージョンがあります:

は、
関連する問題