5

簡単な日付ピッカー ディレクティブを作成しました。コードは次のとおりです。

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

Bootstrap3のAngularStrapngAnimateには、AngularJS v1.2+を活用する有効なネイティブ実装があります。

チェックアウトすることもできます:

TwitterBootstrap JavaScript に依存し続けることを好む場合は、それを行う古いバージョンがあります。

于 2014-01-23T19:12:45.483 に答える